Comment optimiser les images web dans des formats PNG

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

Sommaire

Si vous travaillez avec un graphique, comme un logo, personnage de dessin animé, ou un dessin qui peut être affiché en 256 couleurs ou moins, votre meilleur pari est d'utiliser le format PNG 8 et de réduire le nombre total de couleurs utilisées dans l'image autant que possible afin de réduire la taille du fichier.

Si vous souhaitez effectuer 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 est PNG 24.

Pour aider à compenser la dégradation de la qualité d'image qui peut arriver quand les couleurs sont supprimés, PNG utilise une astuce de tramage. Le tramage implique pixels en alternance dans un motif en damier comme pour créer des variations de couleurs subtiles, même avec une palette de couleurs limitée. L'effet peut lisser les bords de l'image et la rendre semblent avoir plus de couleurs que qu'il fait réellement.

Pour convertir une image pour la PNG 8 ou 24 dans Photoshop, suivez ces étapes (dans Photoshop Elements ou Fireworks, le processus est similaire, bien que les étapes spécifiques peuvent varier):

Comment optimiser les images web dans des formats PNG
Comment optimiser les images web dans des formats PNG Agrandir
1

Avec l'image ouverte dans Photoshop, choisissez Fichier-Enregistrer pour le Web Devices (ou Fichier-Enregistrer pour le Web).

La Enregistrer pour le Web Boîte de dialogue Périphériques apparaît. Dans cet exemple, vous voyez le logo noir et blanc pour le site inplainsight art. Le format PNG 8 est le meilleur pour les images avec des couleurs limitées, comme les dessins animés et de l'art en ligne.

2

Dans le coin supérieur gauche de la boîte de dialogue, cliquez sur 2 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, qui permet d'afficher l'image originale du logo en haut, ainsi qu'un aperçu de la version optimisée au fond.

3

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

Cliquez sur l'image pour la rendre active dans la fenêtre de dialogue.

4

Sur le côté droit de la fenêtre de dialogue, un peu moins de présélection, cliquez sur la petite flèche pour ouvrir la liste déroulante Format de fichier optimisé et choisissez PNG 8 ou 24.

Si vous choisissez PNG 8, vous obtiendrez les tailles de fichier plus petites. Choisissez PNG 24 seulement si vous souhaitez optimiser une image avec beaucoup de couleurs et de toujours être en mesure de définir une couleur à transparent.

5

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

Les moins de couleurs que vous utilisez, plus la taille du fichier et le plus rapide de l'image seront téléchargées. Mais être tentivement si vous réduisez les couleurs trop, vous perdez de détails. Le nombre idéal de couleurs dépend de votre image- si vous allez trop loin, votre image sera horrible.

6

Si vous voulez maintenir une zone transparente dans votre image, sélectionnez la case à cocher de la transparence.

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


La transparence est une bonne affaire pour rendre le texte ou une image semblent flotter sur une page web. En effet, un fond transparent ne figure pas sur la page Web. Vous pouvez sélectionner la transparence comme une option de fond dans la boîte de dialogue Nouveau fichier lorsque vous créez une nouvelle image dans Photoshop ou Photoshop Elements.

7

Si vous choisissez la transparence, spécifiez aussi une couleur mat.

Vous voulez que la couleur mate pour correspondre au fond de votre page Web de sorte que les tergiversations sur le bord transparent va se fondre dans l'arrière-plan. Si vous ne spécifiez pas une couleur de cache, la transparence est réglé pour un fond blanc, ce qui peut provoquer une halo effet lorsque l'image est affichée sur un fond coloré.

8

Spécifiez les autres paramètres comme vous le souhaitez.

Le reste des paramètres dans cette boîte de dialogue peuvent être laissés à leurs valeurs par défaut dans Photoshop.

9

Cliquez sur Enregistrer.

Le Sauvegarder optimisé boîte de dialogue apparaît.

10

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

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

Essais et erreurs est une grande technique dans le Enregistrer pour le Web Boîte de dialogue Périphériques. La fenêtre d'aperçu montre clairement l'effet de plus en plus dégradant que le choix des couleurs moins en moins de produit.


» » » » Comment optimiser les images web dans des formats PNG