Optimisation des images pour le WWW

1. Définition en Pixel/pouce

2. Les formats d'image

3. Ouvrir une image avec PhotoShop 5.5

4. Optimiser l'image

5. Redimensionner une image

6. Optimiser un format JPEG

7. Optimiser un format GIF

Les images insérées dans une page WWW doivent toujours être conçues spécialement pour un usage WWW. Il faut avoir présent à l'esprit que l'image sera transportée à travers les réseaux qui forment l'Internet. La vitesse de transmission est limitée par le plus petit maillon de la chaîne, qui est le plus souvent le Modem de connexion au "Provider" (28.8K en moyenne). 

La définition d'une image WWW doit être de 72 pixel/pouce. Cette définition est insuffisante pour que l'image soit imprimée correctement. En impression il faut compter au moins 200 à 300 Pixel/Pouce. Mais ces images ont une taille souvent dissuasive (plusieurs méga) pour être téléchargée en un temps acceptable.

Les formats d'image
Le PNG ne s'est jamais imposé malgré sa création pour le WWW. Les fichiers sont trop volumineux.

Le JPEG est utilisé pour

• Les photographies

• Images au rendu réaliste

• Image contenant de nombreuses couleurs (un million)

• Image contenant énormément de détails

• Image de grande dimension

• Il permet plusieurs valeurs de compression

Le GIF est utilisé pour

• Image comprenant des zones transparentes

• Image contenant un nombre limité de couleurs (256)

• Image noire et blanc

• De petite image comme les boutons d'un site

• Image contenant du texte

• Image Animée

Vous avez une image Gif, Jpeg ou Bmp et vous voulez l'optimiser pour l'insérer dans une page avec FrontPage. 

Ouvrez ¨PhotoShop 5.5 Puis Fichier/Ouvrir et sélectionnez le fichier Image correspondant. Votre Image apparaît à l'écran

Sélectionnez Fichier/Enregistrer pour le WWW, une nouvelle fenêtre se créer. Cette fonction n'est disponible que qu'à partir de PhotoShop 5.5 et pas avant !!!

L'avantage de cette fonction "Enregistrer pour le WWW" c'est qu'elle permet de voir directement à l'écran le rapport entre la taille du fichier et la dégradation apportée par la compression. Maintenant à vous de choisir ! 

1. Choisissez l'onglet 4 vignettes. Cela vous permet d'apprécier 3 images paramétrées différemment par rapport à l'original. 

2. En cliquant à droite sur l'une des 4 vignettes, un menu contextuel vous permettra de choisir la vitesse du Modem (pour calculer la vitesse de téléchargement), la taille du zoom de l'image (pour avoir une idée correcte de l'image).

3. Sélectionnez une vignette en cliquant dessus. Un cadre noir entourera la vignette. Dans l'exemple c'est la vignette en bas à droite qui est sélectionnée.

4. Vous pouvez choisir le format de l'image ; Jpeg ; Gif ; PNG ; pour trouver le meilleur compromis Poids du fichier/Définition.

5. Redimensionnez la taille de l'image en fonction de votre page WWW. Il convient de définir à l'avance la taille des images que vous mettrez dans une page WWW. Plus l'image est de petite taille, plus elle est légère à télécharger. N'utilisez jamais la possibilité offerte par FrontPage de redimensionner l'image. Car la taille du fichier ne change pas.

Optimiser un format JPEG

Le format JPEG est conseillé pour son rapport Qualité/ Taille du fichier pour les images contenant beaucoup de couleurs. Vous devrez ajuster la Qualité pour avoir, suivant l'effet voulu, la meilleure image en fonction de la taille. Faite varier la Qualité par paquet de 10. Utilisez le curseur au lieu de taper les chiffres sinon PhotoShop ne recalcule l'image après un changement. Il faut dans ce cas cliquer sur le gris pour qu'il recalcule l'image.

Optimiser un format GIF

Les images contenant peu de couleurs sont adaptées au format GIF. Vous devez sélectionner un GIF adaptatif pour le WWW puis pour diminuer la taille du fichier vous pouvez jouer sur le nombre de couleur. Dans l'exemple ci-dessus en passant de 256 couleurs à 8 couleurs le fichier GIF passe de 26.27Ko à 9.8Ko et donc de 10 secondes à 4 secondes sur un Modem 28.8K, ce qui est très appréciable.

Si votre page WWW contient plusieurs images et qu'elle est faite pour l'Internet, chassé les kilos en trop et ajusté au mieux le compromis Taille de l'image/Définition de l'image/Poids du fichier.