Webp, PNG, SVG quel format d’image utiliser sur un site internet ?

Images sur le web : un choix qui n'a l'air de rien, mais qui change tout

PNG ou WebP ? SVG ou JPEG ? La question peut sembler anecdotique. En réalité, elle revient sur presque chaque projet web qu'on accompagne chez NOOKI, et la réponse est rarement la même selon le contexte.

Sur un site internet, les images représentent en moyenne 50 % du poids total d'une page. Ce sont elles qui ralentissent le chargement, dégradent l'expérience utilisateur, plombent les scores de performance et, au bout du compte, pénalisent ton positionnement dans Google. Choisir le mauvais format, c'est partir avec un handicap dès le départ.

Mais il n'existe pas un format universel qui écrase tous les autres. WebP est excellent, oui. SVG est indispensable pour certains usages. PNG reste irremplaçable dans d'autres cas. Et même le bon vieux JPEG a encore sa place en 2025 si tu sais quand l'utiliser.

Dans cet article, je t'explique concrètement les différences entre WebP, PNG, SVG et JPEG, quand utiliser chacun, et comment ce choix s'inscrit dans une stratégie d'optimisation SEO on-page efficace. Pas de théorie inutile : uniquement ce dont tu as besoin pour prendre les bonnes décisions sur ton site.

Pourquoi le format d'image est un enjeu SEO et performance

Images et vitesse de chargement : le lien direct

On a tendance à penser que la vitesse d'un site, c'est une affaire de serveur ou de code. C'est vrai en partie. Mais dans la majorité des cas, ce sont les images mal optimisées qui sont le premier facteur de lenteur. Un PNG de 2 Mo là où un WebP de 150 Ko aurait suffi, et c'est toute la page qui rame.

Le navigateur doit télécharger chaque ressource avant de pouvoir afficher la page. Plus les images sont lourdes, plus ce téléchargement prend du temps. Et sur mobile, avec une connexion 4G moyenne, chaque kilooctet compte vraiment. Le choix du format d'image, c'est donc la première décision d'optimisation à prendre, avant même de parler de compression ou de lazy loading.

L'impact sur les Core Web Vitals et le référencement naturel

Depuis que Google a intégré les Core Web Vitals à son algorithme, la performance de chargement est devenue un critère de classement officiel. Deux métriques sont directement liées aux images :

• Le LCP (Largest Contentful Paint) : mesure le temps de chargement de l'élément le plus grand visible à l'écran. Dans la grande majorité des cas, cet élément est une image. Un mauvais format = un LCP dégradé = un signal négatif pour Google.
• Le CLS (Cumulative Layout Shift) : mesure les décalages visuels inattendus pendant le chargement. Une image sans dimensions définies dans le HTML peut provoquer un saut de mise en page qui plombe ce score.

Au-delà des métriques techniques, une page rapide, c'est aussi une page sur laquelle l'utilisateur reste plus longtemps. Le taux de rebond baisse, le temps passé augmente : deux signaux comportementaux que Google interprète positivement pour le référencement.

Si tu veux aller plus loin sur le sujet, j'ai détaillé le fonctionnement et l'optimisation des Core Web Vitals dans un article dédié.

JPEG : le vétéran toujours utile

Comment fonctionne la compression JPEG

Le JPEG (Joint Photographic Experts Group) existe depuis 1992. C'est l'un des formats les plus anciens du web, et pourtant il est encore massivement utilisé aujourd'hui. Pour une bonne raison : il a été conçu spécifiquement pour les photographies, et il fait ça très bien.

Son principe repose sur une compression avec perte. Concrètement, l'algorithme analyse l'image et supprime des informations jugées peu perceptibles par l'oeil humain, notamment dans les zones de dégradés complexes et les arrière-plans flous. Résultat : un fichier beaucoup plus léger qu'un format sans perte, au prix d'une légère dégradation de la qualité.

C'est ce rapport qualité/poids qui a fait le succès du JPEG. En ajustant le taux de compression, on peut trouver un équilibre acceptable entre légèreté et rendu visuel. Un JPEG compressé à 75-80 % est souvent indiscernable d'un original à l'oeil nu, pour un poids deux à cinq fois inférieur.

Quand utiliser le JPEG en 2025

Soyons directs : dans la plupart des nouveaux projets web, le WebP remplace avantageusement le JPEG. Il est plus léger à qualité équivalente et mieux adapté aux exigences actuelles de performance. Mais le JPEG conserve sa pertinence dans certains cas précis.

En dehors de ces cas, si tu crées un site aujourd'hui, passe directement au WebP. Tu gagneras du poids, de la performance et de meilleures métriques sans effort supplémentaire. On y revient en détail dans la partie suivante.

PNG : quand la qualité et la transparence priment

Les forces du PNG

Le PNG (Portable Network Graphics) a été créé en 1996 comme alternative libre au format GIF. Sa grande différence avec le JPEG : il utilise une compression sans perte. Cela signifie qu'aucune information n'est supprimée lors de la compression. L'image décompressée est strictement identique à l'originale, pixel pour pixel.

C'est cette caractéristique qui rend le PNG indispensable dans deux situations précises :

• La transparence : le PNG supporte le canal alpha, ce qui permet d'avoir des zones totalement ou partiellement transparentes dans une image. Indispensable pour les logos sur fond coloré, les icônes, les éléments d'interface superposés à un arrière-plan.
• Les visuels avec texte ou bords nets : captures d'écran, infographies, schémas, maquettes. Sur ce type d'images, la compression avec perte du JPEG génère des artefacts visibles autour des contours et des caractères. Le PNG les préserve parfaitement.

Les limites à connaître avant de l'utiliser partout

Le PNG a un défaut majeur : il est lourd. Sur des photographies complexes avec beaucoup de variations de couleurs, un PNG peut facilement peser cinq à dix fois plus qu'un JPEG ou un WebP équivalent. C'est pour cette raison qu'il ne faut surtout pas en faire un format par défaut.

On voit régulièrement sur des sites des photos de présentation, des images de blog ou des visuels de hero section exportés en PNG "pour ne pas perdre en qualité". C'est une erreur classique qui coûte cher en performance. Pour une photo, le PNG n'apporte aucun avantage visuel perceptible par rapport au WebP, mais il pèse beaucoup plus lourd.

Une règle simple à retenir : si ton image n'a pas besoin de transparence et que ce n'est pas un visuel avec du texte ou des bords nets, le PNG n'est probablement pas le bon choix. WebP fera le travail mieux et plus légèrement dans la quasi-totalité des autres cas.

WebP : le format qui s'impose comme nouveau standard

Pourquoi WebP surpasse JPEG et PNG dans la plupart des cas

Le WebP a été développé par Google et introduit en 2010. Pendant longtemps, son adoption a été freinée par des problèmes de compatibilité navigateur. Ce temps est révolu. En 2025, tous les navigateurs modernes supportent le WebP : Chrome, Firefox, Safari, Edge, Opera. La question de la compatibilité ne se pose plus.

Ce qui rend le WebP supérieur aux formats historiques, c'est sa polyvalence technique. Il combine ce que JPEG et PNG font séparément, en faisant tout mieux :

• Compression avec perte : comme le JPEG, mais avec un algorithme plus efficace. À qualité visuelle équivalente, un WebP est en moyenne 25 à 35 % plus léger qu'un JPEG.
• Compression sans perte : comme le PNG, mais là encore plus efficace. Un WebP sans perte est environ 26 % plus léger qu'un PNG équivalent.
• Transparence : comme le PNG, le WebP supporte le canal alpha. Tu peux donc avoir un logo avec fond transparent en WebP, plus léger qu'en PNG.
• Animation : comme le GIF, le WebP supporte les images animées, avec une qualité et un poids sans comparaison.

Compatibilité navigateurs et intégration concrète

Comme évoqué, la compatibilité n'est plus un sujet en 2025. Mais si ton site doit supporter des navigateurs très anciens (IE11 par exemple, dans certains contextes institutionnels), tu peux utiliser la balise HTML <picture> pour proposer un fallback automatique :

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image">
</picture>

Le navigateur charge le WebP s'il le supporte, et bascule automatiquement sur le JPEG dans le cas contraire. Propre, sans JavaScript, sans friction.

Sous WordPress, la conversion en WebP est aujourd'hui largement automatisée. Les plugins ShortPixel, Imagify ou Smush convertissent tes images à l'upload et servent le bon format selon le navigateur de l'utilisateur. Certains thèmes et le core WordPress lui-même gèrent nativement le WebP depuis la version 5.8.

En résumé : WebP doit être ton format par défaut pour toutes les images non vectorielles sur le web. Photos, illustrations, visuels de mise en page, images de blog... Si c'est une image matricielle et qu'elle va sur ton site, WebP est la réponse dans 90 % des cas.

SVG : le format vectoriel incontournable pour les interfaces

Ce que le SVG fait mieux que tous les autres

Le SVG (Scalable Vector Graphics) est fondamentalement différent des formats qu'on vient de voir. JPEG, PNG et WebP sont des formats matriciels : ils stockent l'image sous forme d'une grille de pixels. Le SVG, lui, est un format vectoriel : il décrit l'image sous forme de formes géométriques, de courbes et de coordonnées mathématiques.

La conséquence directe de cette différence, c'est que un SVG est parfaitement net à n'importe quelle taille. Que tu l'affiches en 16x16 pixels ou en plein écran 4K, le rendu est identique, sans aucune pixellisation. C'est une propriété qu'aucun format matriciel ne peut offrir, quel que soit son niveau de compression.

Mais ce n'est pas sa seule force. Le SVG a d'autres avantages décisifs pour le web :

• Poids minimal : un logo simple en SVG peut peser quelques centaines d'octets. C'est souvent dix à cinquante fois plus léger qu'un PNG équivalent.
• Manipulable via CSS et JavaScript : les couleurs, les formes, les animations d'un SVG peuvent être contrôlées directement depuis ton code. Un logo qui change de couleur au survol ? Deux lignes de CSS.
• Indexable par Google : le SVG est du code XML. Google peut le lire, l'interpréter et en tenir compte pour le référencement.
• Animable nativement : les animations SVG sont fluides, légères, et ne nécessitent aucun fichier vidéo ou GIF lourd.

Cas d'usage et limites du SVG

Le SVG est taillé pour tout ce qui est graphisme d'interface : logos, icônes, pictogrammes, illustrations géométriques, schémas, diagrammes, fonds décoratifs. C'est le format à utiliser sans hésitation pour tous ces éléments.

Mais le SVG a une limite claire : il n'est pas fait pour les photographies. Une photo convertie en SVG sera soit de mauvaise qualité, soit d'un poids monstrueux. Le SVG fonctionne uniquement avec des formes géométriques définies mathématiquement. Plus une image est complexe et réaliste, moins le SVG est adapté.

Comparatif : quel format choisir selon ton contexte

Tableau récapitulatif format / usage / avantages

Voici un récapitulatif complet pour choisir le bon format selon ton cas d'usage. Un coup d'oeil suffit à prendre la bonne décision sans avoir à tout retenir.

La règle simple pour ne plus se tromper

Au-delà du tableau, voici la logique de décision qu'on applique systématiquement chez NOOKI sur tous nos projets web. Trois questions suffisent à identifier le bon format dans 95 % des cas :

Cette logique couvre l'essentiel des situations. Et si tu as un doute sur un cas particulier, la règle par défaut est simple : WebP d'abord, SVG pour tout ce qui est vectoriel. Tu seras dans le bon dans la quasi-totalité des cas.

Bonnes pratiques pour optimiser ses images sur le web

Nommage, compression et attribut alt

Choisir le bon format, c'est la première étape. Mais une image bien optimisée, c'est aussi une image bien nommée, bien compressée et bien renseignée sur le plan sémantique. Ces trois points sont indissociables d'une bonne stratégie SEO on-page.

Le nommage du fichier est souvent négligé, alors qu'il envoie un signal direct à Google. Un fichier nommé IMG_4872.webp ne dit rien aux moteurs de recherche. Un fichier nommé creation-site-web-nancy.webp est immédiatement compréhensible et contribue au référencement de la page. La règle : des mots clés pertinents, séparés par des tirets, en minuscules, sans caractères spéciaux.

La compression doit être systématique avant tout upload. Même en WebP, une image non compressée peut rester lourde si elle sort d'un appareil photo ou d'un outil de design. L'objectif : viser un poids inférieur à 150 Ko pour la majorité des images de contenu, et inférieur à 300 Ko pour les visuels de grande taille comme les hero sections.

L'attribut alt est à la fois un signal SEO et un élément d'accessibilité. Il décrit le contenu de l'image aux moteurs de recherche et aux lecteurs d'écran utilisés par les personnes malvoyantes. Un bon attribut alt est descriptif, naturel, et intègre le mot clé principal de la page quand c'est pertinent. J'ai détaillé toutes les bonnes pratiques sur la balise alt des images dans un article dédié si tu veux aller plus loin.

Lazy loading et intégration technique

Le lazy loading est une technique qui consiste à ne charger les images que lorsqu'elles entrent dans le champ de vision de l'utilisateur, plutôt que de toutes les charger au moment où la page s'ouvre. Le résultat : un chargement initial beaucoup plus rapide, un LCP amélioré, et une consommation de bande passante réduite pour les utilisateurs qui ne scrollent pas jusqu'en bas de page.

En HTML, l'implémentation est triviale. Il suffit d'ajouter l'attribut loading="lazy" à la balise image :

<img src="image.webp" alt="Description" width="800" height="450" loading="lazy">

Une précision importante : ne jamais appliquer le lazy loading à l'image principale visible au-dessus de la ligne de flottaison (le hero visuel, par exemple). Cette image doit se charger immédiatement pour ne pas dégrader le LCP. Le lazy loading est réservé aux images situées plus bas dans la page.

Deux autres bonnes pratiques techniques à ne pas négliger :

• Toujours définir les attributs width et height dans la balise <img>. Ces dimensions permettent au navigateur de réserver l'espace avant que l'image soit chargée, ce qui évite les décalages de mise en page et améliore directement le score CLS.
• Utiliser un CDN (Content Delivery Network) pour servir tes images depuis un serveur géographiquement proche de l'utilisateur. Sur WordPress, des solutions comme Cloudflare ou BunnyCDN s'intègrent simplement et réduisent significativement les temps de réponse.

Conclusion

Le choix du format d'image n'est pas une décision technique anodine. C'est un levier de performance, de référencement et d'expérience utilisateur qui mérite une vraie réflexion à chaque projet. Et comme on vient de le voir, la logique n'est pas si complexe une fois qu'on a les bons repères.

Pour résumer : WebP est ton format par défaut pour toutes les images matricielles. Il est plus léger que le JPEG et le PNG, supporte la transparence, et est aujourd'hui compatible avec tous les navigateurs modernes. SVG est incontournable pour tout ce qui est vectoriel : logos, icônes, illustrations géométriques. Le PNG garde sa place pour les cas où la transparence complexe ou la compatibilité l'exige. Et le JPEG reste pertinent pour l'emailing et certains contextes d'export.

Au-delà du format lui-même, n'oublie pas que l'optimisation d'une image passe aussi par son nommage, sa compression, son attribut alt et son intégration technique. Ce sont ces détails cumulés qui font la différence sur les Core Web Vitals et sur le positionnement dans les résultats de recherche.

Si tu veux aller plus loin et construire une stratégie d'optimisation complète pour ton site, n'hésite pas à contacter l'équipe NOOKI. On accompagne les entreprises de la région Grand Est et au-delà dans l'optimisation de leur présence web, du SEO technique à la refonte complète.