Les formats d’images sur le Web : JPG, PNG, GIF, WEBP, SVG

Mis à jour le 22 octobre 2026

JPG pour les photos, PNG pour la transparence et les captures d'écran, SVG pour les logos et les icônes, WebP ou AVIF pour alléger tout le reste, GIF presque plus jamais : voilà la règle en une ligne. Cette page explique quand chaque format est le bon choix, ce qu'il permet (transparence, animation, compression) et comment convertir vos images. Pour les réglages propres à WordPress, voir la page dédiée en fin d'article.

Le tableau récapitulatif

Format	Usage idéal	Transparence	Animation	Compression
JPG (JPEG)	Photos	Non	Non	Avec perte
PNG	Captures d'écran, logos en pixels, images avec transparence	Oui	Non (sauf variante APNG)	Sans perte
GIF	Petites animations simples (usage en déclin)	Oui, sans dégradé	Oui	Sans perte, 256 couleurs maximum
SVG	Logos, icônes, illustrations simples	Oui	Possible (CSS, SVG animé)	Format vectoriel
WebP	Photos et images d'interface, en remplacement du JPG et du PNG	Oui	Oui	Avec ou sans perte
AVIF	Photos, quand le poids compte avant tout	Oui	Oui	Avec ou sans perte

Tous ces formats sont lus par les navigateurs actuels. Selon la documentation MDN sur les formats d'images, le WebP fonctionne dans tous les navigateurs modernes (Safari depuis la version 14 sur macOS Big Sur), et l'AVIF depuis Chrome 85, Firefox 93, Safari 16.1 et Edge 121.

JPG : le format des photos

Le JPG (ou JPEG) est conçu pour les images à tons continus, c'est-à-dire les photos. Sa compression avec perte supprime des détails que l'œil remarque peu : une photo enregistrée en qualité 70 à 80 pèse souvent plusieurs fois moins qu'en qualité 100, sans différence visible à taille normale.

Ses limites : il ne gère pas la transparence, et il abîme les bords nets. Un texte, un logo ou une capture d'écran en JPG présente des bavures autour des lettres. Chaque nouvel enregistrement en JPG dégrade aussi un peu plus l'image : retouchez à partir de l'original, pas d'un JPG déjà compressé.

PNG : netteté parfaite et transparence

Le PNG compresse sans perte : l'image enregistrée est identique pixel pour pixel à l'original. Il gère la transparence complète, y compris les bords adoucis (ombres, contours lissés).

C'est le bon choix pour les captures d'écran, les schémas et les logos lorsque vous n'avez pas de version vectorielle. Pour une photo, en revanche, un PNG pèse beaucoup plus lourd qu'un JPG ou un WebP de qualité équivalente.

GIF : à réserver aux cas particuliers

Le GIF date de la fin des années 1980. Il est limité à 256 couleurs et sa transparence est binaire (un pixel est soit transparent, soit opaque, sans dégradé). S'il reste connu pour les animations, une vidéo courte (MP4 ou WebM) ou un WebP animé donne un fichier bien plus léger et de meilleure qualité. Sur un site, le GIF n'a presque plus d'usage.

SVG : le format vectoriel

Le SVG ne décrit pas des pixels mais des formes (lignes, courbes, couleurs) dans un fichier texte. Conséquences :

l'image reste parfaitement nette à toutes les tailles, sur tous les écrans ;
un logo ou une icône en SVG pèse souvent quelques kilo-octets ;
les couleurs peuvent être modifiées en CSS, ce qui est pratique pour les icônes.

Le SVG ne convient pas aux photos. Et comme un fichier SVG peut contenir du code, n'acceptez que des SVG de sources sûres : c'est la raison pour laquelle WordPress refuse leur envoi par défaut.

WebP et AVIF : les formats modernes

Le WebP, créé par Google, remplace à la fois le JPG et le PNG : compression avec ou sans perte, transparence, animation, pour des fichiers généralement plus légers que leurs équivalents JPG ou PNG.

L'AVIF, plus récent, compresse encore mieux, surtout les photos. Il est plus long à encoder et moins d'outils l'exportent, mais tous les navigateurs actuels le lisent.

La documentation MDN recommande de privilégier WebP ou AVIF pour les images matricielles, en gardant éventuellement une version JPG ou PNG de secours avec la balise HTML <picture>. Dans un CMS, ce travail est généralement automatisé par une extension.

Vous croiserez aussi le HEIC, format des photos d'iPhone : il n'est pas fait pour être publié tel quel. Convertissez-le en JPG ou en WebP (WordPress le fait automatiquement depuis la version 6.7 si le serveur le permet).

Quel format pour quelle image ?

Photo (bandeau, article, produit) : WebP ou AVIF, sinon JPG.
Logo : SVG si vous avez la version vectorielle, sinon PNG (ou WebP sans perte).
Icône : SVG.
Capture d'écran, schéma, image avec du texte : PNG, ou WebP sans perte.
Image détourée sur fond transparent : PNG ou WebP.
Animation : vidéo courte ou WebP animé plutôt que GIF.

Comment convertir vos images

Squoosh (squoosh.app) : outil gratuit de Google Chrome Labs qui fonctionne dans le navigateur, sans envoyer l'image sur un serveur. Il compare en direct l'original et la version compressée, et exporte notamment en JPG, PNG, WebP et AVIF.
Photoshop : export en JPG et PNG, et enregistrement en WebP depuis la version 23.2 (voir Créer et modifier des images dans Photoshop).
Photopea : éditeur gratuit dans le navigateur, qui ouvre la plupart des formats et exporte notamment en JPG, PNG, SVG et PDF.
Figma : export des maquettes et éléments en PNG, JPG, SVG ou PDF.

D'autres outils sont listés dans les logiciels et outils de design.

Et dans WordPress ?

WordPress accepte JPG, PNG, GIF, WebP, AVIF (selon le serveur) et convertit le HEIC, mais pas le SVG sans extension. Le détail est dans Les formats d'images dans WordPress, et la méthode pour alléger les images d'un site dans Optimiser des images dans WordPress. Les membres de la formation WordPress retrouvent aussi une démonstration de compression JPG dans la leçon Les formats d'image sur le Web.