Caractéristiques du format PNG
Le PNG (Portable Network Graphics) a été créé en 1996 comme alternative au GIF, dont il souhaitait surpasser les limitations tout en évitant les contraintes de licence. Sa principale caractéristique est la compression sans perte : contrairement au JPEG, aucune donnée n'est supprimée lors de la compression. L'image décompressée est strictement identique à l'originale.
Cette propriété a une conséquence directe sur le poids : un PNG sera presque toujours plus lourd qu'un JPEG équivalent pour une photographie, car le JPEG accepte de sacrifier des détails imperceptibles pour réduire le fichier. En revanche, pour les images avec des bords nets, du texte ou des zones de couleur uniformes, le PNG produit des résultats visuellement supérieurs avec un poids souvent comparable ou même inférieur au JPEG.
PNG, JPEG, WebP : choisir le bon format
| Format | Compression | Transparence | Idéal pour | À éviter pour |
|---|---|---|---|---|
| PNG | Sans perte | Oui (alpha) | Logos, captures d'écran, graphiques, icônes, texte sur fond transparent | Photos de produits, images de fond, photos réalistes complexes |
| JPEG | Avec perte | Non | Photos, images avec dégradés, visuels réalistes | Logos, texte, captures d'écran (artefacts visibles) |
| WebP | Les deux | Oui | Tout type d'image web (remplacement universel) | Contextes nécessitant une compatibilité avec d'anciens logiciels |
| SVG | Vectoriel | Oui | Logos simples, icônes, illustrations géométriques | Photos, images détaillées complexes |
En pratique, la règle est simple : si votre image contient de la transparence et n'est pas une photographie, commencez par le PNG. Si c'est une photo, commencez par le JPEG ou directement le WebP. Si c'est un logo vectoriel simple, envisagez le SVG plutôt que le PNG.
La transparence PNG : canal alpha
Le PNG supporte un canal de transparence appelé canal alpha. Ce canal supplémentaire (en plus des canaux rouge, vert et bleu) définit le niveau d'opacité de chaque pixel, de 0 (totalement transparent) à 255 (complètement opaque). C'est ce qui permet de placer un logo sur n'importe quel fond coloré sans avoir un fond blanc indésirable autour.
Il existe trois variantes principales du format :
- PNG-8 : palette de 256 couleurs maximum, taille de fichier très réduite, transparence binaire (un pixel est soit transparent soit opaque). Adapté aux icônes et petits graphiques simples.
- PNG-24 : 16 millions de couleurs, pas de transparence. Moins courant, souvent remplacé par le JPEG pour les photos.
- PNG-32 : 16 millions de couleurs avec canal alpha complet. Le format le plus courant pour les images web nécessitant de la transparence. C'est le "PNG" que la plupart des gens utilisent sans connaître l'appellation technique.
Poids, performance et Core Web Vitals
Le poids des images est l'un des premiers facteurs qui dégradent le Largest Contentful Paint (LCP), qui mesure le temps d'affichage de l'élément principal de la page. Un PNG mal optimisé en position haute de page peut seul faire passer un LCP de 2 secondes à 5 secondes sur mobile.
Quelques repères de poids pour des PNG correctement optimisés :
- Logo dans le header : viser moins de 20 Ko
- Icône ou pictogramme : moins de 5 Ko, ou SVG préférable
- Capture d'écran dans un article : moins de 150 Ko
- Infographie large : moins de 300 Ko
Au-delà de ces seuils, l'impact sur la performance devient mesurable. Google intègre la performance des pages dans ses critères de classement via les Core Web Vitals, et le poids des images est systématiquement signalé dans les audits Lighthouse et PageSpeed Insights.
Optimiser un PNG pour le SEO
L'optimisation d'un PNG se joue à plusieurs niveaux :
-
Compresser sans dégrader
Des outils comme TinyPNG ou pngquant permettent de réduire le poids d'un PNG de 40 à 70 % sans perte visible en réduisant intelligemment le nombre de couleurs et en supprimant les métadonnées inutiles (données EXIF, profil ICC, etc.).
-
Redimensionner aux dimensions réelles d'affichage
Exporter un PNG en 2 000 pixels de large pour l'afficher sur 400 pixels multiplie le poids par 5 inutilement. Exporter à la taille réelle d'affichage, en ajoutant une version 2x (retina) si nécessaire via l'attribut
srcset. -
Envisager la conversion en WebP
Un PNG converti en WebP (mode sans perte) est en moyenne 26 % plus léger. La compatibilité navigateur est excellente depuis 2020. La conversion peut se faire côté serveur avec
cwebpou via des plugins CMS. -
Nommer le fichier correctement
Google lit le nom du fichier.
logo-consultant-seo-josselin-leydier.pngest infiniment préférable àlogo_v3_final2.png. Des mots séparés par des tirets, descriptifs et sans caractères spéciaux. -
Renseigner l'attribut alt
L'attribut alt est obligatoire pour les images informatives. Pour les logos et icônes purement décoratifs,
alt=""est correct et indique aux lecteurs d'écran d'ignorer l'image.
PNG dans Google Images
Les images PNG sont indexées par Google au même titre que les JPEG. Les règles de visibilité dans Google Images s'appliquent identiquement : soigner le nom de fichier, l'attribut alt, le contexte textuel de la page environnante, et inclure les images dans un sitemap image. Pour les infographies ou captures d'écran utiles, Google Images peut générer un trafic complémentaire non négligeable, notamment sur des requêtes visuelles spécifiques.