Si vous êtes souvent confronté à une problématique d'optimisation des images pour le web, et que vous travaillez avec des images transparentes (PNG), peut-être vous êtes-vous déjà demandé quelle est la différence entre le PNG8 et le PNG24.

Lorsque l'on fait "enregistrer pour le web" (ctrl+alt+maj+s, sous Photoshop), il est possible de choisir ces 2 formats pour conserver la transparence.

Sont-ils identiques ?

Non ! Vous vous doutez bien qu'on ne se serait pas amusé à créer 2 formats d'image similaires, avec 2 noms différents. En fait, le 8 et 24 indiquent la profondeur de couleurs de l'image.
Pour traduire ça plus simplement, la qualité de votre image risque d'en pâtir si elle comporte beaucoup de couleurs et que vous optez pour un PNG8.

Voici un exemple. Puisque la Saint-Valentin approche, j'ai opté pour une image composée de roses colorées. Ce visuel est simple, mais mine de rien, il comporte beaucoup de couleurs. J'ai ensuite exporté mon image en PNG8, et en PNG24. En taille réelle, la différence est minime, même si on distingue quand même une perte de qualité en PNG8.

En zoomant un peu, voici les résultats :

Image en PNG24, avec zoom.

Image en PNG8, avec zoom.

Vous constaterez que le résultat en PNG8 n'est pas propre, pour peu qu'on se donne la peine de zoomer.

Le PNG8 a-t-il quand même des avantages ?

Oui, et surtout un avantage de poids (sans mauvais jeu de mots), car une image en PNG8 sera beaucoup moins lourde qu'un PNG24.

Et par rapport à un JPEG ?

L'avantage de l'export en JPEG, c'est que vous pouvez réduire ou augmenter la qualité selon vos besoins. De 60 à 100, vous pourrez avoir une image en qualité suffisante pour le web, sans que son poids ne soit trop important.
Pour toutes les images ne comportant aucune zone alpha (transparente), je vous conseille donc de garder du JPEG et non du PNG.

Peut-on quand même optimiser ses PNG ?

Pas directement avec un logiciel comme Photoshop. Cependant, il existe un site web qui fait ça très bien : TinyPNG. Uploadez votre image, et vous gagnerez sans doute quelques ko au passage.

J'espère avoir répondu à toutes les questions que vous pourriez vous poser par rapport à l'optimisation des images pour le web, et à la différence des formats.
N'hésitez pas à donner votre avis sur cet article, et vos astuces, si vous en avez !