Ces formats d'image qu'on ignore, et pourquoi ils vont nous faire regretter le JPG

On a tous un peu ce réflexe pavlovien : besoin d'une image sur le web ? Hop, un JPG, ou un PNG si la transparence s'impose. C'est l'automatisme, la zone de confort. On connaît, on maîtrise, ça fonctionne. Enfin, ça fonctionnait. Parce qu'entre nous, le JPG, même optimisé à la truelle, commence sérieusement à accuser le poids des ans. Et nos utilisateurs, eux, n'ont pas la patience de nos vieilles habitudes. Ils veulent du rapide, du beau, du fluide. Et pour ça, il est temps de regarder au-delà de notre duo sacré.

Je me souviens encore de ce projet, il y a quelques années. Un site e-commerce avec des fiches produits blindées d'images haute résolution. Le client voulait absolument que ses produits « claquent ». Résultat ? Des pages qui mettaient trois plombes à charger, même sur une bonne connexion. J'avais beau compresser les JPG jusqu'à la moelle, le poids restait indécent. C'est là que j'ai commencé à creuser, à me dire qu'il devait y avoir autre chose que cette sempiternelle lutte contre les kilos superflus du JPG.

WebP, AVIF : Les nouveaux cowboys du Far West numérique

On entend parler de WebP depuis des années, mais soyons honnêtes, combien d'entre nous l'utilisent systématiquement en production ? Pas assez, à mon humble avis. Et c'est un tort monumental. Google a fait un travail de titan avec WebP. Ce format offre une compression bien supérieure au JPG pour une qualité visuelle équivalente, voire meilleure. On parle souvent de 25 à 35% de réduction de taille, parfois plus. Imaginez l'impact sur le temps de chargement de vos pages !

Mais l'histoire ne s'arrête pas là. Depuis peu, un nouveau shérif est arrivé en ville : AVIF. Basé sur le codec vidéo AV1, AVIF pousse la compression encore plus loin que WebP. On peut espérer des gains supplémentaires de 20 à 50% par rapport au WebP lui-même. C'est juste hallucinant. On parle de diviser par deux, voire par trois, la taille de vos images sans perte perceptible de qualité. Pour un développeur web, c'est le Graal, non ?

« Le temps de chargement est une monnaie. Chaque seconde perdue, c'est un utilisateur qui s'envole. »

Mais pourquoi diable on ne les utilise pas plus ?

La question est légitime. Si ces formats sont si géniaux, pourquoi le JPG règne-t-il encore en maître ? La réponse est multiple, et touche à la fois la compatibilité navigateur et, il faut le dire, une certaine inertie de notre part.

Pendant longtemps, la compatibilité navigateur a été le frein principal. WebP a mis du temps à être universellement supporté. Heureusement, c'est quasiment réglé aujourd'hui. AVIF est plus récent et sa prise en charge est encore en cours de déploiement, mais elle progresse à grands pas. C'est le moment d'anticiper !

Ensuite, il y a la chaîne de production. Nos outils de conception graphique exportent majoritairement en JPG ou PNG. Il faut souvent passer par une étape de conversion supplémentaire, ce qui peut paraître fastidieux. Mais avec les bons outils et un workflow bien huilé, cette étape devient transparente. Des services comme Cloudinary ou Imgix intègrent nativement la conversion en WebP/AVIF et servent le bon format en fonction du navigateur de l'utilisateur. C'est du bonheur en barre pour nous, les devs !

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image">
</picture>

Cet exemple simple de la balise <picture> montre à quel point il est facile de proposer plusieurs formats. Le navigateur choisira automatiquement le premier format qu'il prend en charge. Ingénieux, n'est-ce pas ?

Le syndrome du “Ça marche déjà très bien” : notre pire ennemi

Je l'ai entendu mille fois : « Mais mes images JPG sont déjà bien compressées, ça marche ! ». Oui, ça marche. Mais est-ce que ça performe ? C'est toute la nuance. Dans un monde où chaque milliseconde compte, où le SEO est directement impacté par la vitesse de chargement, et où l'expérience utilisateur est reine, on ne peut plus se contenter du « ça marche ». On doit viser l'excellence.

J'ai fait le test sur un de mes blogs. J'ai converti toutes les images JPG/PNG en WebP, avec un fallback JPG pour les navigateurs récalcitrants (il y en a de moins en moins). Le résultat ? Une réduction moyenne de 30% du poids total des pages, et un score Lighthouse qui a grimpé en flèche. Mon hébergeur m'a même envoyé une facture moins salée à la fin du mois grâce à la réduction du transfert de données. Qui dirait non à ça ?

Alors oui, il y a un petit effort initial. Il faut se familiariser avec de nouveaux formats, ajuster ses outils, potentiellement revoir un peu sa stratégie d'intégration d'images. Mais est-ce que le jeu n'en vaut pas la chandelle ? Est-ce que le confort d'aujourd'hui justifie de pénaliser les performances de demain et l'expérience de nos utilisateurs ? Pour moi, la réponse est un non catégorique.

Ne laissons pas le passé dicter notre avenir

Le développement web est un domaine en constante évolution. Ce qui était une bonne pratique hier peut être une hérésie aujourd'hui. Les formats d'image en sont un parfait exemple. Le JPG a eu son heure de gloire, et il a rendu de fiers services. Mais l'ère numérique actuelle exige plus. Elle exige de la légèreté, de la rapidité, de l'efficacité.

Alors, la prochaine fois que vous intégrerez une image, prenez un instant. Pensez WebP. Pensez AVIF. Pensez aux utilisateurs qui attendent que votre site se charge en un clin d'œil. Et rappelez-vous que derrière chaque optimisation, il y a une meilleure expérience utilisateur, un meilleur SEO, et un développeur un peu plus fier de son travail. C'est une petite révolution qui commence par un simple choix de format. Êtes-vous prêt à la rejoindre ?