SVG vs PNG/JPG : pourquoi le format vectoriel est essentiel pour les performances et le SEO

PNG et JPG : parfaits pour les photos, trop lourds pour l'interface

PNG et JPG sont des formats matriciels : l'image est une grille de pixels. Un logo exporté en PNG 512×512 « photographie » chaque point. Pour rester net sur un écran Retina, vous devez souvent servir une version deux ou trois fois plus grande, donc deux ou trois fois plus de Ko. Le JPG compresse mieux les photos, mais il détruit les aplats, ajoute des artefacts autour des textes et ne gère pas la transparence. Ni l'un ni l'autre n'est conçu pour un logotype ou une icône qui doit s'afficher à 24 px dans la navigation et à 240 px dans le bandeau.

Le SVG (Scalable Vector Graphics) décrit des formes par des courbes et des coordonnées, pas par des pixels. Vectoriser un PNG avec PixelToPath, c'est remplacer une bitmap figée par un tracé que le navigateur redessine à la taille exacte de l'écran. Résultat : un fichier en général beaucoup plus léger, et une netteté identique sur mobile, ordinateur et dalle 4K.

Ce que le SVG change concrètement pour un site

Pour l'interface, le SVG n'est pas un « plus » esthétique. C'est un levier de performance : moins d'octets sur le réseau, moins de variantes à maintenir, un cache plus simple, et un rendu vectoriel natif dans tous les navigateurs modernes.

Les gains les plus visibles pour un développeur ou un SEO :

• Poids : un logo simple passe souvent de 40 à 80 Ko en PNG à quelques Ko en SVG, et vous supprimez les exports @2x / @3x
• Scalabilité : un seul fichier, net à 16 px comme en plein écran 4K, sans srcset ni media queries d'images
• Core Web Vitals : moins de données à télécharger (LCP) et un espace réservé stable via viewBox (CLS)
• SEO technique : des pages plus rapides sur mobile, un format que Google interprète, et du texte éventuellement présent dans le SVG

PNG vs SVG : le poids d'un logo n'est pas anodin

Les images restent l'un des premiers postes de poids d'une page. On optimise les photos en WebP, on oublie le logo de l'en-tête et la vingtaine d'icônes PNG du CSS. Or ces fichiers se répètent sur toutes les URLs : chaque milliseconde perdue l'est sur tout le site.

Ordres de grandeur observés après vectorisation avec PixelToPath, sur le scénario type d'un site vitrine ou d'une application web :

Scénario	PNG / JPG	SVG
Logo 512 px avec transparence	40 à 80 Ko	2 à 12 Ko selon les couleurs et les nœuds
Même logo servi en @2x (1024 px) pour le Retina	Le poids double, parfois triple	Un seul fichier, inchangé
20 icônes d'interface exportées en @3x (72×72)	40 à 160 Ko en plus	Quelques Ko au total
Logo en aplats issu d'un JPG	Artefacts et halos autour des formes et du texte	Bords nets, et un fichier encore plus léger

La règle est simple : tout ce qui est forme, texte, pictogramme ou logotype gagne à être du SVG. Les photographies et captures d'écran restent en JPG, WebP ou AVIF. Le SVG n'est pas un remplaçant universel : c'est le bon format pour l'interface.

Scalabilité : un fichier net du smartphone au 4K

Un PNG n'est net qu'à sa résolution native. Agrandi, on voit les pixels. Réduit brutalement, le navigateur doit rééchantillonner. D'où la gymnastique des fichiers @1x, @2x, @3x, des srcset et des densités CSS. Chaque nouveau point de rupture ou nouvelle densité d'écran (Retina, téléphones récents, moniteurs 4K) exige un nouvel export, ou un fichier trop grand « au cas où ».

Un SVG ignore cette contrainte. Le moteur de rendu calcule les courbes à la taille CSS demandée. Favicon 32 px, logo 48 px dans la navigation, même marque à 400 px dans le bandeau, projection 4K : c'est le même fichier. Pas de flou, pas de crénelage, pas de deuxième requête pour la version haute densité. Pour une bibliothèque de composants, c'est aussi moins de dette : une icône, un fichier, toutes les tailles.

Core Web Vitals et SEO : pourquoi Google se soucie du format

La vitesse mobile est un facteur de classement. Les Core Web Vitals (LCP, INP, CLS) mesurent ce que l'utilisateur ressent. Remplacer un logo PNG lourd ou une ribambelle d'icônes matricielles par des SVG ne fera pas passer une page de 4 Mo à 40 Ko. Sur l'habillage du site, l'effet est immédiat, surtout sur un réseau 4G ou un LCP coincé par le logo de l'en-tête.

Concrètement, le format vectoriel aide trois métriques, à condition de rester raisonnable sur la complexité du tracé :

• LCP (Largest Contentful Paint) : si le plus grand élément visible est un logo ou une illustration plate, un SVG de quelques Ko arrive plus tôt qu'un PNG @2x de 150 Ko. Moins de contention réseau pour le reste de la page
• CLS (Cumulative Layout Shift) : un SVG avec width, height et viewBox réserve sa boîte dès l'analyse du HTML. Plus besoin d'attendre le décodage d'une bitmap pour connaître le ratio, donc moins de sauts de mise en page
• INP et fil d'exécution principal : un SVG simple (logo, icône) coûte peu à peindre. Évitez en revanche les SVG « photo » de plusieurs milliers de chemins : ils peuvent peser plus qu'un PNG et faire travailler le processeur. D'où l'intérêt d'un tracé propre via PixelToPath, pas d'une copie pixel par pixel
• SEO au-delà de la vitesse : Google indexe les SVG. Un logo intégré peut porter un titre accessible. Une image SVG avec un attribut alt reste la base. Et une page plus légère réduit le taux de rebond technique, le signal d'expérience que le classement prend en compte

Où le SVG bat le PNG/JPG sur un site réel

Ce n'est pas théorique. Voici les emplacements où le format vectoriel paie tout de suite :

• Logo de l'en-tête et du pied de page : un fichier unique, net en Retina, souvent l'un des éléments les plus vus, et parfois le LCP sur une page d'accueil minimaliste
• Système d'icônes : plus de sprites PNG 1x/2x. Chaque pictogramme est un SVG (ou un sprite SVG), stylable au CSS (currentColor) sans nouvel export
• Favicon et apple-touch : un SVG de favicon moderne plus un PNG de repli évite une ribambelle de tailles 16, 32, 180 px à maintenir
• Illustrations d'interface et états vides : les dessins plats vectorisés restent nets en plein écran, sans coûter le poids d'une image d'en-tête
• Page d'atterrissage SEO : chaque Ko économisé sur l'habillage améliore Lighthouse, PageSpeed Insights et le ressenti mobile, des signaux que le classement agrège

Gardez JPG/WebP pour les photos. Passez logos, pictogrammes et illustrations plates en SVG. C'est le découpage que les sites les plus rapides appliquent déjà.