Optimiser une image pour le web avec Photoshop

J'aimerais bien vous apprendre comment optimiser une image pour le Web avec Photoshop. Je vais me mettre dans la peau d'un professeur Optimiser (on dit aussi optimaliser) veut dire "tirer le meilleur parti de quelque chose". C'est-à-dire ajuster les caractéristiques de l'image pour une meilleur restitution et insertion tout en assurant un bon compromis taille/qualité.

• Optimiser une image JPEG pour le Web sous Photoshop

• Optimiser une image PNG-8 ou GIF pour le web sous Photoshop

  • PNG-8

  • GIF

• Optimiser une image PNG-24 pour le web sous Photoshop

Juste à titre de rappel :

• le codage paletted (couleurs indexées) est supporté par le GIF et le PNG-8 ;
• le codage GrayScale (niveaux de gris) est supporté par le PNG-8 ;
• le codage TrueColor (couleurs vraies ou couleurs RVB) est supporté par le JPEG et PNG-24. Le JPEG ne pourra jamais être transparent, par contre le PNG-24 peut avoir une couche alpha :
  • PNG-24 (RVB : rouge-vert-bleu) : PNG TrueColor qui peut afficher 2²⁴ couleurs différentes sans transparence ;
  • PNG-32 (RVBA : rouge-vert-bleu-alpha) : en plus des 16 millions de couleurs, le PNG peut avoir un effet de transparence graduelle de 256 niveaux grâce au canal alpha qui consomme 1 octet de plus pour chaque pixel.

Optimiser une image JPEG pour le Web sous Photoshop

Pour optimiser un format d'images pour le web, vous devez tout d'abord choisir l'option "enregistrer pour le web" qui se trouve dans le menu "Fichier" ou bien utilisez le raccourci "ALT + MAJ (Shift) + CTRL + S". Une fenêtre va s'ouvrir qui comporte entre autre la rubrique suivante :

Choisissez ensuite de préférence le mode de vue "2 vignettes" : Ceci va vous permettre d'afficher en même temps l'image originale à gauche créée dans l'atelier Photoshop ainsi que l'image optimisée à droite, ce mode de vue va vous permettre de faire une comparaison en temps réel entre les deux images en terme de consommation d'espace disque, dégradation de la qualité etc.

• le liste déroulante N°1 permet d'appliquer à l'image des modèles prédéfinis. Par défaut il existe 12 modèles (en Photoshop cs2), mais vous pouvez en ajouter d'autres. Il suffit de faire vos propre choix (concernant les options offertes : format d'images, compression, transparence, tramage etc.), ensuite cliquez sur la petite flèche qui se trouve à gauche (N°2), puis choisissez "Enregistrer les paramètres", enfin tapez un nom expressif par exemple "JPEG progressif", Vos paramètres seront enregistrés dans un fichier qui à pour extension ".irs" dans le dossier :
  "C:\Program Files\Adobe\Adobe Photoshop CS2\Paramètres prédéfinis\Paramètres optimisés"
  Dorénavant vous pouvez appliquer vos paramètres préférés sans avoir à les redéfinir à chaque nouvel enregistrement.
• la liste déroulante N°3 permet de préciser le format d'images, vous avez le choix entre : GIF, JPEG, PNG-8, PNG-24, WBMP.
• la case à cocher N°4 permet de compresser davantage une image JPEG, cependant cette fonctionnalité n'est pas prise en charge par certains navigateurs anciens.
• les listes déroulantes N°5 et 6 permettent de régler le taux de compression.
• la case à cocher N°7 permet de créer un JPEG progressif. Un JPEG progressif se comporte de la même manière que les deux formats GIF ou PNG entrelacés, mais il consomme davantage en mémoire vive (RAM) et permet d'accroître la compression de l'image.
• le paramètre N°8 permet d'appliquer un filtre flou ce qui aura pour conséquence de diminuer la taille du fichier mais au détriment de sa netteté, donc à utiliser avec modération : une valeur comprise entre 0.1 et 0.5 reste toujours un bon choix dans la plupart des situations.
• la case N°9 permet d'enregistrer un profil ICC dans l'image qui pourra être exploité par certains navigateurs pour l'ajustement des couleurs, l'ajout d'un profil ICC nécessite davantage d'espace mémoire.
• la liste "Détourage" permet de spécifier la couleur avec laquelle mélanger les pixels transparents dans l'image d'origine. La valeur par défaut est le blanc. Les pixels transparents sont représentés par des petits carrés en blanc et gris

Optimiser une image PNG-8 ou GIF pour le web sous Photoshop

PNG-8

• la case à cocher N°1, je suis sûr que vous l'avez deviné tout seul elle sert à créer une version PNG-8 entrelacée.
• le menu "algorithme de réduction de couleurs" N°2, permet de créer une table de couleurs en se référant à certains critères bien déterminés. Parmi les choix possibles :
  • perceptive : table qui privilège les couleurs auxquelles notre perception (les yeux) est sensible ;
  • sélective : ce mode de réduction de couleurs représente le choix par défaut, il permet de conserver les couleurs web ;
  • adaptative : permet de constituer une table qui privilège les couleurs qui constituent principalement l'image (les couleurs abondantes) ;
  • restrictive : permet de créer la table standard 216 couleurs (table web sécurisée), cette option est très utile si on veut s'assurer que le navigateur n'utilise pas le tramage pour simuler d'autres couleurs. Il y'en a d'autres modes : personnalisée, Mac OS, niveaux de gris (grayscale), noir et blanc, Windows.
• le menu "couleurs" N°3 permet de préciser la profondeur de l'image, vous pouvez choisir une valeur comprise entre 2 couleurs (1bit/pixel) et 256 couleurs (8bits/pixel).
• le menu "algorithme de tramage" N° 4, le tramage permet de simuler (créer virtuellement) des couleurs absentes non disponibles dans le système d'affichage de couleurs de votre ordinateur, ça améliore la qualité de l'image mais ça nécessite davantage d'espace disque.
• le menu "Tramage" N° 5 permet de préciser l'intensité du tramage, pour qu'il soit accessible il faut tout d'abord choisir un algorithme de tramage.

• la case à cocher N°6 permet d'appliquer un effet de transparence à tous les pixels qui sont représentés par le motif suivant
  A noter que chaque pixel transparent est représenté par deux carrés blancs et gris par exemple cette image est composée de 5 pixels transparents, et elle a une résolution de 1 x 5.

  Lorsqu'une image est affichée par un navigateur tous les pixels transparents vont laisser apparaître les motifs d'arrière-plan.
  Si la case transparence n'est pas cochée, les pixels transparents vont se faire mélanger avec une autre couleur qui est le blanc par défaut. Cette couleur peut être modifiée grâce au menu "Détourage".

  A noter que la transparence nécessite davantage d'espace mémoire. En plus les formats PNG-8 et GIF peuvent exprimer uniquement une transparence binaire (deux niveaux : opaque/transparent).

• le menu N°7 "Tramage de transparence" : permet d'appliquer un algorithme de tramage aux pixels partiellement transparents.
  Un pixel partiellement transparent est un pixel dont l'opacité n'a ni la valeur 0% (transparent) ni la valeur 100% (opaque). Le réglage de l'opacité peut être effectué grâce à la fenêtre "Calques" (Layers en anglais) qui peut être activée dans le menu "Fenêtre" ou tout simplement en utilisant le raccourci "F7" :

  Par défaut en PNG-8 et GIF les pixels partiellement transparents vont être mélangés avec une couleur (le blanc par défaut) qui peut être spécifiée dans le menu détourage. Par exemple un pixel partiellement transparent qui a une couleur rouge RGB(255,0,0), une opacité de 40% (canal alpha = 102) et qui a été mélangé avec la couleur blanche sera totalement opaque (canal alpha = 255) et il va avoir une couleur rouge moins prononcée RGB(255,153,153), mais s'il a été mélangé avec la couleur noire il sera totalement opaque et va avoir une couleur rouge qui est proche du noir RGB(102,20,20). C'était le comportement des deux formats PNG-8 et GIF vis-à-vis d'une transparence partielle, qui ne peut pas être supportée au même titre que le PNG-24.

  Le menu Tramage de transparence permet de transformer certains pixels partiellement transparents en des pixels totalement transparents, en suivant un certain algorithme pour avoir en fin du compte une image qui affiche plus ou moins le contenu, et qui permet relativement de laisser apparaître le contenu placé en-dessous de l'image grâce aux pixels qui ont été rendus totalement transparents.
  A noter que ce menu n'est accessible que si vous avez coché la case "transparence".

• le menu "Aligner sur le web" permet de spécifier la tolérance selon laquelle une couleur web non sécurisée peut être convertie en une couleur faisant partie de la palette web sécurisée. Plus cette valeur est importante plus le nombre de couleurs glissées vers la palette web est grand. Vous pouvez aussi le stipuler autrement en choisissant le mode "Restrictive Web" dans le menu "Algorithme de réduction des couleurs", dans ce cas toutes les couleurs Web non sécurisées vont être converties en leurs proches équivalents dans la palette Web, ça correspond à un degré de tolérance de 100% dans le menu "Aligner sur le Web".

  Une couleur Web non sécurisée risque d'entraîner un rendu visuel incorrect et différent des attentes du concepteur de l'image dans un système configuré pour un affichage en 8 bits (256 couleurs), mais vu que la plupart des écrans d'aujourd'hui qui équipent nos ordinateurs ont franchit largement la barrière des 256 couleurs, se soucier de la compatibilité des couleurs avec la palette Web sécurisée n'a plus l'air d'être un impératif.

GIF

Le menu N°1 permet de comprimer l'image (compresser) en procédant à une suppression de détails plus ou moins sensible en fonction du pourcentage choisi. Pour ne pas dégrader tangiblement l'image appliquez un taux de 5 à 10%.

Pour que le menu "Perte" soit accessible vous devez éviter de cocher la case "entrelacé" ainsi que de choisir les deux options bruit et motif dans le menu "algorithme de tramage". Dans notre exemple le menu "perte" est désactivé car la case "entrelacé" est cochée.

Optimiser une image PNG-24 pour le web sous Photoshop

Contrairement à tous les autres formats d'images supportés par le Web, le PNG-24 se distingue largement par son support d'une transparence graduelle (transparence graduelle à 256 niveaux du PNG-24). En fait le canal alpha peut recevoir des valeurs qui varient dans la fourchette de 0 à 255 selon la valeur de l'opacité spécifiée dans Photoshop.

Comme vous pouvez le constater le PNG-24 supporte aussi l'entrelacement.
Si vous n'avez pas coché la case "Transparence" vous pouvez spécifier la couleur avec laquelle vous pouvez mélanger les pixels transparents.

Le chapitre que vous attendez tous impatiemment : la syntaxe XHTML des images.