Tutoriel : L’optimisation des images pour le web

Malgré le développement continue de haut débit, les internautes équipés d’un modem classique 56k sont encore nombreux. Il demeure donc essentiel de continuer à optimiser ses images afin de réduire au maximum le temps de téléchargement sans dénaturer la qualité de l’image. Voici quelques conseils pratiques pour webmasters débutants et avertis.

L’internaute est par définition un utilisateur exigeant et impatient. Exigeant, car il recherche et apprécie de plus en plus les sites bien présentés. Impatient, car il ne supporte pas d’attendre le chargement d’une page. Au bout de 10 secondes, l’internaute retourne à la page précédente ou pire, quitte le site. Il faut donc savoir optimiser le design de son site pour que l’internaute ait envie de patienter et soit agréablement surpris de la qualité.

Optimisation et architecture de la page
L’optimisation des images concerne en réalité l’image en tant que telle et la structure de la page. En effet, une image utilisée sur deux pages différentes sera dans la réalité, télécharger une seule fois.
De plus, certaines graphismes combinent parfois des aplats de couleurs à des images. Si on sélectionne un aplat parmi la palette de 256 couleurs standardisées web, on peut très bien supprimer cette partie dans l’image pour la remplacer dans le code de la page.

Enfin, pour éviter des temps de téléchargement, il est conseillé de placer dans la page des vignettes des images (réduction de l’intégralité ou sélection d’une partie plus précise) et d’ajouter un lien vers un pop-up pour voir l’image en plus grand.

Première étape : la maquette
Premièrement, il est important de prendre l’habitude de commencer un site par une maquette sous Photoshop ou Fireworks. Cette dernière permet de clairement distinguer ce qui va être sous la forme texte, dans le code HTML (CSS, couleurs d’arrière-plan, …) et ce qui sera réellement du domaine de l’image.
On pourra également définir si des images ne peuvent pas être répétées en arrière-plan. Par exemple, une bande de 3 couleurs de 250 pixels de long peut être remplacée par une bande de 3 couleurs de 5 pixels de long en arrière-plan de cellule que l’on fait répéter sur tout le bloc.

La maquette sert également à vérifier l’apparence globale d’une page. L’usage des calques sous Photoshop et Fireworks est très pratique pour élaborer les déclinaisons des pages intérieures d’un site. Ce petit exercice aide à sélectionner les éléments visuels réutilisables dans l’intégralité ou une partie du site. Cela vous assurera également une cohérence graphique.

Il est important de faire la maquette à la même échelle que votre page. pour que vous puissiez tailler vos images au pixel près. On ne réduit pas une image dans Dreamweaver, car le poids ne sera pas réduit. Il faut donc bien organisé son schéma pour connaître exactement la longueur et la largeur de l’image. Dans le cadre d’une création totale, il est préférable de limiter le nombre de couleurs. Moins il y a de couleurs, plus le poids est léger. De plus, les formes rectangulaires sont plus légères car elles demandent moins de pixels de différentes couleurs. Vous pouvez retoucher vos formes carrées de façon à réduire le nombre de couleurs en retouchant les pixels un à un (Cf. pixel art).

Optimisation dans Photoshop
Pour enregistrer une image dans Photoshop, on a deux possibilités : « enregistrer sous » et « enregistrer pour le web ». Cette dernière fonction ouvre une nouvelle fenêtre découpée en deux par défaut. On peut la découper en 4, si l’on veut. Elle va donc présenter le document d’origine avec son poids (bas de l’image) et une version optimisée. Dans le bloc d’options de droite, on va pouvoir jouer entre les différents formats (*.gif, *.jpg, *.png,…) et les options de chacun d’eux. On peut ainsi choisir le format et les options les plus intéressants pour optimiser notre image (le poids le moins élevé et le rendu le plus proche de l’original).
Pour les images en *.gif, il ne faut pas hésiter à réduire le nombre de couleurs, car souvent on obtient un très bon résultat avec 4 couleurs. De préférence, il vaut mieux régler les réglages des images *.gif sur « sélective » car elle va ainsi se baser sur la palette couleurs de l’image en question et non sur une palette lambda.
Pour rappel, le format *.png est destiné à remplacer le format *.gif. Seulement, il n’est pas encore reconnu par tous les navigateurs. Il n’est donc pas forcément encore bon de l’utiliser pour un site internet. Par contre, il peut-être très intéressant pour un intranet où le parc informatique est connu.
A noter : Si l’image était au départ en 300 dpi (haute résolution), elle passe automatiquement à 72 dpi avec la fonction « enregistrer pour le web ». Il n’est donc pas nécessaire de réduire la taille de l’image au préalable.

Organisation des images en tableaux
De plus en plus, on découpe les images en tableaux grâce à l’outil cutter de Photoshop. Pourquoi découper les images ?

• A°/ Parce que des petites images se téléchargent plus vite qu’une grosse. De plus, les internautes sont plus patients quand la page se composent devant eux que quand ils doivent attendre plusieurs secondes devant une page blanche.
• B°/ On peut également changer qu’une partie de l’image à chaque page sans rajouter de temps de téléchargement. Mieux vaut télécharger qu’une partie de l’image que toute l’image.

C°/ Avec les tableaux, on peut définir des zones de l’image comme « arrière-plan » ou « sans images » ou avec des animations. On a donc une plus grande liberté de manœuvre.

Comment créer des images en tableaux

• 1°/ Il faut découper votre image de façon logique avec les repères de Photoshop. Pour rappel, les repères se prennent dans les règles de Photoshop. Un clic droit sur la règle, gardez le clic appuyé et une ligne bleue se déplace avec votre souris.
• 2°/ Prenez l’outil cutter et découpez chacune des cellules. Si vous souhaitez faire des rollovers sur certaines vignettes, il est conseillé de passer dans Imageready (menu « fichier »)
• 3°/ Enregistrer pour le web . Le nom du fichier sera en fait le nom d’une page HTML qui va comporter tout le code du tableau. Automatiquement, Photoshop créé un dossier « images » à côté de la page. Attention à bien ranger votre page HTML dans le bon dossier.
• 4°/ Vous n’avez plus qu’à ouvrir votre page sous Dreamweaver. De là, vous allez pouvoir coller le tableau de votre image dans une nouvelle page (copier-coller). Astuce : Sélectionner dans le code, uniquement la balise.