Disons que je mentionne les énoncés suivants :
- Une image d’un magnifique paysage avec les rocheuses Canadiennes en fond sous le format GIF
- Ce magnifique logo en format JPEG.
- La numérisation en haute résolution d’un document couleur sous le format PNG
Quelque chose cloche, n’est-ce pas?
J’ai volontairement mis en contradiction le format d’image avec son scénario le moins favorable. Ce n’est pas tous les scénarios qui cadrent avec les structures de données et algorithmes associés à un format d’image.
Un format d’image. Est-ce que ça s’impose? Sur le web, existe-t-il des contextes dans lesquels il faut restreindre l’utilisation d’un format d’image spécifique?
La réponse est non.
Aviez-vous déjà vu cette illustration? Je la trouve excessivement à propos. Elle met surtout en évidence les limitations d’une utilisation excessive de la compression JPEG.
Une structure de données
Une image est, avant tout, la représentation d’une série d’octets alignés ensemble pour former un ensemble visuel. Pour comprendre où je m’en vais avec ça, le plus simple format est le Bitmap. Les choses se compliquent à mesure que le format du fichier est raffiné.
Par exemple, la structure du JPEG est divisée en onze sections avec un but particulier. Celle du PNG est tout aussi complexe, et permet à l’utilisateur d’inclure de la transparence dans ses images. L’explication technique du GIF est très « binaire » si vous voyez ce que je veux dire.
Ce que cela veut dire, c’est qu’il faut être conscient des avantages et des inconvénients des outils à votre disposition. La comparaison avec un coffre à outils s’applique très bien ici. Il faut savoir dans quel contexte utiliser ses outils. Ce n’est pas un one size fits for all.
Le JPEG est un format standard où la compression se fait avec un processus avec pertes. C’est-à-dire que la compression va se faire au détriment de la qualité visuelle de l’image. Dans des paramètres raisonnables, la perte se fera avec un impact visuel à peine discernable à l’œil. À des niveaux plus élevés, ça aura l’air de l’illustration ci-haut.
Un PNG est un format conçu pour le web. Contrairement au JPEG, le PNG est un format sans pertes. L’image sous le format PNG ne sera soumise à aucune compression ou réduction de qualité. Le principal avantage du PNG est la transparence et la translucidité. Cet avantage vient aussi avec son inconvénient. En règle générale, le PNG sera plus volumineux que son équivalent JPEG.
Une question de contexte
Dans la vie, tout s’optimise. Il faut d’abord savoir ce que l’on veut optimiser. Généralement, avec les images, il est question de l’espace disque. Cependant, il pourrait être question de la qualité des images ou même du processus de gestion de ces images.
Un bon exemple est la page d’accueil du site Gaz Métro. Les bannières dans le haut sont sous le format JPEG. Malgré sa résolution de 1920×747, la bannière des panneaux solaires fait 876 kilo-octets. En plus de présenter un joli panorama de Montréal.
En revanche, les icônes représentant les secteurs d’affaires de l’entreprise (résidentiel, affaires, etc.) sont sous le format GIF. Les images sont de petite taille et ont une palette de couleur assez mince. Elles ont tous les attributs pour ce format de fichier.
Dans ce cas, le PNG aurait pu aussi bien faire l’affaire. À l’exception de la transparence, les images ont ce qu’il faut pour être sous ce format de fichier. Cependant, mes tests ont révélé que le gain est assez marginal pour le passage vers de GIF vers PNG.
Faustregel
Le plus grand des dangers, dans le monde des technologies de l’information, est la tentation de sombrer dans la micro-optimisation. Cela s’applique particulièrement à la gestion des images sur le web. Lancez le débat dans votre équipe et vous aurez probablement des opinions divergentes.
Des opinions divergentes comme :
- Prioriser l’économie d’espace disque
- Éviter la création d’artéfacts de compression JPEG
- Les images doivent avoir un fond transparent pour bien s’agencer avec le look du site web
- Le site doit se charger le plus rapidement possible. Au diable la beauté des images
Vous en aurez pour des heures de plaisir. Soyez gentil et apportez des Tylenol à votre gestionnaire.
Pour faire simple, vous pouvez vous en garde à des règles assez simple. Que voici :
- Chaque format a son utilité.
- JPG: permets la compression d’images riche en couleurs
- PNG : à utiliser lorsque vous désirez avoir de la transparence et avec des images avec des images simples. Le logo de Google est un bon exemple de cela.
- GIF: permets d’animer ce qui est normalement statique. Si vous voulez faire un vidéo, tournez-vous vers YouTube.
Comme tout, utilisez votre jugement!
French Coding 
