Format PNG

Le tableau de décision

Le bon format dépend uniquement de ce que contient l'image, jamais d'une préférence générale.

Pourquoi un PNG pèse lourd sur une photo

Tout tient à une différence, le PNG compresse sans perte et le JPEG avec perte.

Sans perte signifie que chaque pixel d'origine est restitué exactement. Pour y parvenir tout en réduisant le fichier, le PNG cherche les répétitions : des zones de couleur identique, des motifs qui reviennent. Sur un schéma composé de quelques aplats et de lignes, il trouve énormément de répétitions et le résultat est très léger.

Sur une photographie, c'est l'inverse. Chaque pixel diffère légèrement de son voisin, il n'y a presque rien à factoriser, et le fichier reste volumineux. Une photo enregistrée en PNG pèse couramment plusieurs fois le poids du même visuel en JPEG, sans qu'aucune différence soit visible à l'écran.

La transparence à 256 niveaux

C'est ce qui a fait le succès du format et ce qui justifie encore son usage. Le PNG gère un canal de transparence à 256 niveaux, ce qui permet des bords progressifs et des ombres portées naturelles.

Concrètement, un logo posé sur un fond coloré s'intègre proprement, sans le rectangle blanc disgracieux qu'un JPEG imposerait. Le GIF proposait déjà une transparence, mais binaire. Un pixel était visible ou ne l'était pas, ce qui produisait des contours en escalier.

Deux points de vigilance en pratique. D'abord, un fichier transparent ne s'affiche pas de la même façon selon le fond du site, donc vérifiez toujours le rendu sur fond clair et sur fond sombre. Ensuite, la transparence a un coût en poids, et une image qui n'en a pas besoin gagne à être aplatie.

Ce que changent le WebP et l'AVIF

Le WebP a été conçu pour remplacer à la fois le JPEG, le PNG et le GIF. Il propose une compression avec ou sans perte, gère la transparence et l'animation, et produit des fichiers plus légers à qualité perçue équivalente. Google, qui l'a créé, annonce des fichiers 26 % plus légers que le PNG en compression sans perte, et 25 à 34 % plus légers que le JPEG en compression avec perte.

Longtemps freiné par un support partiel, le format est aujourd'hui reconnu par près de 97 % des navigateurs selon Can I Use, Safari l'ayant pleinement intégré à partir de sa version 16. Pour un site grand public, la question du support ne se pose plus.

L'AVIF va plus loin sur les photographies, avec des fichiers généralement encore plus légers que le WebP. Il est lu par tous les navigateurs principaux depuis l'arrivée d'Edge 121 en janvier 2024, soit un peu plus de 95 % des utilisateurs, et Google Images l'indexe. Son encodage est plus lent et moins d'outils le produisent. Je recommande le WebP comme format par défaut, et l'AVIF pour les grandes photos quand votre CMS ou votre CDN sait le générer.

Servez du WebP par défaut. La plupart des systèmes de gestion de contenu et des hébergeurs proposent une conversion automatique, souvent en une case à cocher, avec repli sur le format d'origine pour les rares navigateurs anciens. Conservez les fichiers d'origine en PNG ou JPEG dans votre bibliothèque, où ils restent utiles pour la réutilisation hors du web.

L'effet sur le référencement

Ce sujet est souvent exagéré. Google ne classe pas une page mieux parce qu'elle utilise un format d'image plutôt qu'un autre. Il n'existe aucun bonus WebP.

L'effet est indirect et bien réel. Les images sont souvent le premier poste de poids d'une page. Un mauvais format dégrade le temps d'affichage, ce qui se répercute sur les Core Web Vitals et surtout sur l'expérience de vos visiteurs.

L'image principale d'une page, souvent la plus grande et la plus lourde, est fréquemment l'élément qui détermine le LCP, l'indicateur qui mesure l'affichage du plus grand contenu visible. Le format y joue directement.

Quatre réglages comptent plus que le choix du format lui-même :

• Dimensionner à la taille d'affichage réelle. Servir une image de 4 000 pixels de large affichée sur 800 est le gaspillage le plus courant, et aucun format ne le rattrape.
• Déclarer largeur et hauteur dans le code, pour éviter que la page ne saute pendant le chargement.
• Différer le chargement de tout ce qui se trouve sous le premier écran.
• Renseigner l'attribut alt, qui sert l'accessibilité et la recherche d'images.

Le détail complet est sur l'optimisation des images et le poids des images.

PNG et recherche d'images

La recherche d'images est un canal négligé qui apporte du trafic réel sur beaucoup de sites, notamment en commerce, en cuisine, en décoration et en tourisme. Le format n'y joue aucun rôle de classement, mais quatre éléments comptent.

1. Le nom du fichier. Un nom descriptif vaut mieux qu'une référence d'appareil photo. Voir le nom des images.
2. L'attribut alt, qui décrit le contenu réel de l'image plutôt que d'empiler des mots-clés.
3. Le texte autour de l'image, qui donne son contexte et pèse davantage qu'on ne le croit.
4. Un sitemap dédié aux images sur les sites qui en publient beaucoup.

La méthode que j'applique

1. 1. Choisir selon le contenu, pas par habitude

   Photo, JPEG. Texte, schéma ou transparence, PNG. Logo, SVG quand c'est possible. La décision prend deux secondes et conditionne tout le reste.

2. 2. Redimensionner avant tout

   À la taille maximale d'affichage réelle, en prévoyant le double pour les écrans à haute densité. C'est le geste le plus rentable de toute la chaîne.

3. 3. Convertir en WebP pour la diffusion

   Automatiquement de préférence, en conservant l'original dans la bibliothèque.

4. 4. Compresser

   Mon outil de compression le fait directement dans le navigateur, sans envoi de fichier sur un serveur.

5. 5. Vérifier le résultat sur la page

   Poids total transféré et rendu visuel. Une compression trop agressive se voit sur les aplats et les dégradés, et un visuel dégradé coûte plus cher qu'il ne rapporte.

Questions fréquentes