Les moteurs de recherche accordent désormais une grande importance à la performance Web. La vitesse à laquelle s'affiche votre site est devenu un point considéré pour son positionnement. En effet, un site lent où le chargement est trop long obtiendra des pénalités supplémentaires. C'est la raison pour laquelle les intégrateurs Web doivent aujourd'hui prendre en compte ces critères: c'est l'optimisation dite “Front-End”; elle concerne tous les fichiers téléchargés par vos visiteurs (document HTML, feuille de style CSS, JavaScript, etc.).
Parmi ces fichiers, il y'a les images au format PNG et JPG, qui occupent souvent l'espace le plus élevé. La réduction du poids de ces fichiers dépend de quelques facteurs basiques et d'autres purement techniques, qui sont assurés par des outils automatisés, sans que cela ne nécessite de l'intégrateur des notions avancées dans ces formats. Les facteurs basiques qui influent sur le poids de l'image sont:
– La définition, qui est annoncée via les attributs width et height dans le HTML. Les valeurs annoncées doivent correspondre aux valeurs vraies: l'intégrateur devrait éviter de réduire les valeurs dans HTML en pensant également réduire le poids du fichier. Il vaut mieux dimensionner l'image en réduisant physiquement la définition, puis la ré-enregistrer avec les nouvelles valeurs, via un éditeur d'image. Cette notion est surtout recommandable pour le format JPEG (JPG); en effet, en PNG, et selon la méthode de dimensionnement utilisée, il est possible que les couleurs de l'image soient multipliées pour conserver l'intégrité visuelle: cela provoque également une structure complexe, et une prise de poids importante de l'image.
– Le choix du format, JPEG (JPG), PNG ou GIF sont les trois formats les plus utilisés encore aujourd'hui, malgré leurs méthodes de compression particulièrement anciennes. Une règle générale vulgarisée va consister à orienter l'intégrateur de cette manière: pour les photographies, ou toutes les restitutions photo-réalistes, il vaut mieux choisir le format JPG. Pour les animations discrètes de petites définitions et disposant de peu de couleurs, c'est le format GIF. Enfin, PNG va exceller dans les dégradés, ou sur les images type “capture d'écran”, logos simples; plus généralement, il est également choisit pour sa capacité à s'insérer sur n'importe quelle arrière-plan grâce à sa transparence graduée.
Au delà de ces facteurs qui peuvent être contrôlés en amont par l'intégrateur, il existe des outils automatisés qui permettent également des réductions. Il en existe “en ligne”, qui proposent d'analyser vos images pour réduire leur poids (SmushIt, PunyPNG -qui traite également les JPEG-, et Kraken) sans effectuer de dégradations physiques de l'image: les optimisations se font par rapport à des références techniques, comme l'optimisation des tables de huffman, la suppression des chunks inutiles, etc. Toujours en ligne, les fameux TinyPNG et JPEGmini eux, proposent des réductions en réduisant la qualité des images fournies, en convertissant respectivement (pour TinyPNG) le PNG en 256 couleurs maximum, et en réduisant la “qualité” JPEG pour JPEGmini.
Ces outils qui dégradent volontairement la qualité de l'image obtiennent généralement de très bons retours, car ils permettent de réduire significativement le poids du fichier, sans toutefois provoquer des dégradations trop visibles sur la plupart des échantillons. Lorsque la qualité est acceptable, l'intégrateur peut favoriser ce choix. Ces outils en ligne ont également des équivalents hors ligne, qui sont nombreux pour PNG: AdvPNG, CryoPNG, OptiPNG, PNGCrush, PNGOptimizer, PNGOUT, PNGRewrite, pngwolf, TruePNG, pngquant et pngnq (et d'autres outils divers pour affiner encore la structure de compression). Pour JPG, les principaux sont jpegtran, jpegoptim, couplés à jpegrescan. Tous les outils cités dans cet article peuvent être trouvés facilement sur Internet, et sont tous gratuits.
Enfin, notons la disponibilité d'outils qui cumulent les techniques et méthodes des outils cités précédemment; c'est généralement eux qui obtiennent les meilleurs résultats. ImageAlpha pour Mac utilise pngquant et un outil de quantification nommé “posterizer“. Le PNG est convertit en PNG 256 couleurs avec cet outil. ImageOptim (du même auteur) permet l'optimisation sans pertes. Color Quantizer permet également la quantification en conservant le format d'origine ou la conversion en PNG 256 couleurs (Windows, ou peut être émulé sur Linux / Mac).
Les outils les plus aboutis et qui permettent les recherches les plus avancées pour la compression PNG et JPG sont les ScriptPNG et ScriptJPG. Ces deux outils gratuits permettent d'effectuer des optimisations avec ou sans pertes, et obtiennent généralement les meilleurs résultats grâce aux différentes combinaisons des outils. L'auteur propose également des méthodes et techniques pour optimiser les images PNG et JPG, et effectue des vidéos de démonstrations.
Une fois ces outils maîtrisés en production, les intégrateurs peuvent générer des images plus adaptées pour une utilisation Web: l'optimisation de la qualité par rapport au poids du fichier est un critère plus qu'appréciable pour le visiteur (qui a tendance à “scanner” le site plus qu'à zoomer sur les images) concernant la performance ressentie. Le site devient plus léger à charger, ce qui devient également un argument supplémentaire quant à son bon positionnement.