Formats d'image : PNG, JPG, WebP ou SVG, lequel choisir et quand

Vous exportez un visuel et la même question revient sans cesse : quel format choisir pour qu'il reste net, léger et fidèle ? PNG, JPG, WebP ou SVG, chacun obéit à sa propre logique, et le mauvais choix suffit à alourdir une page, à pixelliser un logo ou à faire disparaître une transparence. Maîtriser les formats d'image, c'est livrer le bon fichier du premier coup, sans dégrader le rendu ni gonfler le poids inutilement. Voici comment trancher, format par format, situation par situation.

Ce qui distingue vraiment les formats d'image

Avant de comparer les extensions, il faut comprendre trois différences de fond. Elles expliquent à elles seules pourquoi un format brille dans un contexte et s'effondre dans un autre.

• Matriciel ou vectoriel. Le JPG, le PNG et le WebP sont matriciels : ils décrivent une grille de pixels. Agrandissez-les au-delà de leur taille native et le rendu devient flou. Le SVG est vectoriel : il décrit des formes par des équations, donc il reste parfaitement net à n'importe quelle échelle.
• Compression avec ou sans perte. Une compression avec perte (JPG, WebP) jette des détails invisibles à l'oeil pour réduire le poids. Une compression sans perte (PNG, WebP en mode lossless) préserve chaque pixel, mais produit des fichiers plus lourds.
• Transparence. Le canal alpha permet de détourer un élément sur fond transparent. Le PNG, le WebP et le SVG le gèrent, le JPG non.

Gardez ces trois axes en tête : transparence, type de compression, matriciel ou vectoriel. Ils suffisent presque toujours à désigner le bon candidat.

Le JPG : la photo légère pour le web

Le JPG reste le champion incontesté des photographies destinées à l'écran. Sa compression avec perte réduit drastiquement le poids d'une image riche en nuances, dégradés de ciel, teintes de peau, textures, tout en conservant un rendu très propre à un taux de qualité raisonnable, autour de 70 à 80 pour cent.

Choisissez le JPG quand vous publiez une photo pleine de couleurs sans besoin de transparence : visuel de blog, image de couverture, galerie, vignette d'article. En revanche, évitez-le pour un logo, une capture d'écran ou un graphique avec du texte : sur les aplats et les contours nets, sa compression crée des artefacts, ces petits halos gris disgracieux autour des lettres.

Règle simple : si votre visuel ressemble à une photo, le JPG est presque toujours le bon réflexe. S'il ressemble à un dessin ou à une interface, passez votre chemin.

Un dernier point : le JPG se dégrade à chaque réenregistrement. Travaillez toujours à partir de votre fichier source, puis exportez un JPG final. Ne réexportez pas un JPG à partir d'un autre JPG, sous peine d'empiler les pertes. C'est la même discipline que pour un flux de retouche portrait non destructive : on préserve l'original et on n'aplatit qu'à la sortie.

Le PNG : la netteté et la transparence

Le PNG utilise une compression sans perte, ce qui le rend idéal partout où la précision compte plus que la légèreté. Contours francs, textes intégrés, aplats de couleur, captures d'écran d'interface : le PNG conserve chaque pixel exactement là où vous l'avez placé, sans le moindre artefact.

Son deuxième atout est la transparence. Un logo détouré, un badge, un pictogramme à poser sur n'importe quel fond : le canal alpha du PNG gère les bords en douceur, sans liseré blanc. C'est le format à livrer à un client qui doit intégrer votre logo sur des supports variés.

La contrepartie est le poids. Sur une photographie, un PNG pèsera souvent trois à cinq fois plus lourd qu'un JPG équivalent, pour un gain visuel imperceptible. Réservez-le donc aux visuels graphiques, aux images qui exigent de la transparence, et aux captures où le moindre détail doit rester lisible.

Le WebP et l'AVIF : les formats d'image pensés pour la performance

Le WebP est le compromis moderne : il fait aussi bien que le JPG sur les photos et aussi bien que le PNG sur les graphiques, transparence comprise, tout en pesant nettement moins. À qualité visuelle comparable, un WebP est fréquemment 25 à 35 pour cent plus léger que son équivalent JPG, ce qui accélère directement le chargement d'une page.

Concrètement, le WebP gère à la fois la compression avec perte et sans perte, la transparence, et même l'animation. C'est aujourd'hui le format à privilégier pour l'affichage web, tant qu'il est bien pris en charge par les navigateurs de votre audience, ce qui est désormais le cas de la quasi totalité d'entre eux.

L'AVIF va encore plus loin en compression, avec des fichiers souvent plus petits pour une qualité égale, au prix d'un encodage plus lent et d'un support un peu plus récent. Pour livrer un site rapide, une bonne pratique consiste à préparer vos visuels ainsi :

1. Conservez votre source haute qualité en PNG ou en fichier natif.
2. Exportez une version WebP pour l'affichage web courant.
3. Réservez le JPG comme solution de repli si un contexte très ancien l'exige.

Cette hiérarchie évite d'alourdir vos pages sans vous priver de qualité. Elle s'inscrit dans la même logique d'efficacité qu'un montage vidéo optimisé, comme le travail en proxy pour éditer de la 4K sur un PC modeste : on choisit le bon fichier pour la bonne étape.

Le SVG : l'échelle infinie du vectoriel

Le SVG joue dans une autre catégorie. Comme il décrit des formes par des instructions et non par des pixels, il reste parfaitement net d'une favicon minuscule à une bannière géante, sans jamais gagner un octet. C'est le format roi pour les logos, les icônes, les pictogrammes et les illustrations à traits nets.

Ses avantages sont nombreux : un poids souvent ridicule pour des formes simples, une netteté absolue sur les écrans haute densité, et la possibilité de le styliser ou de l'animer directement en code. Un jeu d'icônes en SVG s'adapte à tous les affichages sans que vous ayez à exporter dix tailles différentes.

Ses limites sont tout aussi claires : le SVG n'est pas fait pour la photographie. Une image riche en nuances vectorisée deviendrait un fichier monstrueux et illisible. Réservez-le donc au graphisme géométrique et aux logos. Pour ces éléments d'identité, penser en amont sa palette aide à garder un rendu cohérent, exactement comme le recommande une bonne approche de la théorie des couleurs.

Comment trancher en quelques secondes

Pour choisir sans hésiter, posez-vous les questions dans cet ordre. La première réponse positive désigne votre format.

• Est-ce un logo, une icône ou une illustration à traits nets ? Utilisez le SVG.
• Est-ce une photo destinée au web sans transparence ? Utilisez le WebP, avec un JPG en repli si besoin.
• Ai-je besoin de transparence sur un visuel graphique ? Utilisez le PNG, ou le WebP pour alléger.
• Est-ce une capture d'écran avec du texte ou une interface ? Utilisez le PNG.
• Est-ce destiné à l'impression professionnelle ? Fournissez un fichier haute résolution non compressé, PNG, TIFF ou source native, jamais un WebP web ou un JPG déjà compressé.

Deux réflexes complètent ces règles. D'abord, redimensionnez toujours à la taille d'affichage réelle avant d'exporter : servir une image de 4000 pixels de large dans un emplacement de 800 pixels gaspille du poids pour rien. Ensuite, nommez et rangez vos exports proprement, source d'un côté, versions web de l'autre. Une arborescence de fichiers bien organisée vous évite de renvoyer par erreur une version compressée à la place du master.

Le bon format, à chaque fois

Il n'existe pas de format universel, seulement le format adapté à chaque intention. Le JPG et le WebP pour les photos du web, le PNG pour la netteté et la transparence, le SVG pour tout ce qui est logo et icône, et un fichier haute qualité intact pour l'impression. En gardant en tête la transparence, le type de compression et la distinction matriciel ou vectoriel, vous livrerez toujours un visuel léger et fidèle, sans mauvaise surprise à l'affichage.

Pour aller plus loin et gagner un temps précieux, explorez nos ressources créatives prêtes à l'emploi : modèles, presets, packs graphiques et fichiers sources déjà optimisés pour le web comme pour le print. C'est la façon la plus simple de produire des visuels impeccables sans repartir de zéro à chaque projet.