Comment optimiser les images Web au format PNG - Les mannequins

Lorsque vous concevez pour l'iPhone, iPad, ou iPod touch, vous devez choisir les meilleurs formats d'image et de résolution, ainsi que d'optimiser vos photos et autres graphiques.

Si vous utilisez un graphisme, tel qu'un logo, un dessin animé ou un dessin pouvant être affiché en 256 couleurs ou moins, le mieux est d'utiliser le format PNG 8 et de réduire le nombre total de couleurs utilisées dans l'image autant que possible pour réduire la taille du fichier.

Si vous voulez rendre une couleur dans l'image transparente, et que vous travaillez avec une photo ou un autre type d'image avec des millions de couleurs, vos meilleures options sont PNG 24.

Vers aider à compenser la dégradation de la qualité d'image qui peut se produire lorsque les couleurs sont supprimées, le format PNG utilise un truc de tramage . Dithering implique l'alternance de pixels dans un motif en forme de damier pour créer de subtiles variations de couleurs, même avec une palette de couleurs limitée. L'effet peut lisser les bords de l'image et lui donner l'impression d'avoir plus de couleurs qu'elle ne le fait réellement.

Pour convertir une image au format PNG 8 ou 24 dans Photoshop, procédez comme suit (dans Photoshop Elements ou Fireworks, le processus est similaire bien que les étapes spécifiques puissent varier):

1Avec le image ouverte dans Photoshop, choisissez Fichier → Enregistrer pour le Web et les périphériques (ou Fichier → Enregistrer pour le Web).

La boîte de dialogue Enregistrer pour le Web et les périphériques s'affiche. Dans cet exemple, vous voyez le logo en noir et blanc pour le site Web inplainsight art. Le format PNG 8 est idéal pour les images avec des couleurs limitées, telles que les dessins animés et les dessins au trait.

2Dans le coin supérieur gauche de la boîte de dialogue, choisissez 2-Up ou 4-Up pour afficher plusieurs versions de la même image pour faciliter la comparaison côte-à-côte.

Cet exemple montre 2-Up, ce qui permet d'afficher l'image originale du logo en haut, ainsi qu'un aperçu de la version optimisée en bas.

3Sélectionnez une image d'aperçu pour commencer à modifier ses paramètres.

Cliquez sur une image pour la rendre active dans la boîte de dialogue.

4Sur le côté droit de la boîte de dialogue, sous Preset, cliquez sur la petite flèche pour ouvrir la liste déroulante Optimized File Format et choisissez PNG 8 ou 24.

Si vous choisissez PNG 8, vous aurez obtenir les plus petites tailles de fichiers. Choisissez le format PNG 24 uniquement si vous souhaitez optimiser une image avec plusieurs couleurs tout en conservant une couleur transparente.

5Dans la zone Couleurs, sélectionnez le nombre de couleurs, comme illustré à la Figure 8-5.

Moins vous utilisez de couleurs, plus la taille du fichier est petite et plus l'image sera téléchargée rapidement. Mais fais attention; Si vous réduisez trop les couleurs, vous perdez des détails.Le nombre idéal de couleurs dépend de votre image. Si vous allez trop loin, votre image aura l'air terrible.

6Si vous souhaitez conserver une zone transparente dans votre image, cochez la case Transparence.

Toute zone de l'image qui était transparente lorsque vous avez créé l'image dans l'éditeur apparaît transparente dans la fenêtre d'aperçu. Si vous ne disposez pas d'une zone transparente dans votre image, ce paramètre n'a aucun effet.

La transparence est une bonne astuce pour faire apparaître du texte ou une image sur une page Web. C'est parce qu'un fond transparent n'apparaît pas sur la page Web. Vous pouvez sélectionner la transparence en tant qu'option d'arrière-plan dans la boîte de dialogue Nouveau fichier lorsque vous créez une nouvelle image dans Photoshop ou Photoshop Elements.

7Si vous choisissez Transparence, spécifiez également une couleur mate.

Vous souhaitez que la couleur mate corresponde à l'arrière-plan de votre page Web afin que le tramage le long du bord transparent se fondre avec l'arrière-plan. Si vous ne spécifiez pas de couleur mate, la transparence est définie pour un arrière-plan blanc, ce qui peut provoquer un effet halo lorsque l'image est affichée sur un arrière-plan coloré.

8Spécifiez d'autres paramètres selon vos besoins.

Le reste des paramètres de cette boîte de dialogue peut être conservé par défaut dans Photoshop.

9Cliquez sur Enregistrer.

La boîte de dialogue Enregistrer optimisé sous s'ouvre.

10Entrez un nom pour l'image et enregistrez-le dans le dossier images (ou tout autre dossier) de votre dossier de site local.

Répétez ces étapes pour chaque image que vous souhaitez optimiser en tant que fichier GIF ou PNG pour votre site.

Les essais et erreurs sont une excellente technique dans la boîte de dialogue Enregistrer pour le Web et les périphériques. La fenêtre de prévisualisation montre clairement l'effet de plus en plus dégradant que produit de moins en moins de couleurs.