Les formats d'image expliqués : PNG, JPG, GIF, WebP, SVG

Choisir le bon format d'image est l'un des moyens les plus faciles de rendre une page plus rapide et plus nette. Choisissez mal et vous obtiendrez un logo flou ou une photo pesant cinq fois ce qu'elle devrait. Voici ce dans quoi excelle chaque format courant, pour que vous puissiez associer le format à l'image.

Les deux familles

D'abord, une distinction qui explique tout le reste. Les formats matriciels (PNG, JPG, GIF, WebP) stockent une grille de pixels, ils deviennent donc flous ou pixélisés à l'agrandissement. Les formats vectoriels (SVG) stockent les formes sous forme de mathématiques, ils restent donc nets comme une lame à toute taille. Les photos sont toujours matricielles ; les logos et icônes sont mieux en vectoriel.

Les formats

JPG / JPEG

Compression avec pertes conçue pour les photographies. Taille excellente pour le contenu photographique, pris en charge partout, mais sans transparence et avec des artefacts visibles en cas de surcompression. Le format par défaut pour les photos quand WebP n'est pas une option.

PNG

Sans perte, avec transparence. Parfait pour les logos, icônes, captures d'écran et tout ce qui a des bords nets, du texte ou de la couleur plate. Comme il est sans perte, les photographies enregistrées en PNG ressortent volumineuses.

GIF

Un vieux format limité à 256 couleurs, aujourd'hui utilisé presque exclusivement pour des animations simples. Pour les images fixes, il est surclassé par PNG ; pour l'animation, les formats modernes (WebP animé ou vidéo) sont plus petits et de meilleure qualité.

WebP

Un format moderne qui fait tout : avec ou sans perte, avec transparence et animation. Il produit généralement des fichiers 25 à 35 % plus petits que JPG ou PNG à qualité visuelle égale, et tout navigateur actuel le prend en charge. Pour la plupart des images web aujourd'hui, WebP est le meilleur choix par défaut.

SVG

Graphiques vectoriels définis en XML. Idéaux pour les logos, icônes et illustrations — infiniment évolutifs, minuscules pour des formes simples et stylables en CSS. Non adaptés aux photographies.

Guide de décision rapide

• Photographie → WebP (ou JPG pour une compatibilité maximale)
• Logo ou icône → SVG (ou PNG si vous avez besoin d'une copie matricielle)
• Capture d'écran ou graphique avec texte → PNG (ou WebP)
• Besoin de transparence → PNG, WebP ou SVG
• Animation simple → WebP animé

Une fois un format choisi, notre guide de compression d'images traite de la réduction de taille. Convertissez entre formats avec le convertisseur SVG et le redimensionneur d'images, et réduisez les fichiers avec le compresseur d'images — le tout dans votre navigateur.