Trois formats couvrent presque toutes les photos sur le web aujourd'hui JPG est la valeur par défaut depuis trois décennies WebP est arrivé en 2010 et est maintenant affiché par chaque navigateur actuel AVIF est le plus récent des trois, construit sur un codec vidéo, et il fait généralement les plus petits fichiers Un audit de performance vous dira de " ; servez des images dans les formats modernes" ;, et puis un formulaire de téléchargement ou un client de messagerie refusera le fichier moderne que vous avez fait.
Choisir entre eux est moins sur le format qui est le meilleur et plus sur l'endroit où l'image va Une image de héros sur une page de destination, une photo de produit dans une liste de marché, et une image attachée à un courriel ont des réponses différentes Ce guide compare les trois sur les attributs qui le décident : taille de fichier, qualité, transparence, profondeur de couleur, animation, coût d'encodage et support en dehors du navigateur Ensuite il donne une table de décision et montre comment convertir entre eux.
tl;dr : Pour les images sur un site Web, servez AVIF d'abord avec WebP comme solution de secours et JPG comme dernier recours, en utilisant le
<picture>négociation d'élément ou de serveur ; AVIF est généralement le plus petit, WebP est proche derrière et plus rapide à encoder, et JPG s'ouvre partout Pour les images qui quittent le navigateur (email, uploads, print, bureautique software), utilisez JPG, ou PNG quand la transparence compte Pour faire accepter des fichiers d'autres programmes, le Convertisseur AVIF en JPG et WebP vers JPG exécutent côté client, rien de téléchargé, gratuit, pas d'inscription ; JPG vers WebP et PNG vers WebP vont dans l'autre sens.
Que sont AVIF, WebP et JPG ?
Tous trois sont des formats d’images raster pour les photographies et diffèrent principalement par l’âge et la conception de leur compression.
JPG (JPEG) est la méthode d'image fixe standardisée Recommandation UIT-T T.81 en 1992. il divise l'image en blocs de 8x8 pixels, transforme chacun avec une transformation en cosinus discrète et élimine le détail haute fréquence que l'œil remarque le moins. Les fichiers sont généralement enveloppés dans le conteneur JFIF UIT-T T.871.
Webp est Google' ; s format, maintenant spécifié dans RFC 9649. Son mode avec perte utilise le codage de l'image clé du codec vidéo VP8, et il dispose d'un mode sans perte séparé, plus la transparence et l'animation Le guide sur qu'est-ce que WebP et pourquoi les images enregistrées sortent sous forme de.webp le recouvre en profondeur.
avif est le format de fichier image AV1, publié par l'Alliance for Open Media sous le nom de Spécification AVIF. Il stocke les images codées avec le Codec vidéo AV1 à l'intérieur d'un conteneur HEIF, la même structure de boîte que celle utilisée par les photos iPhone HEIC AV1 est proposée sous une licence de brevet libre de droits de l'Alliance for Open Media, ce qui est l'une des raisons pour lesquelles les navigateurs ont adopté AVIF plus rapidement que HEIC.
AVIF vs WebP vs JPG : le tableau de comparaison
AVIF est en tête en termes de compression et de capacité, JPG est en tête en termes de compatibilité et de vitesse d'encodage, et WebP se situe entre eux sur presque toutes les lignes.
| Attribuer | avif | Webp | JPG |
|---|---|---|---|
| Spécification | AOMedia AVIF, codec AV1 | IETF RFC 9649 | UIT-T T.81 et T.871 |
| Introduit | 2019 | 2010 | 1992 |
| Compression | Perte ou sans perte | Perte ou sans perte | lâche |
| Taille typique de la photo | Plus petit | Petit | Le plus grand des trois |
| Profondeur des bits | 8, 10 ou 12 bits par canal | 8 bits par canal | 8 bits par canal en pratique |
| HDR et couleur large | oui | non | non |
| transparence | Alpha complet | Alpha complet | nul |
| Animation | Séquences d'images | oui | non |
| Vitesse d'encodage | Lent, lourd en CPU à un effort élevé | Modéré | harde |
| Afficheur navigateur | Chrome 85, Firefox 93, Safari 16, Edge 121 et versions ultérieures | Tous les navigateurs actuels | Universel |
| Applications de bureau, e-mail, formulaires de téléchargement | Plus faible | Patch | Universel |
| Meilleur usage | Les plus grandes images Web où les octets comptent le plus | Images Web générales, large repli | Tout ce qui quitte le navigateur |
La ligne qui surprend les gens est la vitesse d'encodage AVIF' ; s les petits fichiers proviennent d'un encodeur qui cherche fort la meilleure façon de coder chaque bloc, et cette recherche prend du temps Une étape de construction qui convertit des milliers d'images de produits en WebP en quelques minutes peut prendre beaucoup plus de temps pour AVIF à un réglage d'effort élevé Pour un site qui encode une fois et sert des millions de fois, le trade en vaut généralement la peine Pour les images générées à la volée par demande, il se peut qu'il ne le soit pas.
Quel format fait les plus petits fichiers ?
AVIF fabrique généralement les plus petits fichiers avec une qualité visuelle similaire, WebP est le suivant et JPG est le plus grand. La taille de l'écart dépend fortement de l'image et des paramètres de l'encodeur.
Pour WebP, il existe un point de référence publié : Google' ;s Aperçu WebP signale des fichiers WebP avec perte 25 à 34 % plus petits que JPEG comparable à une qualité SSIM équivalente, et WebP sans perte 26 % plus petit que PNG. AVIF améliore généralement à nouveau le WebP pour les photographies, avec les gains les plus importants sur les dégradés lisses, le ciel et la peau, où JPEG' ; les blocs 8x8 apparaissent en premier.
Trois avertissements gardent ces chiffres honnêtes.
- Les numéros de qualité ne correspondent pas entre les formats. Un JPG à la qualité 80, un WebP à 80 et un AVIF à 80 ne sont pas la même qualité visuelle, et différents encodeurs pour le même format sont également en désaccord Comparez les fichiers en les regardant, ou par une métrique telle que SSIM, jamais par la valeur du curseur.
- Les images à faible détail permettent d'économiser moins. Une illustration plate ou un JPEG déjà fortement comprimé n'a plus grand-chose à presser.
- Réencoder un fichier avec perte empile les pertes. La conversion d'un JPG en AVIF ou WebP commence à partir d'une image qui a déjà perdu des détails Encodez à partir du fichier original de l'appareil photo, PNG ou maître de haute qualité chaque fois que vous le pouvez.
Dans quelle mesure le choix du format est-il important pour le poids de la page ?
C'est ce qui compte le plus sur les pages riches en images, car les images représentent généralement la plus grande part de ce qu'un visiteur télécharge. L'arithmétique est simple. Une page de catalogue avec 40 photos de produits à environ 400 Ko chacune contient 16 Mo d'images sous forme de JPG. Au niveau des 25 à 34 % d'économies de rapports Google pour WebP, le même ensemble se situe entre environ 10,5 et 12 Mo. AVIF se coupe généralement plus loin.
Sur une connexion rapide de bureau, la différence est modeste Sur un téléphone sur un réseau mobile lent, plusieurs mégaoctets est l'écart entre une page qui s'installe rapidement et une page que les visiteurs abandonnent, et les images près du haut de la page alimentent directement la vitesse à laquelle le plus grand élément visible se rend.
Le format n'est pas le seul levier, et souvent pas le plus grand Envoi d'une photo de 4000 px de large à un emplacement de 400 px gaspille beaucoup plus d'octets que le choix de WebP par rapport à AVIF. Redimensionner d'abord à la taille affichée, fournir srcset variantes pour différents écrans, images chargées paresseuses sous le pli, puis choisissez le format. Le faire dans l’autre ordre optimise la mauvaise chose.
En quoi diffèrent-ils par la qualité et les artefacts ?
Chaque format échoue à sa manière lorsqu'il est poussé vers de petites tailles, et connaître l'échec vous aide à choisir.
JPG se brise en blocs 8x8 visibles et " ;ringing" ;, de faibles ondulations autour des arêtes vives comme le texte sur une photo. WebP' ; le mode avec perte adoucit les détails et, parce qu'il stocke la couleur à demi-résolution, peut laisser des franges colorées autour de fines lignes rouges ou bleues. AVIF a tendance à brouiller la texture fine plutôt qu'à se bloquer, donc un AVIF fortement comprimé semble lisse et légèrement cireux, ce qui est moins répréhensible sur les photos et plus visible dans le tissu, les cheveux et le feuillage.
Pour les graphiques avec des bords durs, des couleurs plates et du texte, aucun des modes avec perte n'est idéal. PNG ou WebP sans perte garde les bords exacts.
Le comportement de chargement diffère aussi T.81 définit un mode progressif pour JPEG, dans lequel une version floue de l'image entière apparaît en premier et s'affine à mesure que plus de données arrivent, donc un grand JPG progressif se sent rapide sur une connexion lente avant même qu'il ne se termine WebP et AVIF comme couramment servi dessinent qu'une fois que suffisamment de fichier est arrivé, ce que leur taille plus petite compense habituellement Sur les très grandes images de héros sur de mauvaises connexions, cette différence peut être visible, et c'est une raison de plus de redimensionner avant de choisir un format.
Où se situent la PNG et le GIF ?
Un format photo non plus, et aucun des deux n'est en concurrence directe avec les trois ci-dessus PNG, défini dans le Spécification W3C PNG[traduction], est sans perte : le bon choix pour les captures d'écran, les diagrammes, les logos et les masters d'édition, et le mauvais pour les photographies, qu'il stocke à plusieurs fois la taille d'un JPG. Le GIF est limité à 256 couleurs par image et survit principalement pour les courtes animations dans des endroits qui ne joueront rien de plus récent.
Sur un site Web, les deux sont généralement mieux servis en tant que WebP ou AVIF : sans perte ou avec perte de haute qualité pour les graphiques de style PNG, WebP animé pour les clips de style GIF. En dehors du navigateur, PNG reste le format sûr pour tout ce qui est transparent, puisque JPG ne peut pas le contenir.
Quel format prend en charge la transparence, le HDR et l'animation ?
AVIF prend en charge les trois, WebP prend en charge la transparence et l'animation mais pas HDR, et JPG ne prend en charge aucun d'entre eux.
Transparence. AVIF stocke alpha comme image auxiliaire, et WebP a un canal alpha dans les modes à la fois avec perte et sans perte, Soit peut contenir une découpe de produit avec un bord souple à une fraction d'une taille PNG' ; s. JPG n'a pas de transparence, donc toute zone transparente doit être remplie d'une couleur unie lors de la conversion vers elle.
HDR et couleur large. AVIF peut utiliser 10 ou 12 bits par canal, ce qui est ce dont les photos HDR des téléphones et appareils photo récents ont besoin pour éviter les bandes dans un ciel lumineux WebP et JPG sont 8 bits.
Animation. Les animations WebP sont largement utilisées pour remplacer GIF. AVIF définit les séquences d'images, bien que la prise en charge de l'AVIF animé dans les logiciels extérieurs aux navigateurs soit plus fine.
Où chaque format échoue-t-il encore ?
La prise en charge à l'intérieur des navigateurs actuels est résolue pour les trois. Le support partout ailleurs est l'endroit où le choix mord.
Les affichages AVIF dans Chrome de la version 85, Firefox de 93, Safari de 16, et Edge de 121. navigateurs plus anciens, visionneuses de photos de systèmes d'exploitation plus anciennes, de nombreuses suites bureautiques, et une longue liste de formulaires de téléchargement ne l'acceptent pas Enregistrer un AVIF d'une page web et le déposer dans une présentation est l'échec classique.
WebP est plus loin Chaque navigateur actuel l'affiche et la plupart des systèmes d'exploitation modernes l'ouvrent, mais certains clients de messagerie, services d'impression et anciens logiciels de bureau le refusent toujours.
JPG s'ouvre sur pratiquement tous les appareils, applications et formulaires C'est pourquoi il reste le bon format pour toute image dont vous ne contrôlez pas la destination.
Quel format utiliser ? une table de décision
Décidez d'abord par destination, puis par contenu.
| situation | manier | pourquoi |
|---|---|---|
| Héros et images de produits sur votre propre site | AVIF, avec des fallbacks WebP et JPG | Les octets les plus petits sur les images les plus lourdes |
| Images générales du site, pipeline simple | WebP, avec repli JPG | Prise en charge quasi universelle du navigateur, rapide à coder |
| Images générées par demande | WebP ou JPG | Le coût de codage AVIF ajoute de la latence |
| Photos avec HDR ou couleur large | avif | Un seul des trois avec 10 et 12 bits |
| Graphiques transparents sur le web | AVIF ou WebP | Alpha à une fraction de PNG' ; taille de s |
| Pièces jointes aux courriels | JPG | Chaque client l'ouvre |
| Téléchargez des formulaires, des places de marché, des portails d'identification | JPG | Les listes d'autorisation incluent rarement AVIF ou WebP |
| Impression et documents de bureau | JPG, ou PNG pour les graphiques | Support logiciel |
| Édition des masters et des archives | Format original, PNG ou TIFF | Évitez les encodages avec pertes répétés |
Le modèle est simple : formats modernes pour la livraison, JPG pour l'échange, sans perte pour les maîtres.
Comment servir AVIF et WebP avec un repli JPG ?
Utilisez le <picture> élément. Le navigateur parcourt le <source> listez dans l'ordre et prenez le premier type qu'il prend en charge, en revenant au <img>: tel que défini par le WHATWG HTML picture élément:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Un navigateur avec support AVIF télécharge uniquement l'AVIF. Un sans AVIF mais avec WebP télécharge le WebP, et tout le reste obtient le JPG. Aucun format n'est téléchargé deux fois.
L'alternative est la négociation côté serveur : le navigateur envoie un Accept en-tête tel que image/avif,image/webp,*/*« , et le serveur ou le CDN renvoie le meilleur format dont il dispose à partir d'une seule URL. Cela permet de simplifier le balisage mais nécessite que le cache varie sur cet en-tête, comme décrit dans HTTP' ; s règles de négociation de contenu RFC9110.
Pour générer les trois versions dans une étape de construction, la bibliothèque Node.js les écrit toutes :
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
Les valeurs de qualité diffèrent exprès, puisque les échelles ne correspondent pas entre les formats Vérifiez visuellement la sortie avant de vous installer sur les chiffres.
Comment convertir-vous entre AVIF, WebP et JPG sans télécharger ?
Utilisez un convertisseur côté client, qui décode et ré-encode l'image à l'intérieur de l'onglet du navigateur afin que le fichier ne quitte jamais votre appareil Les convertisseurs Toolz sont divisés par direction.
De AVIF à quelque chose que d'autres programmes acceptent. le Convertisseur AVIF en JPG est le correctif pour un AVIF enregistré à partir d'un site Web qu'un document ou un formulaire refuse Les zones transparentes sont remplies de blanc, et une note sous le résultat le dit Le curseur Qualité va de 10 à 100 et commence à 90. lorsque l'image a un fond transparent qui doit survivre, convertissez l'AVIF en PNG au lieu de cela, qui conserve le canal alpha et stocke les pixels décodés sans perte.
Décodage AVIF utilise le navigateur' ; propre décodeur AVIF, le convertisseur a donc besoin d'un navigateur qui affiche AVIF : Chrome, Edge, Firefox ou Safari 16 et versions ultérieures. Si le navigateur ne peut pas ouvrir le fichier, la ligne le dit Un AVIF animé est lu comme une image fixe.
De WebP à JPG. Pour les mêmes raisons, WebP à JPG transforme un .webp téléchargé en un fichier qui s'ouvre partout, avec le même remplissage blanc pour plus de transparence.
De JPG et PNG à WebP. En allant dans l'autre sens, JPG vers WebP réduit les photos pour l'édition, et PNG vers WebP fait de même pour les captures d'écran et les graphiques transparents tout en conservant le canal alpha. Encodage utilise le navigateur' ; s encodeur de canevas Current Chrome, Edge et Firefox peuvent écrire WebP ; un navigateur qui ne peut pas obtenir une erreur claire au lieu d'un PNG renommé en.webp.
Ce que les convertisseurs ne font pas. Toolz lit AVIF mais ne l'écrit pas, car les navigateurs n'exposent pas de manière fiable un encodeur AVIF aux pages Web Pour produire des fichiers AVIF, utilisez un outil de construction tel que l'exemple précis ci-dessus Convertisseur d'images accepte JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG et PDF et écrit JPG, PNG, WebP, GIF, ICO, PDF et SVG, qui couvre les lots mixtes.
Chaque conversion est dessinée à travers un canevas, donc les données EXIF, les coordonnées GPS et les profils de couleurs ne sont pas copiés dans la sortie Les images de plus de 100 mégapixels sont refusées avec un message plutôt que de faire planter l'onglet Les outils sont gratuits, pas d'inscription, avec une limite de conversion quotidienne.
La conversion entre AVIF, WebP et JPG perd-elle de la qualité ?
La conversion dans un format avec perte perd un peu de détails à chaque fois, et la conversion dans un format sans perte ne perd rien de plus La direction décide qui s'applique.
| transformation | Étape perdue? | Ce qui change |
|---|---|---|
| AVIF à JPG | oui | Deuxième code avec perte ; transparence remplie de blanc ; fichier généralement plus grand |
| AVIF à PNG | non | Pixels décodés conservés exactement ; transparence conservée ; fichier beaucoup plus grand |
| WebP à JPG | oui | Deuxième code avec perte ; transparence remplie de blanc |
| JPG vers WebP | oui | Deuxième encodage avec perte au-dessus de JPEG' ;s ; fichier généralement plus petit |
| PNG vers WebP | Habituellement, avec WebP avec perte | Transparence conservée ; fichier généralement beaucoup plus petit |
| N'importe lequel d'entre eux à AVIF | Oui, dans l'usage typique | Plus petit fichier ; encodage le plus lent |
Deux conséquences pratiques s'ensuivent Un fichier qui a traversé plusieurs conversions avec perte se dégrade un peu à chaque étape, alors évitez les allers-retours tels que JPG vers WebP vers JPG Et la taille d'un fichier converti vous en dit peu sur sa qualité : un AVIF converti en JPG s'agrandit sans s'améliorer, car l'encodeur JPG passe plus d'octets à décrire la même image déjà compressée.
À un réglage de qualité autour de 90, une seule étape supplémentaire avec perte est très difficile à voir sur les photos ordinaires. Les pertes deviennent visibles avec des conversions répétées, des paramètres de mauvaise qualité ou des images avec du texte fin et des arêtes vives.
Pourquoi won' ; un AVIF ou un WebP enregistré s'ouvre-t-il ?
Le programme qui l'ouvre n'a pas de décodeur pour le format Un navigateur actuel affiche l'image car il a négocié ce format avec le serveur, mais le fichier sur le disque est ensuite remis à un logiciel avec une liste de formats plus ancienne ou plus étroite : une suite bureautique, un visualiseur de photos plus ancien, un client de messagerie ou un formulaire de téléchargement & #39 ; s liste d'autorisation.
Renommer le fichier en .jpg n'aide pas Les octets commencent quand même par un AVIF ftyp boîte ou un WebP RIFF header, et un programme qui attend JPEG ne trouve aucune donnée JPEG La conversion du fichier est le correctif, et il vaut également la peine de vérifier si le site offre un lien de téléchargement direct, qui sert parfois le JPG ou PNG original plutôt que la version négociée.
JPG est-il obsolète ?
N° JPG est obsolète uniquement car le format qu'un site Web doit envoyer à un navigateur actuel, et même là, il reste la solution de repli dans chaque <picture> élément. En tant que format d'échange, pour le courrier électronique, les formulaires, l'impression, les documents de bureau et tout ce qui se dirige vers un logiciel que vous ne contrôlez pas, c'est toujours la bonne valeur par défaut, et ni AVIF ni WebP ne l'ont remplacé.
La même logique s'applique à l'autre format qui confond les personnes en dehors du navigateur Les photos d'iPhone sont HEIC, un frère ou une sœur d'AVIF dans le même conteneur HEIF, et la comparaison de HEIC contre JPG explique pourquoi ces fichiers ne s'ouvrent pas sous Windows. Chaque convertisseur d'image est répertorié sur le hub d'outils d'image.
