Il existe plusieurs logiciels permettant d'optimiser les images telles que Fireworks, Photo Impact, Debabelizer... Dans notre article nous utiliserons Image Ready qui est livré avec Photoshop.

Les formats d'image couramment utilisés sur le Web sont GIF, JPEG et PNG. Bien que le PNG possède des avantages intéressants, ce format ne sera pas abordé car il est encore mal reconnu par les navigateurs. Sachez simplement que PNG-8 est comparable au GIF et PNG-24 se rapproche plus de JPG même s'il n'offre pas des taux de compression aussi grands.

1. Présentation des zones clés de l’interface.

En haut de l'image on peut distinguer plusieurs onglets qui permettent une visualisation de l'image optimisée. Il est aussi possible de choisir une visualisation simultanée des différents réglages afin de comparer leur efficacité.

En bas de l'image, on peut choisir d'afficher des informations, telles que la taille de celle-ci optimisée ou encore le temps de téléchargement avec différents types de connexion internet.

La barre d'outils classique qui nous permettra de choisir les couleurs.

Le menu d'enregistrement pour le Web pour créer l'image optimisée après avoir fait tous les réglages.

2. La compression JPEG

Le JPG élimine des données peu perceptibles à l'oeil en découpant l'image en zones. La compression dégrade l'image en fonction du taux que l'on désire. Si le taux de compression est trop grand on peut voir apparaître des blocks nuisant aux détails et aux contours des formes sur l'image. Ce format restitue assez bien les couleurs.

Les paramètres :

Qualité :

Il est possible de modifier la qualité soit par le menu déroulant textuel (Bas, Moyen, Haut, Maximal.), soit par celui chiffré (De 0% à 100%) qui permet un réglage plus précis.

Flou :

Le flou est réglable de 0 à 2, il permet d’atténuer les blocks quand la qualité est basse. En outre, plus le flou est grand, plus le poids de l'image optimisée est petit.

Optimisation

Quand la croix est cochée, on gagne quelques octets mais l'image produite ne sera pas compatible avec des logiciels anciens.

Progressif

Le format progressif, quand il est sélectionné, permet d’afficher l'image comme une série de couches. Cela permet de faire patienter le visiteur mais alourdit un peu le fichier dans la plupart des cas. (Intéressant pour les grosses images)

3. La compression GIF

Le GIF fonctionne uniquement en mode 8 bits, Cela veut dire qu'on peut avoir au maximum 28 couleurs, soit 256. Il faut donc définir une palette d'au plus 256 couleurs indexées permettant une fidélité maximum par rapport à notre image source. De plus GIF permet de créer des animations en enregistrant une succession d'images.

Les paramètres :

La réduction du nombre de couleurs permet de réduire le poids des images. Moins il y a de couleurs, plus l'image sera dégradée. Image Ready propose une palette de couleurs se rapprochant le plus des couleurs d'origine de votre image, mais il est possible de personnaliser la palette de couleurs.

Pour modifier les couleurs, il suffit de cliquer sur la couleur dans la palette et de la modifier dans la barre d'outils.

Il y a de plus 5 petits boutons :

Rend transparent la couleur sélectionnée.
Choisit la couleur Web standard la plus proche de celle sélectionnée.
Verrouille la couleur sélectionnée. Les algorithmes de réduction automatique conserveront les couleurs verrouillées.
Ajoute une nouvelle couleur (celle actuellement présente dans la barre d'outils).
Supprime la couleur sélectionnée.

Il faut tout de même savoir que l'algorithme d'Image Ready est très bon et qu'il n'est pas souvent utile de modifier soi-même les couleurs.

Pour avoir une optimisation la meilleure possible, réduisez progressivement le nombre de couleurs à l'aide du menu déroulant jusqu'à atteindre un niveau présentant le meilleur rapport couleurs/poids.

Tramage :

Quand on réduit de façon importante les couleurs d'une image, on voit souvent apparaître des problèmes d'isohélie (transitions entre les plages de couleurs trop accentuées). Pour atténuer cet effet, on peut utiliser une méthode de tramage qui consiste à juxtaposer des pixels de couleurs différentes pour simuler une couleur intermédiaire.

Il existe 3 modes de tramage différents :

Diffusion : Crée des motifs de points diffus. Il est possible de régler le taux de tramage de 0 à 100%. Plus le taux de tramage est grand moins la compression est forte.

Motif : Crée une trame plus structurée, avec peu de couleurs cette méthode n'a pas un très bon rendu.

Bruit : Similaire à la méthode de Diffusion, mais sans diffuser le motif sur les pixels adjacents. Le rendu est meilleur que Motif mais le poids de l'image plus important.

Quand on n'effectue pas de tramage, ou que l'on utilise le tramage par diffusion, il est possible de régler un niveau de perte de qualité (0 & 100). Celui-ci permet dans certains cas de gagner encore quelques octets.

4. Exemple :

JPEG.

qualité 100 Flou 0 27,6 Ko	qualité 30 Flou 0 4,23 Ko
qualité 0 Flou 0 1,96 Ko	qualité 0 Flou 2 1,23 Ko

GIF 32 couleurs.

Sans Tramage 6,77 Ko	Diffusion Tramage 100 % 8,29 Ko
Motif 8,8 Ko	Bruit 9,11 Ko

GIF 8 couleurs.

Sans Tramage 2,72 Ko	Diffusion Tramage 100 % 4,31 Ko
Motif 4,25 Ko	Bruit 4,71 Ko

Dans cet exemple on voit que le format à choisir est JPEG avec une qualité de 30.
Le GIF quant à lui, donne une qualité à peu près équivalente (32 couleurs, Diffusion) mais était deux fois plus lourd. J'ai aussi fait le test en GIF 8 couleurs pour mettre en évidence les différences entre modes de tramage possibles. En effet elles ne sont pas toujours évidentes à voir sur les images avec plus de couleurs.

Vous l'aurez compris, la compression d'images n'est pas chose aisée, et encore moins généralisable. Pour chaque image on peut trouver le format et les paramètres qui réduisent au mieux le poids tout en conservant un niveau de qualité acceptable.

Il y a quand même quelques critères permettant de choisir le format optimum.

Pour des petites images de moins de 100 pixels de coté, utilisez le GIF. (Pour des miniatures de photos, JPEG est souvent meilleur car on ne désire pas une bonne qualité)

Pour des images avec peu de couleurs et des limites franches, utilisez GIF.

Pour des images de taille supérieure à 100 pixels de coté et plutôt riches en couleurs (photos …), utilisez JPEG

Un dernier conseil, gardez toujours une copie de vos images non optimisées. Ca peut toujours servir.

Ido designer officiel de Cybersexe.biz pour AdultBizVoice.