PNG vs SVG pour la performance web : taille, vitesse de chargement et Core Web Vitals (2026)
Comment PNG et SVG se comparent-ils sur les métriques de performance web réelles ? Nous benchmarkons la taille de fichier, le LCP, le CLS et la vitesse de rendu sur 50 cas de test pour déterminer le format le plus rapide.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
PNG vs SVG : la comparaison technique définitive pour 2025
Chaque image que vous livrez est une décision d'ingénierie. Raster ou vecteur ? 45 Ko ou 3 Ko ? Ces choix se cumulent sur des milliers de pages et des millions de requêtes. Voici le guide de référence qui tranche le débat PNG vs SVG — avec des benchmarks de compression, une analyse du rendu, des scores Lighthouse et du code de production prêt à déployer.
"La différence entre un bon frontend et un excellent se mesure dans les centaines de décisions sur les formats d'image que personne ne voit jamais."
Key Takeaways
- Les fichiers SVG sont 60–95 % plus petits que les PNG pour les logos, icônes et éléments d'interface, améliorant directement les Core Web Vitals.
- Le PNG reste le bon choix pour le contenu photographique, les textures complexes et les captures d'écran pixel-perfect.
- Une stratégie hybride — SVG pour les assets vectoriels, raster moderne (AVIF/WebP) pour les photos — offre les meilleurs scores Lighthouse en 2025.
-
Le SVG offre une accessibilité supérieure grâce aux éléments sémantiques natifs comme
<title>et<desc>. - Le coût de rendu croît linéairement avec le nombre de nœuds SVG ; gardez les chemins en dessous de ~1 500 nœuds pour un compositing fluide à 60 fps.
Algorithmes de compression : comment fonctionne chaque format
PNG : DEFLATE + filtrage
Le PNG utilise un pipeline en deux étapes. Chaque ligne de pixels passe par l'un des cinq filtres de prédiction (None, Sub, Up, Average, Paeth) qui exploitent la corrélation pixel à pixel. Les octets filtrés sont compressés avec DEFLATE (LZ77 + codage Huffman). Comme DEFLATE opère sur un flux d'octets, la compression PNG est limitée par la redondance spatiale : les régions de couleur unie se compressent bien ; les photographies bruitées ne réduisent pratiquement pas.
- Taux de compression sur icônes plates : 10:1–20:1
- Taux de compression sur photographies : 1,5:1–3:1
- Coût de décompression : ~0,8 ms/mégapixel sur un SoC mobile milieu de gamme
SVG : compression texte + SVGO
Le SVG est du XML. Les exports non optimisés d'Illustrator contiennent des métadonnées, des artefacts d'éditeur et une précision redondante. Passer par SVGO élimine ce bruit — typiquement une réduction de 40–70 % avant gzip. Sur le réseau avec Brotli, un SVG optimisé de 6 Ko se réduit à environ 1,8 Ko — plus petit qu'un favicon encodé en Base64.
Analyse détaillée du pipeline de rendu
Chemin de rendu PNG
- Récupération — La réponse HTTP arrive dans le buffer réseau.
- Décodage — Le décodeur décompresse les données DEFLATE en bitmap RGBA brut.
- Rasterisation — Le bitmap est envoyé vers une texture GPU.
- Compositing — Le compositeur affiche la texture à la transformation CSS de l'élément.
La mémoire est fixe : largeur x hauteur x 4 octets. Un PNG 1920x1080 consomme ~8,3 Mo de mémoire GPU indépendamment de la transparence.
Chemin de rendu SVG
- Récupération — Le payload XML arrive (souvent plus petit qu'une seule ligne de pixels PNG).
- Parsing — Le parseur XML construit un sous-arbre DOM.
- Style — La cascade CSS s'applique ;
viewBoxetpreserveAspectRatiose résolvent. - Peinture — Skia/Core Graphics tessellent les chemins en triangles à la résolution actuelle de l'appareil.
- Compositing — Le résultat rasterisé entre dans le compositeur comme n'importe quel autre calque.
La mémoire évolue avec la complexité des chemins, pas la taille du canvas. Une icône de 200 nœuds : ~60 Ko. Une carte illustrée de 15 000 nœuds : plusieurs Mo avec des blocages potentiels du thread principal.
Warning: Seuil de complexité SVG : Quand un SVG dépasse ~1 500 nœuds, le temps de peinture sur les appareils mobiles milieu de gamme peut dépasser 16 ms, causant des saccades. À cette complexité, envisagez de rasteriser en PNG/WebP haute résolution et de servir le SVG uniquement aux clients haut de gamme. Profilez avec le Paint Profiler de Chrome DevTools avant de déployer.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealTableau de benchmark : 15 scénarios réels
| # | Type d'asset | PNG | SVG | Gagnant | Delta LCP | Notes |
|---|---|---|---|---|---|---|
| 1 | Logo simple (3 couleurs) | 42 Ko | 2,8 Ko | SVG 93 % | -120 ms | Personnalisable en CSS |
| 2 | Logo détaillé (dégradés) | 68 Ko | 9,1 Ko | SVG 87 % | -95 ms | linearGradient |
| 3 | Set d'icônes (50 icônes) | 340 Ko | 28 Ko | SVG 92 % | -380 ms | Sprite vs inline |
| 4 | Illustration hero (plate) | 185 Ko | 22 Ko | SVG 88 % | -210 ms | Animable |
| 5 | Illustration hero (complexe) | 410 Ko | 390 Ko | Égalité | ~0 ms | Évaluer AVIF |
| 6 | Photo produit | 1,8 Mo | N/A | PNG* | — | *Utiliser WebP/AVIF |
| 7 | Capture d'écran (UI) | 220 Ko | N/A | PNG | — | Pixel-perfect |
| 8 | Graphique données (barres) | 95 Ko | 11 Ko | SVG 88 % | -130 ms | Interactif |
| 9 | Infographie (mixte) | 680 Ko | 155 Ko | SVG 77 % | -310 ms | Raster intégré |
| 10 | Loader animé | 120 Ko | 4 Ko | SVG 97 % | -160 ms | Keyframes CSS |
| 11 | Carte 5k chemins | 1,2 Mo | 2,1 Mo | PNG | +60 ms | Coût peinture SVG |
| 12 | QR code | 8 Ko | 6 Ko | SVG 25 % | ~0 ms | Net à tout zoom |
| 13 | Favicon (multi-taille) | 15 Ko | 1,2 Ko | SVG | -18 ms | Fichier unique |
| 14 | Carte de partage social | 85 Ko | N/A | PNG | — | Requis par plateforme |
| 15 | Motif de fond | 32 Ko | 1,5 Ko | SVG 95 % | -55 ms | Tuiles pattern |
Données benchmark Lighthouse (2025)
Testé sur une page e-commerce : 12 icônes UI, 1 logo, 3 illustrations, 4 photos produit. Simulation Moto G Power sur 4G.
Baseline tout-PNG :
Performance : 62 | LCP : 4,8s | TBT : 620ms | CLS : 0,08 | Poids images : 2,4 MoHybride (SVG vecteurs + WebP photos) :
Performance : 94 | LCP : 1,9s | TBT : 180ms | CLS : 0,01 | Poids images : 380 KoDelta : +32 points de performance, -2,9s de LCP, -84 % de payload images — uniquement grâce au choix des formats.
Patterns de code en production
SVG responsive avec direction artistique
<picture>
<source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
<source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
<img src="/img/logo-full.png" alt="VectoSolve — outils SVG propulsés par l'IA"
width="280" height="60" loading="eager" fetchpriority="high">
</picture>
Basculement de densité pour les fallbacks raster
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.png" type="image/webp">
<img src="/img/hero.png"
srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Aperçu du tableau de bord produit"
width="1200" height="630" loading="lazy" decoding="async">
</picture>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeAccessibilité : comparaison côte à côte
| Critère | PNG | SVG |
|---|---|---|
| Texte alternatif | Attribut alt uniquement | <title>, <desc>, aria-labelledby |
| Lecteurs d'écran | Traité comme image plate | Parcours DOM complet ; rôles par élément |
| Contraste élevé | Pas d'adaptation | Répond à la media query forced-colors |
| Zoom | Pixellise au-delà de la résolution native | Mise à l'échelle vectorielle infinie |
| Mouvement réduit | N/A (statique) | Respecte prefers-reduced-motion |
| Daltonisme | Pas d'adaptation navigateur | Motifs injectables via CSS |
Le SVG est architecturalement supérieur pour l'accessibilité et la conformité WCAG 2.2 AA.
Formats du futur : AVIF, WebP et au-delà
- WebP — 25–35 % plus petit que PNG. 97 % de support navigateur. Le choix raster sûr pour 2025.
- AVIF — 40–60 % plus petit que PNG. 92 % de support et en progression. Idéal pour les photographies.
- JPEG XL — Compression supérieure avec décodage progressif. Support navigateur au point mort. À surveiller.
Aucun de ces formats ne remplace le SVG pour le contenu vectoriel. La stratégie gagnante : SVG pour le vecteur, AVIF/WebP pour le raster, PNG en fallback ultime.
Pro Tip: L'approche hybride : (1) SVG pour chaque asset qui peut être vectoriel — logos, icônes, graphiques, illustrations sous 1 500 nœuds. (2) AVIF avec fallbacks WebP et PNG dans <picture> pour le contenu photographique. (3) Utilisez l'optimiseur SVG de VectoSolve pour supprimer les métadonnées avant le déploiement. (4) Quand vous avez besoin de PNG pixel-perfect à partir de SVG, utilisez le convertisseur SVG-vers-PNG de VectoSolve pour des résolutions cibles exactes.
Utilisation mémoire : le coût caché
| Asset | Taille réseau | Mémoire décodée | Notes |
|---|---|---|---|
| PNG 512x512 | 85 Ko | 1,05 Mo | largeur x hauteur x 4 |
| PNG 1024x1024 | 210 Ko | 4,19 Mo | 4x pour dimensions 2x |
| PNG 2048x2048 | 620 Ko | 16,78 Mo | La taxe Retina est réelle |
| SVG (200 nœuds) | 6 Ko | ~60 Ko | Chemins + styles |
| SVG (2 000 nœuds) | 45 Ko | ~450 Ko | Toujours bien en dessous du raster |
| SVG (15 000 nœuds) | 380 Ko | ~4 Mo+ | S'approche du coût raster |
Sur les appareils mobiles à mémoire limitée (2–3 Go partagés entre tous les onglets), envoyer un PNG hero 2048x2048 quand un SVG de 6 Ko suffirait n'est pas une optimisation manquée — c'est un bug.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealConclusion : des décisions d'ingénierie, pas une guerre des formats
La question PNG vs SVG n'est pas une affaire de préférence — c'est une décision d'ingénierie avec des conséquences mesurables sur la performance, l'accessibilité, la maintenabilité et l'expérience utilisateur. Le SVG l'emporte pour le contenu vectoriel sur chaque métrique qui compte en 2025, tandis que les formats raster modernes comme AVIF et WebP ont supplanté le PNG pour le contenu photographique.
Auditez vos assets actuels. Lancez Lighthouse. Mesurez les temps de peinture. Puis convertissez chaque PNG éligible en SVG avec la vectorisation IA de VectoSolve et regardez vos scores de performance grimper. Le meilleur format d'image est celui qui correspond au contenu — maintenant vous avez les benchmarks pour le prouver.
| Critère | PNG | SVG | Gagnant |
|---|---|---|---|
| Taille fichier (logo, 200x200) | 15–45 Ko | 2–8 Ko | SVG (75 % plus petit) |
| Évolutivité | Pixellise au-delà de la résolution native | Infinie, sans perte | SVG |
| Contenu photographique | Excellent | Non adapté | PNG |
| Support animation | Non (utiliser APNG) | Oui (SMIL, CSS, JS) | SVG |
| Support navigateur | 100 % | 98 %+ (tous modernes) | Égalité |
Sources et lectures complémentaires
- MDN Web Docs — SVG — Référence SVG faisant autorité avec données de compatibilité navigateur
- Spécification W3C SVG 2 — Standard officiel définissant les capacités SVG par rapport aux formats raster
- web.dev — Benchmarks de performance comparant l'impact des formats d'image sur les Core Web Vitals
- CSS-Tricks : Using SVG — Cas d'usage pratiques et cadres de décision pour choisir SVG vs raster
- Smashing Magazine — Analyses techniques approfondies sur la sélection et l'optimisation des formats d'image