Les images du site web suscitent beaucoup de discussions, et pour cause : selon les Archives HTTP, 61 % du poids de la page d’un site Web sur un ordinateur de bureau est des images, et ce pourcentage passe à 65 % sur les appareils mobiles. Et pour couronner le tout, le nombre d’octets d’image a augmenté de plus de 30 pour cent sur la page Web moyenne année après année que les images deviennent de plus en plus grand.
Peu de progrès ont été réalisés dans le support des formats d’images depuis la mise sur le marché des formats STANDARD JPEG, GIF et PNG il y a plus de 15 ans. La raison en est simple : il est difficile de soutenir de nouveaux formats d’images sur différents types de navigateur. Cependant, deux nouveaux formats d’images sont venus sur la scène au cours des dernières années et ont récemment commencé à gagner en traction comme un moyen d’optimiser les images: WebP (mis en avant par Google) et JPEG XR (soutenu par Microsoft).
WebP vs JPEG XR
Les deux s’appuient sur les progrès technologiques importants des 15 dernières années et chacun a ses forces uniques. Chaque format prend en charge la compression sans perte et la perte et la transparence totale, et JPEG XR prend en charge le rendu progressif des images. Les sites Web qui utilisent ces nouveaux formats voient des résultats significatifs, économisant souvent 25 pour cent à 50 pour cent des octets par rapport à un JPEG de qualité similaire.
Le plus grand inconvénient pour les deux — et l’adoption récente en chef est un peu ralentie — est la prise en charge du navigateur : WebP, par exemple, n’est pris en charge que dans Chrome, Opera et certains appareils Android plus récents. JPEG XR est entièrement pris en charge dans IE 10+, avec un support limité dans IE 9. Ni l’un ni l’autre n’a de soutien pour Firefox et Safari. Pour de nombreux utilisateurs n’utilisant pas ces navigateurs, les images d’un site Web semblent brisées.
Facebook prend en charge WebP
Le seul grand test public de ces nouveaux formats est venu avec la mise en œuvre de Facebook webp au printemps dernier. Facebook a été en mesure de fournir des images aux utilisateurs avec des navigateurs webp pris en charge, mais des problèmes se sont posés lorsque les utilisateurs ont essayé d’actionner les photos en les sauvant, en les éditant ou en les partageant. Un utilisateur frustré a demandé : « Comment désactiver ce monstre ? »
Conseils pour la mise en œuvre du format d’image
Les sites Web peuvent bénéficier de manière significative de ces nouvelles technologies d’optimisation de l’image, mais doivent garder quelques choses à l’esprit lorsque vous allez dans cette direction:
- Comprendre comment les gens vont utiliser les images du site. Dans le cas de Facebook, l’utilisateur n’a manifestement pas été pris en considération parce que le téléchargement, l’enregistrement, l’édition et le partage de photos sont des activités entreprises par un pourcentage important de l’audience facebook.
- La normalisation de la qualité est importante. Les différences dans les paramètres de qualité doivent être prises en compte lors de l’utilisation de plusieurs formats lossy. Le choix de paramètres de qualité qui produisent une dégradation de la qualité perçue similaire peut être accompli à l’aide d’un algorithme comme SSIM (similitude structurelle).
- Utilisez WebP et JPEG XR uniquement dans les cas où il y a prise en charge du navigateur. Sans croisement dans la prise en charge du navigateur, il peut être logique pour les sites Web qui cherchent à aller dans cette direction pour prendre en charge à la fois pour une couverture maximale.
Il ya beaucoup d’avantages à utiliser ces nouveaux formats d’optimisation d’image, et lorsque les points ci-dessus sont pris en considération, les sites Web verront des performances considérablement améliorées et des économies d’au-delà. Un soutien supplémentaire du navigateur – notamment de Firefox et Safari – adoucira encore plus le pot.
