WebP, AVIF, JPG ou PNG : lequel choisir
- WebP : le choix sûr. Il pèse 25 à 35 % de moins qu’un JPG de qualité comparable, gère la transparence et s’ouvre dans tous les navigateurs actuels.
- AVIF : compresse encore davantage, surtout les photos, au prix d’un encodage plus lent. Tous les navigateurs modernes l’affichent, mais tous ne savent pas le créer : si le vôtre ne le peut pas, l’option est désactivée.
- JPG : quand il faut une compatibilité maximale, comme dans un e-mail ou un vieux logiciel. Il ne gère pas la transparence : les zones transparentes deviennent blanches.
- PNG : sans perte. Pour les captures d’écran, les logos ou les images avec du texte ; pour les photos, il est trop lourd.
Quelle qualité choisir
Entre 75 et 85, c’est le bon compromis pour les photos sur le web : au-delà, le fichier grossit beaucoup pour une différence à peine visible. En AVIF, vous pouvez descendre plus bas, jusqu’à 60 ou 65, pour un résultat comparable. Surveillez le pourcentage d’économie et comparez les vignettes : si une image devient plus lourde que l’original, c’est qu’elle était déjà bien compressée.
Réduire les dimensions fait gagner encore plus que la qualité. Une photo de smartphone fait 4000 pixels de large ; pour un site, 1600 ou 2000 suffisent en général. Indiquez une valeur dans « Largeur maximale » et les images plus grandes seront réduites en gardant leurs proportions.
Rien n’est envoyé
La plupart des convertisseurs en ligne envoient vos images sur leur serveur. Pas celui-ci : la conversion est faite par
votre navigateur avec l’API canvas, et les fichiers ne quittent pas votre appareil. Une fois la page
chargée, il fonctionne même hors ligne. La contrepartie : le résultat dépend de l’encodeur de votre navigateur, et les
métadonnées EXIF (date, appareil, localisation) sont perdues, ce qui est plutôt un avantage sur un site web.
Servir plusieurs formats
Pour donner de l’AVIF aux navigateurs qui le gèrent et un JPG aux autres, utilisez <picture>. Les
images du générateur ximg.es peuvent être demandées dans chacun de ces formats en changeant
l’extension, pratique pour tester le code avant d’avoir les vraies images :
<picture>
<source srcset="https://ximg.es/1200x800.avif" type="image/avif">
<source srcset="https://ximg.es/1200x800.webp" type="image/webp">
<img src="https://ximg.es/1200x800.jpg" width="1200" height="800" alt="">
</picture>