On se propose ici de publier une image pour le web. Les principes et exemples évoqués ici peuvent être appliqués pour un produit cédérom, à la légère différence de moindre contrainte concernant les poids de fichier.

Comme nous l'avons vu précédemment, il faut tenir compte de la taille des écrans et des limites de la bande passante. Il faut donc réduire la taille du fichier pour réaliser une imagette (exemple de 150x200 pixels), puis une image "plein écran" de 800x600, enfin une image en haute définition avec possibilité de zoom (choix de format PDF, exportable directement depuis Photoshop).

Dans la pratique, on partira d'un fichier brut de grande taille pour réaliser l'image la plus grande (export PDF), pour en suite réaliser le plein écran et enfin l'imagette.

 

1. Exportation PDF.

D'abord mettre l'image d'origine au format désiré, ici 1500x1000. Non compressé, ce fichier pèse environ 5 Mo.
Pour enregistrer au format PDF, faire Fichier >Enregistrer sous > choisir le format Photoshop PDF. Deux options s'offrent à vous codage ZIP ou JPEG :

Le codage JPEG est similaire à la compression du format JPEG : compression élevée, pertes qualitatives, réglage du taux de compression (échelle de 1 à 10).
Le codage ZIP, proche de celui utilisé par le format GIF, est surtout efficace pour compresser des dessins ou des à-plats de couleur. On se retrouve ici face au même type de choix qu'entre JPEG (images photographiques) ou GIF (dessins et à-plats de couleur), à la différence qu'on peut utiliser le codage ZIP sur une image en 24 bits par couleurs.

L'exemple choisi ici pèse 124 ko en codage JPEG (qualité 3, donc une compression assez forte) et plus de 3 Mo en codage ZIP.
(voir l'image PDF compressée JPEG, utilisez la loupe et la main pour agrandir et vous déplacer dans l'image)

 

2. Création d'une image plein écran

On choisit ici une taille d'écran de destination de 800x600 pixels. L'image devra être légèrement plus petite pour tenir compte du fenêtrage du navigateur (barres de défilement, etc.). On optera pour une taille de 750 x 550 pixels.
D'abord, mettre l'image à la taille désirée, en précisant une résolution de 72 dpi Le fichier non compressé ne pèse plus que 1,5 Mo environ.
Après réduction de la taille, observez l'image (à 100 %, par double click sur la l'outil loupe) et constatez une légère perte de netteté qui est due à la forte réduction de la taille. Appliquez un filtre "Plus net" ou une accentuation légère pour améliorer la visualisation de l'image à l'écran.
Remarque importante : ne pas abuser du sharpen car la compression de l'image finale sera alors moins efficace (car l'image est alors plus complexe et plus difficileà analyser) et donnera un fichier plus lourd. Il faut trouver un compromis selon l'image entre une "belle" visualisation et une bonne optimisation du poids de fichier. Dans l'exemple suivant, l'application du filtre plus net, à taux de compression égal, donne un fichier JPEG 25 % plus lourd.

image réduite légèrement floue	image finale avec filtre plus net

Enregistrement au format JPEG :
Deux méthodes sont possibles : utiliser "Fichier>Enregistrer sous>JPEG" avec fenêtre d'options d'enregistrement.
Nous utiliserons plutôt la fenêtre "Enregistrer pour le web" de Photoshop pour comparer différent taux de compressions en JPEG.
>> cliquer ici pour voir la copie d'écran

Les images ont été affichées à 200% pour lieux faire apparaître les pertes provoquées par la compression JPEG. Quatre vignettes comparatives ont affichées : l'original en haut à gauche, et trois options différentes de compression à ses côtés, en faisant varier la qualité : 60, 30 et 5, d'une qualité élevéeà la plus faible. Le poids de l'image varie alors de 119 à 31 ko. Constatez les dégradations de l'image et choisissez le taux approprié, donnant un bon compromis entre qualité et poids de fichier. Testez également d'autres taux de compression pour affiner les réglages. A la fin, sélectionnez en cliquant dessus la vignette vous paraissant correcte, puis cliquez sur "OK", une fenêtre d'enregistrement de fichier apparaît pour exporter l'image dans le répertoire que vous choisirez.
>> cliquer ici pour voir l'image optimisée (JPEG qualité 40, 66 ko)

 

3. Création d'une vignette de petite taille.

Cette image dans une page HTML pourra servir d'illustration à un texte et/ou pointer vers une fichier de grande taille (JPEG plein écran ou PDF haute définition), permettant d'effectuer une prévisualisation de l'image.
On repartira de l'image d'origine pour la réduire à la taille désirée, par exemple 100x150 pixels.
Après réduction, l'effet de perte de netteté est encore plus fort que lors de l'exercice précédent. Là aussi il faut améliorer l'image par un ajout de sharpen (plus net, contours plus nets ou accentuation suivant le type d'image), qui peut être assez élevé.

Dans certains cas, il pourra être intéressant d'ajuster la luminosité et le contraste de la vignette pour améliorer encore son impact visuel, surtout pour les images très petites ou icônes (inférieures à 50 pixels de côté)

image réduite optimisation JPEG (4 ko)	Correction avec sharpen et luminosité contraste optimisation JPEG identique (6 ko)

Choix du format lors de l'optimisation :
Après ouverture de la fenêtre d'enregistrement pour le web, paramètrer les 3 vignettes avec trois formats de fichier différents, Jpeg, Gif et PNG.
'(voir copie d'écran)
On constate qu'à une petite taille d'image originelle, les différences entre les poids de fichier sont très faibles, de l'ordre de quelques kilo-octets. Ici, le Jpeg n'apporte pas le même avantage en compression. En optimisant au mieux les options Gif (choix de la palette et du nombre de couleurs) on obtient un poids de fichier équivalent au Jpeg, avec une qualité équivalente, sinon meilleure.
La règle générale est la suivante : pour des vignettes ou des icônes, il vaut mieux privilégier le Gif, car à poids égal, il s'ouvrira plus vite à l'affichage, car la décompression Jpeg est un processus complexe, sollicitant plus la machine.

 

4. Cas des images transparentes

Le format GIF, ainsi que le PNG, supportent la notion de transparence. La transparence vous permet de placer un objet non rectangulaire sur le fond d’une page Web. La transparence d’arrière-plan permet de fondre les pixels transparents avec l’arrière-plan de la page Web dans un navigateur.
Le cache d’arrière-plan, qui est pris en charge par les formats GIF, PNG et JPEG, simule la transparence en remplissant ou en fusionnant les pixels transparents avec une couleur de cache qui correspond à l’arrière-plan de la page Web sur laquelle l’image sera placée. Cette opération ne fonctionne que si l’arrière-plan de la page Web est uni et si vous connaissez sa couleur pour pouvoir choisir la même.
Ce cache (détourage dans la fenêtre "enregistrer pour le web de Photoshop") nous permettra d'exporter une image Jpeg en lui donnant un effet de transparence sur le fond de la page html, l’image d’origine devant contenir des pixels transparents pour qu’il soit possible de créer une transparence ou un cache d’arrière-plan dans l’image optimisée.

Dans la copie d'écran ci-dessous (cliquer dessus pour agrandir) la vignette en haut à gauche en Gif préserve la transparence du fond. En bas, on a choisi deux Jpeg, l'un standard, remplace les pixels transparents par du blanc, celui de droite a un détourage (ou cache d'arrière plan) jaune clair.
Dans chaque cas, cliquer dans photoshop sur le bouton "e" en bas pour visualiser le résultat dans une page web et comparez. La prévisualisation créera le fond de la couleur de cache dans la navigateur.

En général, Gif est utilisé pour réaliser des images à fond transparent. Dans certains cas le jpeg utilisé avec un cache d'arrière plan pourra être utile pour détourer des objets en millions de couleurs, ou des images de grande taille, en gardant la compression élevée du Jpeg . Voir l'exemple ci-dessous, image Jpeg détourée ( 9ko, cache ou détourage avec la couleur de fond de page, ici en hexadécimal #FFFFE6 )

Comparez avec la même reproduction plus haut, où le livre se découpe sur fond blanc.

Ces quelques exemples sont donnés à titre indicatif, pour permettre d'expérimenter rapidement les principes théoriques évoqués dans les pages précédentes du chapitre. Il est évident que l'optimisation d'image pour le web pourrait constituer un cours spécifique et un épais dossier à lui seul afin de pouvoir expliquer en détail toutes les possibilités et les affinements d'une exportation en GIF et la personnalisation des tables de couleurs notamment.
Un autre cours serait lui aussi nécessaire pour la création de graphiques, logos, textes en mode image, images Map, tranches, images découpées et réactives, Gif animés et leurs optimisations dans Image Ready, qui serait plus spécifiquement destiné aux webmasters.