Le format PNG stocke chaque pixel d’une image dans une grille fixe. Le format SVG décrit des formes géométriques par des instructions mathématiques. Cette différence de nature, matricielle contre vectorielle, détermine le poids, la netteté et les usages possibles de chaque fichier sur un site web.
Pixel contre vecteur : ce que contient réellement un fichier.svg et un PNG
Un fichier PNG est une image matricielle (bitmap) : il enregistre la couleur de chaque pixel dans un tableau à deux dimensions (largeur x hauteur). Agrandir ce tableau revient à étirer les pixels existants, ce qui génère du flou.
A lire aussi : Comment choisir une agence web marketing ?
Un fichier SVG fonctionne autrement. Il contient du code XML qui décrit des tracés, des courbes de Bézier, des rectangles, des cercles. Le navigateur interprète ces instructions et recalcule l’image à chaque affichage. Résultat : un SVG reste net quelle que soit la taille d’affichage, de l’icône de 16 pixels au bandeau pleine largeur.
Cette distinction a une conséquence directe sur le poids. Un logo simple en SVG pèse souvent quelques kilo-octets, là où son équivalent PNG en haute résolution peut être plusieurs fois plus lourd. À l’inverse, une photo de paysage encodée en SVG produirait un fichier gigantesque et inexploitable, parce que chaque détail colorimétrique devrait être décrit par une instruction distincte.
A lire également : Comment convertir vos visiteurs avec le remarketing ?
Compression et transparence : comportement technique du PNG face au SVG
Le PNG utilise une compression sans perte. L’image décompressée est identique à l’originale, pixel pour pixel. C’est un avantage pour les captures d’écran, les illustrations comportant du texte fin ou les visuels avec des dégradés complexes : aucun artefact de compression n’apparaît.
Le SVG, lui, n’a pas besoin de compression au sens classique. Son code texte peut être minifié (suppression des espaces, raccourcissement des attributs) et compressé via gzip ou Brotli par le serveur web. Le gain de poids est alors très élevé sur des fichiers déjà légers.
Les deux formats gèrent la transparence, mais pas de la même façon :
- Le PNG prend en charge un canal alpha complet, avec des niveaux de transparence progressifs (ombres portées, reflets, fondus).
- Le SVG gère la transparence via l’attribut
opacityou le canal alpha des couleurs RGBA, directement dans le code. Chaque élément du dessin peut avoir sa propre opacité. - Le PNG fige cette transparence dans ses pixels : modifier un niveau d’opacité oblige à régénérer le fichier. En SVG, il suffit de changer une valeur dans le code ou via CSS.
Performance web et Core Web Vitals : quel format pèse sur le chargement
Le choix entre PNG et SVG n’est plus un simple débat de qualité visuelle. Les Core Web Vitals, les indicateurs de performance mesurés par Google, intègrent le poids et le rendu des images dans le calcul du LCP (Largest Contentful Paint).
Un PNG non optimisé placé en haut de page peut ralentir le LCP de façon notable. Un SVG léger pour le même logo se charge quasi instantanément et n’impacte pas ce score. En revanche, un SVG très complexe (carte géographique détaillée, illustration avec des centaines de tracés) peut ralentir le rendu parce que le navigateur doit calculer chaque forme.
La recommandation actuelle dans les guides de performance 2024-2025 positionne PNG et SVG dans un écosystème multi-formats : AVIF ou WebP pour les photos, SVG pour les logos et icônes, PNG en solution de repli pour les visuels nécessitant une transparence complexe ou un rendu pixel-perfect.
Quand le PNG reste pertinent malgré les formats modernes
Le PNG conserve un rôle précis. Les captures d’écran, les maquettes d’interface et les images contenant du texte rendu en pixels gardent une netteté supérieure en PNG par rapport à une compression avec perte (JPEG, WebP à taux élevé). Pour un site qui publie des tutoriels avec des copies d’écran annotées, le PNG reste le format le plus fidèle.
Il sert aussi de fallback universel. Tous les navigateurs, y compris les plus anciens, affichent du PNG sans problème. AVIF, par exemple, n’est pas encore pris en charge partout.
SVG manipulable en CSS et JavaScript : un atout que le PNG n’a pas
Un fichier SVG intégré directement dans le HTML (inline) ou chargé via une balise <object> devient un élément du DOM. Chaque tracé, chaque groupe d’éléments peut être ciblé par une règle CSS ou un script JavaScript.
Cela ouvre des possibilités concrètes :
- Changer la couleur d’un logo au survol, sans créer une deuxième image.
- Animer un graphique (barres qui montent, tracés qui se dessinent) avec des transitions CSS ou une bibliothèque comme GSAP.
- Adapter le visuel au mode sombre du navigateur en modifiant les attributs
filletstrokevia une media queryprefers-color-scheme.
Un PNG ne permet rien de tout cela. C’est une image figée. Pour changer sa couleur, il faut produire un nouveau fichier. Le SVG transforme une image statique en composant interactif, ce qui réduit le nombre de requêtes HTTP et simplifie la maintenance graphique.
Limites du SVG inline
Intégrer un SVG complexe directement dans le HTML alourdit le poids du document. Si le même SVG apparaît sur toutes les pages (icône de navigation, logo), le navigateur le retélécharge à chaque chargement au lieu de le mettre en cache comme un fichier externe. Utiliser un fichier SVG externe référencé par une balise <img> résout ce problème, mais désactive la manipulation CSS/JS des éléments internes.
Choisir entre fichier SVG et PNG selon le type de visuel
La règle de sélection tient en un critère : le visuel est-il composé de formes géométriques ou de pixels photographiques ? Un logo, une icône, un pictogramme, un graphique, une illustration à aplats de couleur se prêtent au SVG. Une photo, une capture d’écran, une texture complexe, un visuel avec des milliers de nuances colorées appellent un format matriciel.
Pour les photos destinées au web, PNG n’est d’ailleurs plus le premier choix. Les guides de performance récents recommandent WebP ou AVIF avec un fallback JPEG, et réservent le PNG aux cas où la fidélité pixel par pixel ou la transparence fine sont requises.
Le SVG et le PNG ne sont pas en concurrence directe. Ils couvrent des besoins différents, et un site bien optimisé utilise les deux, chacun à sa place, aux côtés de formats photo modernes comme WebP ou AVIF.
