Choisir le bon format d’image pour le web

Trois questions à se poser d’abord

Sur un vrai site web, le choix de chaque image se résume à trois questions :

1. Que montre-t-elle ? Les photos se prêtent aux formats avec perte comme le JPG, le WebP avec perte et l’AVIF, car les petites erreurs se fondent dans les détails naturels. Les captures d’écran, le texte, les graphiques et les illustrations en aplats de couleur présentent des contours nets, autour desquels la compression avec perte peut laisser des halos visibles : ils conviennent donc aux formats sans perte (PNG, WebP sans perte) ou, s’ils ont été dessinés sous forme vectorielle, au SVG.
2. A-t-elle besoin de transparence ou d’animation ? Le JPG ne gère ni l’une ni l’autre. Le PNG, le WebP et l’AVIF peuvent stocker un canal alpha complet, avec des bords adoucis. Les pixels d’un GIF sont soit entièrement transparents, soit entièrement opaques : les bords arrondis peuvent donc paraître crénelés ou frangés sur un fond coloré. Le GIF, le WebP, l’AVIF et l’APNG (PNG animé) peuvent contenir une animation, mais une courte vidéo est souvent bien plus légère qu’un GIF.
3. Où sera-t-elle publiée ? Sur vos propres pages HTML, vous pouvez proposer plusieurs formats. Un système de gestion de contenu (CMS), une boutique en ligne ou un formulaire d’envoi décide lui-même des formats qu’il accepte et peut convertir les fichiers de son côté : consultez sa documentation à jour. Les logiciels de messagerie diffèrent davantage entre eux que les navigateurs : le JPG et le PNG sont donc plus sûrs pour les newsletters.

Pour comprendre le fonctionnement de chaque format, consultez JPG, PNG, WebP ou AVIF.

Le format selon le contenu : tableau de décision

Lorsque vous servez de l’AVIF ou du WebP sur vos propres pages, conservez une version JPG ou PNG pour les navigateurs et les applications qui ne savent pas les afficher. Lorsqu’une plateforme n’accepte qu’un seul fichier, la colonne « Repli ou alternative » indique généralement le choix sûr. Les favicons obéissent à leurs propres règles ; voir Tailles, formats et balises HTML des favicons.

Pour une boucle de type GIF sur une page web, on utilise couramment à la place un élément <video> muet doté des attributs autoplay, loop, muted et playsinline, car les navigateurs laissent généralement les vidéos muettes démarrer automatiquement. Dans les e-mails, certaines versions de bureau d’Outlook n’affichent que la première image d’un GIF animé : placez donc le message essentiel dans cette première image.

Proposer du WebP ou de l’AVIF avec un format de repli

Sur les pages dont vous écrivez le HTML, l’élément <picture> permet à chaque navigateur de retenir le premier format qu’il sait afficher :

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Bowl of tomato pasta" width="1600" height="1200">
</picture>

Le navigateur lit les éléments <source> dans l’ordre et ignore ceux dont il ne prend pas en charge le type. L’élément <img>, obligatoire, porte le texte alternatif ainsi que la largeur et la hauteur qui permettent au navigateur de réserver la place de l’image ; c’est son fichier qui s’affiche lorsqu’aucune source ne convient. Avec une règle CSS comme img { max-width: 100%; height: auto; }, l’image se réduit malgré tout pour tenir sur les écrans étroits, en gardant ses proportions. Pour proposer en plus plusieurs tailles, indiquez chaque fichier avec sa largeur dans srcset et ajoutez un attribut sizes, comme expliqué dans Redimensionner des images : pixels, proportions et DPI.

De nombreux CMS et CDN d’images savent créer des copies WebP ou AVIF et choisir la bonne pour chaque visiteur. Si c’est le cas du vôtre, envoyez-lui un JPG ou un PNG de haute qualité et laissez-le faire la conversion, plutôt que de lui fournir un fichier que vous avez déjà fortement compressé : l’image ne sera ainsi pas compressée deux fois.

Exemple concret : les images d’un article

Prenons un article de recette comportant trois images, avec une colonne de texte d’au plus 760 pixels CSS de large.

• Photo principale. L’original pris au téléphone mesure 4032 × 3024 pixels, soit environ 12,2 mégapixels. Une colonne de 760 pixels sur un écran à deux pixels physiques par pixel CSS demande environ 1 520 pixels de large : une taille de 1600 × 1200 conserve donc les proportions 4:3 avec 1,92 mégapixel, soit environ 16 % de l’original. Redimensionnez d’abord, puis enregistrez en AVIF ou en WebP avec un JPG de repli ; l’original en pleine taille compte plus de six fois plus de pixels que la version 1600 × 1200, et le navigateur en supprimerait la plupart en réduisant l’image.
• Logo sur fond transparent. Le PNG fourni par le graphiste mesure 1000 × 500 pixels et s’affiche sur 200 pixels CSS de large : 400 × 200 suffit donc pour les écrans à deux pixels physiques par pixel CSS. Gardez-le en PNG ou en WebP ; un JPG remplirait les zones transparentes d’une couleur unie, qui apparaîtrait comme un rectangle sur un en-tête coloré. Si le graphiste peut fournir un export SVG, c’est encore mieux.
• Capture d’écran d’une application de minuteur. Du texte et des aplats de couleur : enregistrez-la en PNG. Un JPG peut faire apparaître des pixels parasites autour des lettres, que les lecteurs remarquent davantage que de petites erreurs dans une photo.

Convertir des fichiers avec le convertisseur d’images LeedyBox

Le convertisseur d’images change le format d’une ou de plusieurs images dans votre navigateur, sans envoyer les données d’image à LeedyBox.

1. Cliquez sur « Choisissez des fichiers ou glissez-déposez-les ici » ou déposez-y des fichiers PNG, JPG, WebP, BMP, GIF ou AVIF. Les autres types, comme le HEIC ou le SVG, ainsi que les fichiers que votre navigateur ne parvient pas à décoder, sont refusés avec un message.
2. Chaque fichier reçoit son propre menu de format (précédé de « To: » sur les écrans larges), réglé sur JPG au départ. Choisissez JPG, PNG, WEBP, BMP, AVIF ou ICO fichier par fichier, ou pour tous les fichiers à la fois avec « Définir tous les formats sur... » dans « Options par lot ».
3. Cliquez sur « Convertir et télécharger ». Un fichier unique est enregistré sous un nom comme logo_converted.webp ; plusieurs fichiers sont regroupés dans leedybox_converted_images.zip.

• Les dimensions en pixels restent identiques, sauf pour l’ICO. Redimensionnez d’abord avec l’outil Redimensionner des images, ou activez « Limiter aussi la largeur et la hauteur » dans l’outil Compresser des images.
• Pour le JPG, le WebP et l’AVIF, le convertisseur demande au navigateur une qualité de 0,92 sur son échelle de 0 à 1, et il n’y a pas de curseur de qualité. Ce réglage privilégie les détails plutôt que la taille du fichier. Il implique aussi que le WebP est enregistré avec perte : il n’existe pas d’option WebP sans perte, convertissez donc les captures d’écran et les visuels riches en texte en PNG. Pour des fichiers plus légers, l’outil de compression propose un curseur de qualité (75 par défaut) et une taille de fichier cible ; voir Les réglages de compression d’image expliqués.
• Les fichiers JPG, comme les fichiers BMP produits par le convertisseur, n’ont pas de transparence : les zones transparentes deviennent blanches. Ces fichiers BMP ne sont pas non plus compressés : ils occupent 3 octets par pixel (chaque ligne étant complétée jusqu’à un multiple de 4 octets), plus un en-tête de 54 octets. Une image de 1200 × 800 devient ainsi un fichier de 2 880 054 octets (environ 2,9 Mo), quel que soit son contenu : le BMP n’a donc pas sa place sur les pages web.
• Un fichier ICO contient une seule image PNG et conserve la transparence. Une image dont un côté dépasse 256 pixels est réduite pour tenir dans 256 × 256 : un logo de 1000 × 500 devient ainsi 256 × 128. Les images plus petites conservent leur taille. Pour obtenir un favicon.ico en 16, 32 et 48 pixels, accompagné d’icônes PNG et Apple Touch, utilisez le générateur de favicon.
• L’AVIF ne peut être sélectionné que si votre navigateur sait créer des fichiers AVIF, ce dont beaucoup de navigateurs sont actuellement incapables ; sinon, il apparaît sous la forme « AVIF (non pris en charge par ce navigateur) ». Si le navigateur ne peut pas créer le format choisi (la sortie WebP dépend elle aussi du navigateur), un message s’affiche et rien n’est enregistré, plutôt que d’enregistrer des données PNG sous une extension erronée. Avec plusieurs fichiers, un seul échec de ce type interrompt tout le lot : aucun fichier ZIP n’est alors créé.
• Chaque image est redessinée puis encodée à nouveau : les données EXIF, la position GPS et le profil colorimétrique de l’original ne sont pas repris, et un GIF, un WebP ou un AVIF animé devient une image fixe qui ne garde qu’une seule image de l’animation. Le convertisseur ne crée ni SVG, ni GIF, ni fichiers animés.

Problèmes courants et solutions

• Un logo transparent est entouré d’un cadre blanc ou noir. Il a probablement été enregistré en JPG ou en BMP sans transparence. Utilisez plutôt le PNG ou le WebP ; voir pourquoi la transparence disparaît en JPG.
• Le PNG est bien plus lourd que le JPG dont il provient. Le PNG enregistre chaque pixel à l’identique, y compris le bruit et les artefacts de compression du JPG, et la conversion ne restitue pas les détails que le JPG a déjà perdus. Utilisez le WebP ou le JPG pour les photos.
• Un formulaire d’envoi refuse le WebP ou l’AVIF. Certains formulaires n’acceptent que le JPG et le PNG. Convertissez les photos en JPG et les graphiques transparents en PNG. Renommer l’extension ne change pas le format.
• Le fichier WebP est à peine plus léger que le JPG, voire plus lourd. Le JPG d’origine était peut-être déjà fortement compressé, et la qualité 0,92 du convertisseur conserve beaucoup de détails, y compris les artefacts propres au JPG, dont le stockage coûte des octets. Si le fichier reste trop lourd dans un format comme dans l’autre, l’image est peut-être encore à la taille de l’appareil photo. Redimensionnez-la à sa taille d’affichage, puis passez par l’outil de compression et comparez les résultats.
• Les couleurs paraissent plus ternes que dans l’original. Le convertisseur dessine chaque image sur un élément canvas du navigateur, qui travaille par défaut en sRGB, et ne conserve pas le profil colorimétrique d’origine. Les photos dans un espace colorimétrique plus étendu, comme Display P3 ou Adobe RGB, peuvent perdre une partie de leurs couleurs les plus saturées, ce qui se voit surtout sur les écrans à large gamut. Exportez une copie sRGB depuis votre logiciel de retouche photo, vérifiez-la dans ce logiciel, puis convertissez cette copie.
• Une photo HEIC prise avec un téléphone n’est pas acceptée. Le HEIC ne figure pas dans la liste du convertisseur. De nombreux téléphones permettent d’exporter ou de partager les photos en JPG ; convertissez cette copie.

À vérifier avant de publier

• Ouvrez la page dans deux navigateurs et sur un téléphone. Avec <picture>, testez aussi le format de repli en supprimant temporairement les sources AVIF et WebP.
• Comparez le nouveau fichier à l’original en taille réelle, en observant les visages, le texte et les dégradés.
• Dans le panneau Réseau des outils de développement du navigateur, vérifiez quel fichier a été téléchargé et quelle est sa taille.
• Si votre site propose un mode sombre, regardez les images transparentes sur fond clair comme sur fond sombre.
• Conservez les originaux et convertissez à partir d’eux ; réenregistrer un fichier avec perte ajoute de nouvelles erreurs aux anciennes.

Questions fréquentes