SVG, PNG ou WebP : quel est le meilleur format pour les images web ?
La réponse courte (et pourquoi c'est compliqué)
Il n'y a pas de grand gagnant ici. SVG, PNG et WebP ont chacun un rôle spécifique, et choisir le mauvais te coûtera cher, que ce soit en fichiers trop lourds, en mauvaise qualité d'image ou en prise de tête avec la compatibilité des navigateurs. Servir un logo en PNG de 340 Ko alors qu'il aurait pu faire 4 Ko en SVG est une véritable taxe sur la performance pour tes utilisateurs. D'un autre côté, essayer de sauvegarder une photo détaillée en SVG n'est pas juste une erreur théorique ; c'est complètement inutilisable, car le SVG n'a aucun moyen de représenter les millions de pixels d'une photo. Cet article décortique chaque format en se basant sur ce qui compte vraiment pour les projets web : leur mise à l'échelle, la taille finale du fichier, le support des navigateurs, la transparence et les cas d'usage spécifiques où chaque format excelle. Nous aborderons également des workflows de conversion concrets, y compris ce que tu peux faire avec CocoConvert et où tu devras peut-être te tourner vers d'autres outils.
SVG : le bon outil pour les logos, icônes et illustrations
SVG signifie Scalable Vector Graphics, mais ce que ça veut vraiment dire, c'est *pas de pixels*. C'est un format basé sur XML qui utilise des tracés et des formes mathématiques pour décrire une image. Comme ce ne sont que des maths, un SVG s'affiche avec une netteté parfaite à n'importe quelle taille, d'un minuscule favicon de 16×16 pixels jusqu'à un moniteur 5K. Cela en fait le seul choix logique pour les logos, les icônes, les graphiques et toute illustration construite à partir de lignes et de formes claires. La taille des fichiers pour des SVG simples est incroyablement petite. Un logo d'entreprise typique, une fois optimisé, peut descendre entre 2 et 8 Ko. Quand tu le passes dans un optimiseur comme SVGO (que CocoConvert utilise automatiquement pour les exports SVG), tu peux souvent gagner encore 20 à 40 % en supprimant les données inutiles de l'éditeur, en combinant les tracés et en réduisant la précision décimale de six à deux chiffres. Mais c'est là que le SVG devient vraiment puissant : il prend en charge l'interactivité et l'animation via CSS et JavaScript, une chose que le PNG et le WebP ne peuvent pas faire. Tu peux changer la couleur d'une icône au survol avec une seule ligne de CSS : `svg path { fill: #0057ff; }`. Ce genre de flexibilité change la donne pour les composants d'interface modernes. Cependant, les limites sont réelles. N'essaie même pas d'utiliser le SVG pour des photographies. Tenter d'exporter une photo en SVG te donnera soit un fichier gigantesque et lent à charger, soit un fouillis abstrait et postérisé. De plus, comme les fichiers SVG ne sont que du texte, ils révèlent tes tracés sources — pas génial si ton illustration est une œuvre propriétaire que tu ne veux pas voir copiée facilement. Enfin, les SVG extrêmement complexes, comme une carte détaillée avec des milliers de nœuds individuels, peuvent en fait être plus lents à afficher pour un navigateur qu'une image matricielle bien compressée.
PNG : la qualité sans perte quand chaque pixel compte
Le PNG, ou Portable Network Graphics, est un format matriciel sans perte (lossless). Cela signifie qu'il enregistre chaque pixel exactement tel quel, sans aucun artefact de compression. C'est cette fidélité parfaite qui en fait la norme pour les captures d'écran, les maquettes d'interface et toute image contenant du texte net, où tu as besoin d'une précision au pixel près et d'une transparence impeccable. Le canal alpha 8 bits du PNG offre 256 niveaux de transparence, te donnant des bords lisses et dégradés. Le compromis, c'est la taille du fichier. Une capture d'écran de 1200×800 en PNG peut facilement peser de 800 Ko à 1,2 Mo. La compression DEFLATE du PNG est sans perte, mais elle n'est pas très agressive. Pour les photos, les PNG sont systématiquement deux à quatre fois plus lourds que les JPEG ou WebP de même qualité visuelle. Le PNG brille vraiment dans les workflows qui nécessitent de multiples modifications. Comme il est sans perte, tu peux ouvrir, modifier et ré-enregistrer un fichier PNG cent fois sans dégrader sa qualité. Quiconque a déjà vu un JPEG se transformer en bouillie d'artefacts après quelques sauvegardes connaît cette douleur. Si tu crées un élément que quelqu'un d'autre devra modifier plus tard, comme un composant d'interface qu'un développeur devra recadrer, le PNG est le format le plus sûr à transmettre. Tu entendras parler de 'PNG-8' et 'PNG-24'. Le PNG-8 est limité à 256 couleurs (comme un GIF) et fonctionne pour des graphiques simples aux couleurs plates. Le PNG-24 gère 16 millions de couleurs plus le canal alpha complet pour la transparence. La plupart des outils exportent par défaut en PNG-24. Lorsque tu exportes depuis CocoConvert, il produira un PNG-24, à moins que l'image source n'ait une palette simple, auquel cas il pourrait automatiquement utiliser le PNG-8 pour optimiser la taille du fichier. La principale faiblesse du PNG est son manque de support natif pour l'animation. Bien que les PNG animés (APNG) existent, le support par les outils est inégal. Pour les animations, tu ferais mieux d'utiliser WebP, ou idéalement, une animation SVG/CSS.
WebP : le champion moderne de la compression
Développé par Google en 2010, le WebP a mis du temps à être adopté, mais il a finalement été popularisé quand Safari 14 l'a pris en charge vers 2020. À la mi-2026, tous les principaux navigateurs — Chrome, Firefox, Safari et Edge — supportent le WebP, couvrant environ 97 % des utilisateurs mondiaux selon les données de caniuse.com. Le WebP est un format à tout faire, supportant à la fois la compression avec et sans perte, la transparence et même l'animation. Il peut remplacer efficacement JPEG, PNG et GIF pour la plupart des usages web. Sa compression est son principal atout : les images WebP avec perte sont généralement 25 à 35 % plus petites que les JPEG à qualité visuelle égale, tandis que les WebP sans perte sont environ 26 % plus petits que les PNG. Ce ne sont pas que des chiffres marketing ; ils proviennent des tests à grande échelle de Google et sont confirmés par des benchmarks indépendants. Rendons ça plus concret. Une image principale de 180 Ko enregistrée en JPEG pourrait devenir un WebP avec perte de 130 Ko avec une qualité de 80. Monte la qualité à 85, et elle pourrait faire 145 Ko — toujours plus petite, avec encore plus de détails. Tu peux trouver ces réglages dans les options WebP de CocoConvert sous le curseur 'Qualité de sortie'. Une valeur de 75 à 85 est un excellent point de départ pour les photos, tandis que tu pourrais la pousser à 90+ pour les éléments d'interface où la netteté est essentielle. Bien sûr, le WebP n'est pas parfait. Pour commencer, il est strictement réservé aux écrans ; son absence de support CMJN en fait une option à exclure pour les flux d'impression. Il a aussi connu des problèmes de jeunesse avec les anciens logiciels — Adobe Photoshop n'a obtenu un support natif qu'avec la version CC 2022. Pour les graphiques simples aux couleurs plates, son avantage sur le PNG est minime, et pour les logos et icônes, le SVG reste le roi incontesté des petites tailles de fichier.
Face-à-face : benchmarks de taille de fichier et de qualité
Les comparaisons abstraites ont leurs limites. Voici comment les trois formats se comportent sur deux cas de test représentatifs. **Test 1 : Logo d'entreprise (couleurs plates, fond transparent, 400×200 px)** - SVG (optimisé avec SVGO) : 3,8 Ko - PNG-24 : 12,4 Ko - WebP sans perte (lossless) : 9,1 Ko - WebP avec perte (qualité 90) : 7,2 Ko (avec un léger effet de bande sur les bords nets) Pour un logo, le SVG l'emporte haut la main. Le WebP sans perte est un bon second choix si le SVG n'est pas une option pour une raison quelconque. Le PNG est le plus lourd mais offre une fidélité parfaite. **Test 2 : Photo de produit (pleine couleur, sans transparence, 1200×800 px)** - SVG : Non applicable (ne peut pas représenter des données photographiques de manière pertinente) - PNG-24 : 1,14 Mo - JPEG (qualité 85) : 187 Ko - WebP avec perte (qualité 80) : 134 Ko - WebP avec perte (qualité 75) : 108 Ko (un léger flou visible en y regardant de près) Pour les photographies, le WebP est le grand gagnant en termes de taille de fichier. Un PNG aussi lourd ne devrait être utilisé que comme fichier maître pour des modifications ultérieures, jamais sur une page web en production. Voici une limite pratique à connaître avec CocoConvert : tu ne peux pas générer une version WebP et un fallback PNG en une seule tâche d'exportation. Tu devras lancer deux conversions distinctes, puis implémenter toi-même l'élément HTML `<picture>` pour servir le bon format. C'est une lacune dans le workflow, et tu préfères le savoir maintenant plutôt que de le découvrir en plein milieu d'un projet.
Support des navigateurs, fallbacks et l'élément <picture>
Le SVG et le PNG bénéficient d'un support universel par les navigateurs depuis plus d'une décennie. Tu n'as pas besoin de penser aux fallbacks. Le WebP est maintenant aussi largement supporté, mais tu pourrais rencontrer des problèmes si tu dois assurer la compatibilité avec des utilisateurs sur de vieux navigateurs d'entreprise ou des applications anciennes avec des vues web intégrées. La solution standard est l'élégant élément HTML `<picture>`. Il te permet de lister plusieurs sources, et le navigateur choisit simplement la première qu'il comprend. ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` Le navigateur lit de haut en bas, utilisant la première source supportée. Ce modèle n'ajoute aucune surcharge réelle et te fait bénéficier des avantages de performance du WebP avec la fiabilité à toute épreuve du PNG comme filet de sécurité. Pour le SVG, le plus grand piège de compatibilité n'est pas les navigateurs, ce sont les clients de messagerie. Le support du SVG dans les e-mails HTML est un désastre ; Outlook sur Windows affichera simplement une image cassée. Sérieusement, n'utilise pas de SVG dans les templates d'e-mail. Utilise simplement un PNG et épargne-toi les tickets de support. Pour les pages web et les applications, le SVG est parfaitement sûr. Une petite note sur le SVG et la Content Security Policy (CSP) : si tu intègres un SVG directement dans ton HTML, il hérite de la CSP de la page. Si tu le charges comme un fichier externe via une balise `<img>`, il ne peut pas exécuter de scripts. C'est une fonctionnalité de sécurité. Si ton SVG doit être interactif avec du JavaScript, tu dois soit l'intégrer directement dans le HTML (inline), soit le charger avec une balise `<object>`.
Faire le bon choix : un guide de décision
Après tous les benchmarks et les mises en garde, l'arbre de décision pratique ressemble à ceci : **Utilise le SVG quand :** Le graphique est un logo, une icône, un diagramme ou toute illustration faite de formes et de tracés. Tu disposes d'un fichier source vectoriel provenant d'un outil comme Illustrator, Figma ou Inkscape. Tu veux qu'il soit net sur toutes les densités d'écran sans avoir à créer des assets @2x et @3x distincts. Tu veux contrôler les couleurs ou ajouter des effets de survol avec CSS. **Utilise le PNG quand :** L'image est une capture d'écran d'interface ou contient du texte net où la compression avec perte aurait un rendu horrible. Tu as besoin de transparence et ne peux pas utiliser WebP. Le fichier doit être un fichier maître sans perte pour des modifications futures. Tu envoies des ressources pour une campagne d'e-mailing ou à un client qui n'a peut-être pas de logiciel d'imagerie moderne. **Utilise le WebP quand :** L'image est une photographie ou un autre graphique matriciel complexe pour un site web moderne. Ta priorité absolue est le meilleur rapport qualité/poids possible. Tu es en mesure d'implémenter l'élément `<picture>` pour les fallbacks, ou ton CMS/CDN (comme Cloudflare Images, Imgix ou Cloudinary) s'en charge pour toi en servant automatiquement du WebP aux navigateurs qui le supportent. Pour convertir entre ces formats dans CocoConvert, il suffit de téléverser ton fichier, de choisir ton format cible dans le menu déroulant et de le télécharger. Si tu choisis WebP, tu peux ajuster le curseur 'Qualité de sortie' — la valeur par défaut de 85 est un bon point de départ pour les photos. Pour les traitements par lots, comme la conversion d'un dossier entier de PNG en WebP, l'abonnement Pro prend en charge jusqu'à 50 fichiers à la fois. L'optimisation SVG est automatique sur toutes les exportations SVG, donc il n'y a rien à configurer. Il y a un cas où aucun de ces formats n'est le meilleur choix : les animations. Il est temps de le dire : pour un usage en production sur le web, le GIF est mort. Malgré sa persistance culturelle, il crée des fichiers 3 à 5 fois plus volumineux qu'une animation WebP. Pour les boucles courtes et simples, utilise des animations CSS (zéro surcoût lié à l'image). Pour des animations vectorielles complexes, utilise une animation Lottie/SVG. N'utilise l'animation WebP qu'en dernier recours pour du contenu matriciel.