Juin 17 2022

Webp ou AVIF ?

Utilisation de formats d'image modernes : AVIF et WebP un guide très rapide.

Webp contre AVIF

Dans cet article, nous allons souligner comment les formats d'image modernes (AVIF ou WebP) peuvent am√©liorer la compression jusqu'√† 50 % et fournir une meilleure qualit√© par octet tout en conservant un bel aspect accrocheur. Nous comparerons ce qui est possible avec des objectifs de haute qualit√©, de faible qualit√© et de taille de fichier.

Sur aux images optimisées Webp, nous en parlions depuis longtemps déjà au tout début en décrétant très clairement l'importance de l'utilisation de formats optimisés afin de répondre aux exigences de vitesse et d'améliorer le score Pagespeed et le Vitaux Web de base.

Les images sont le type de ressource les plus populaires sur le web et sont souvent les plus volumineux. Les utilisateurs appr√©cient les visuels de haute qualit√©, mais il faut veiller √† fournir des images de h√©ros, des photos de produits et des m√®mes de chat aussi efficacement que possible.

Si vous optimisez pour Vitaux Web , vous serez peut-√™tre int√©ress√© de savoir ce que les images repr√©sentent sur le 42 % de l'√©l√©ment Peindre plus grand pour les sites Web. Les indicateurs cl√©s centr√© sur l'utilisateur ils d√©pendent souvent de la taille, du nombre, de la disposition et de la priorit√© de chargement des images sur la page. C'est pourquoi une grande partie de notre guide des performances parle d'optimisation d'image.

Vous trouverez ci-dessous une liste de recommandations.

  • AVIF est un premier choix solide si la compression avec perte basse fid√©lit√© est acceptable et que les √©conomies de bande passante sont votre priorit√© num√©ro un. En supposant que les vitesses d'encodage / d√©codage r√©pondent √† vos besoins.
  • WebP est plus largement pris en charge et peut √™tre utilis√© pour le rendu d'images normales lorsque des fonctionnalit√©s avanc√©es telles qu'une large gamme de couleurs ou des superpositions de texte ne sont pas n√©cessaires.
  • AVIF peut ne pas √™tre en mesure de compresser des images non photographiques, PNG ou WebP sans perte de donn√©es. Les √©conomies de compression de WebP peuvent √™tre inf√©rieures √† JPEG pour une compression avec perte haute fid√©lit√©.
  • Si AVIF et WebP ne sont pas des options viables, envisagez d'√©valuer MozJPEG (optimiser les images JPEG), OxiPNG (images non photographiques) ou JPEG 2000 (images photographiques avec ou sans perte).
  • Am√©lioration progressive par <picture>permet au navigateur de choisir le premier format pris en charge dans l'ordre de pr√©f√©rence. Cette mise en Ňďuvre est grandement simplifi√©e lors de l'utilisation de CDN d'images o√Ļ le Accepter l'en-t√™te et la n√©gociation de contenu (par exemple, formatage et qualit√© automatiques) peut fournir la meilleure image.

Pourquoi avons-nous besoin de formats modernes ?

Nous avons un assez grand choix de formats d'image parmi lesquels choisir lors du rendu d'images sur le Web. La différence essentielle entre les formats d'image est que le codec d'image utilisé pour encoder ou décoder chaque type d'image est différent. Un codec d'image représente l'algorithme utilisé pour compresser et encoder des images dans un type de fichier spécifique et les décoder pour les afficher à l'écran.

CODEC D'√ČVALUATION

Vous pouvez juger du format d'image qui vous convient en fonction de plusieurs paramètres.

  • Compression
    L'efficacité d'un codec peut principalement être mesurée par la quantité de compression qu'il peut atteindre. La compression obtenue est pertinente car plus la compression est élevée, plus la taille du fichier est petite et moins il faut de données pour transférer l'image sur le réseau. La taille de fichier plus petite affecte directement la métrique LCP (Largest Contentful Paint) de la page, car les ressources d'image nécessaires au chargement de la page sont plus rapides.
  • Qualit√©
    Id√©alement, la compression ne devrait entra√ģner aucune perte de donn√©es d'image ; il devrait √™tre sans perte. Les formats de compression qui entra√ģnent une certaine perte de donn√©es d'image, r√©duisant ainsi la qualit√© de l'image, sont appel√©s avec perte. Vous pouvez utiliser des outils comme DSSIM o simulacres pour mesurer le similitude structurelle entre les images et juger si la perte de qualit√© est acceptable.
  • Vitesse d'encodage / d√©codage
    Les algorithmes de compression complexes peuvent nécessiter plus de puissance de traitement pour encoder/décoder les images. Cela peut être compliqué selon que le codage est fait à l'avance (statique / build) ou à la volée (à la demande). Bien que l'encodage puisse être ponctuel dans le cas d'images statiques, le navigateur doit toujours décoder les images avant de les restituer. Un processus de décodage complexe peut ralentir le rendu de l'image.

Le degr√© de compression, la qualit√© de l'image et la vitesse de d√©codage sont des facteurs cl√©s √† prendre en compte lors de la comparaison des performances d'image pour le Web. Des cas d'utilisation sp√©cifiques peuvent n√©cessiter des formats d'image prenant en charge d'autres fonctionnalit√©s telles que :

  • Support logiciel : Un format d'image peut tr√®s bien fonctionner, mais est inutile si les navigateurs, CDN et autres outils de manipulation d'images ne le reconnaissent pas.
  • Vous aurez peut-√™tre besoin d'une prise en charge de l'animation pour certaines images sur le Web (par exemple, les GIF). Cependant, vous devriez id√©alement remplacer ces images par vid√©o .
  • Transparence alpha : La possibilit√© de cr√©er des images avec diff√©rents niveaux d'opacit√© √† l'aide du canal alpha. (par exemple, des images PNG avec des arri√®re-plans transparents)
  • Il devrait soutenir Imagerie √† plage dynamique √©lev√©e (HDR) et large gamme de couleurs .
  • Le d√©codage progressif pour charger les images permet progressivement aux utilisateurs d'obtenir un aper√ßu raisonnable de l'image avant qu'elle ne soit affin√©e.
  • Cartes de profondeur qui vous permettront d'appliquer des effets au premier plan ou √† l'arri√®re-plan de l'image.
  • Images avec plusieurs couches superpos√©es, telles que des superpositions de texte, des bordures, etc.

Suggestion: lors de l'√©valuation de la qualit√©, de la compression et du r√©glage des formats modernes, la capacit√© de Squoosh.app faire une comparaison visuelle c√īte √† c√īte est utile. Le zoom vous permet de mieux appr√©cier o√Ļ une mise en page affiche des blocs ou des artefacts de bord pour r√©fl√©chir aux compromis.

Les Old Guards et les anciens formats : JPEG ET PNG

JPEG est le format d'image le plus largement pris en charge depuis 25 ans. Les encodeurs JPEG classiques conduisent √† une compression relativement faible, tandis que les efforts d'encodage JPEG plus modernes (tels que MozJPEG ) am√©liorent la compression mais ne sont pas aussi bons que les formats modernes. JPEG est √©galement un format de compression avec perte. Bien que la vitesse de d√©codage des JPEG soit excellente, il manque d'autres fonctionnalit√©s souhaitables requises par les images sur des sites Web modernes et accrocheurs. Il ne prend pas en charge la transparence dans les images, les animations, les cartes de profondeur ou les superpositions.

JPEG fonctionne mieux avec les photographies, tandis que PNG est son homologue pour les autres images fixes. PNG est un format sans perte et peut prendre en charge la transparence alpha, mais la compression obtenue, en particulier pour les photographies, est considérablement faible. JPEG et PNG sont tous deux largement utilisés en fonction du type d'image requis.

L'objectif des formats d'image modernes est donc de dépasser les limites du JPEG et du PNG en offrant une meilleure compression et flexibilité pour prendre en charge les autres fonctionnalités décrites ci-dessus. Dans ce contexte, examinons ce que AVIF et WebP ont à offrir.

AVIF

Logo AVIF

Le format de fichier image AV1 (AVIF) est un format d'image open source pour stocker des images fixes et anim√©es. Il a √©t√© publi√© en f√©vrier 2019 par Alliance pour les m√©dias ouverts (AOMedia). AVIF est la version image du format vid√©o populaire AV1. L'objectif √©tait de d√©velopper un nouveau format d'encodage vid√©o open source √† la pointe de la technologie et libre de droits.

AVANTAGES AVIF

AVIF prend en charge une compression avec et sans perte tr√®s efficace pour produire des images de haute qualit√© apr√®s que la compression AVIF compresse bien mieux que les formats populaires sur le Web aujourd'hui (JPEG, WebP, JPEG 2000, etc.). Les images peuvent √™tre jusqu'√† dix fois plus petites que les JPEG de qualit√© visuelle similaire. Des tests ont montr√© qu'AVIF offre une √©conomie de taille de fichier de 50 % par rapport √† JPEG avec une qualit√© perceptive similaire . Notez qu'il peut y avoir des cas o√Ļ WebP sans perte peut √™tre meilleur que AVIF sans perte, alors assurez-vous d'√©valuer manuellement.

En plus d'une compression sup√©rieure, AVIF fournit √©galement les fonctionnalit√©s suivantes :

  • AVIF prend en charge les animations, les photos en direct et plus encore gr√Ęce √† des images multicouches stock√©es dans des s√©quences d'images.
  • Il offre un meilleur support pour les graphiques, les logos et les infographies, o√Ļ JPEG a des limites.
  • Fournit une meilleure compression sans perte que JPEG.
  • Il prend en charge douze bits de profondeur de couleur permettant des images √† plage dynamique √©lev√©e (HDR) et √† large gamme de couleurs (WCG) avec une meilleure gamme de tons clairs et sombres et une plage de luminosit√© plus large.
  • Inclut la prise en charge des images monochromes et multicanaux, y compris les images transparentes qui utilisent le canal alpha.

Comparaison des tailles

Pour mieux comprendre les différences de qualité et de compression offertes par les différents formats, nous pouvons comparer visuellement les images et évaluer les différences.

√ČVALUATION DE LA QUALIT√Č ET DE LA COMPRESSION

Nous commencerons notre évaluation de la qualité de JPEG, WebP et AVIF en utilisant les paramètres de sortie haute qualité par défaut de Squoosh pour chaque format, intentionnellement non optimisés pour imiter l'expérience d'un nouvel utilisateur avec eux. Pour rappel, vous devez viser à évaluer la configuration de qualité et les formats qui correspondent le mieux à vos besoins. Si vous manquez de temps, les CDN d'images automatisent une partie de cela.

Dans ce premier test, l'encodage d'une photo de 560 Ko d'un coucher de soleil (avec beaucoup de textures) produit une image visuellement et perceptuellement assez similaire pour chacun. La sortie arrive à 289 Ko (JPEG @ q75), 206 Ko (WebP @ q75) et 101 Ko (AVIF @ q30), jusqu'à 81 % d'économies de compression.

OUTILS AVIF ET ASSISTANCE

Depuis sa sortie en 2019, la prise en charge d'AVIF a considérablement augmenté. Bien qu'il n'y ait pas eu de méthode directe pour créer ou afficher des fichiers AVIF auparavant, vous pouvez maintenant le faire facilement avec les utilitaires open source disponibles.

Images AVIF dans le navigateur

AVIF a √©t√© introduit dans la version de bureau de Chrome en ao√Ľt 2020 avec Chrome 85 . Il est √©galement pris en charge sur Chrome pour Android, Opera et Firefox pour ordinateur, et Opera pour Android.

AVIF puis-je utiliser

Pour inclure une image AVIF sur votre page, vous pouvez l'ajouter en tant qu'élément d'image. Cependant, les navigateurs qui ne prennent pas en charge AVIF ne peuvent pas restituer cette image.

<img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

Une solution de contournement pour s'assurer qu'au moins un format d'image pris en charge est distribu√© √† tous les navigateurs consiste √† appliquer AVIF comme am√©lioration progressive . Il y a deux fa√ßons de faire √ßa.

Amélioration progressive
  1. En utilisant le <picture>√Čl√©ment
    As <picture>permet aux navigateurs d'ignorer les images qu'ils ne reconnaissent pas, vous pouvez inclure des images dans votre ordre de pr√©f√©rence. Le navigateur s√©lectionne le premier qu'il supporte.
<picture>
 <source srcset="img/photo.avif" type="image/avif">
 <source srcset="img/photo.webp" type="image/webp">
 <img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>
  1. Utilisation de la négociation de contenu
    N√©gociation du contenu permet au serveur de servir diff√©rents formats de ressources en fonction de ce qui est pris en charge par le navigateur. Les navigateurs qui prennent en charge un format sp√©cifique peuvent l'annoncer en ajoutant le format √† l'en-t√™te de requ√™te de acceptation . Par exemple, l'en-t√™te de demande d'acceptation pour les images dans Chrome est :
    Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
    Le code permettant de v√©rifier si AVIF est pris en charge dans le gestionnaire d'√©v√©nements de r√©cup√©ration peut ressembler √† ceci :
    const hdrAccept = event.request.headers.get("accept");
    const sendAVIF = /image\/avif/.test(hdrAccept);
    Vous pouvez utiliser cette valeur pour servir AVIF ou tout autre format prédéfini pour le client.

Cr√©er un balisage pour une am√©lioration progressive peut √™tre intimidant. Les CDN d'images offrent la possibilit√© de servir automatiquement le format le mieux adapt√© au client. Cependant, si vous n'utilisez pas de CDN d'image, vous pouvez envisager d'utiliser un outil comme donne-moi-juste-un-img . Cet outil peut g√©n√©rer le balisage de l'√©l√©ment image pour une image donn√©e avec diff√©rents formats et largeurs. Il cr√©e √©galement des images correspondant au balisage √† l'aide de Squoosh c√īt√© client complet. Remarque : L'encodage de plusieurs formats peut prendre un certain temps, vous voudrez peut-√™tre prendre un caf√© en attendant.

Encodage et décodage de fichiers AVIF

Diff√©rents projets open source proposent diff√©rentes m√©thodes pour encoder/d√©coder les fichiers AVIF :

  • librairies
    Libaom est l'encodeur et d√©codeur open source g√©r√© par AOMedia, les cr√©ateurs d'AVIF. La biblioth√®que est continuellement mise √† jour avec de nouvelles optimisations qui visent √† r√©duire les co√Ľts d'encodage AVIF, en particulier pour les images fr√©quemment t√©l√©charg√©es ou hautement prioritaires. Libavif est un multiplexeur et analyseur AVIF open source utilis√© dans Chrome pour d√©coder les images AVIF. Vous pouvez utiliser libavif avec libaom pour cr√©er des fichiers AVIF √† partir d'images originales non compress√©es ou pour les transcoder √† partir d'autres formats. Il y a aussi Libheif , un encodeur / d√©codeur AVIF / HEIF populaire e Cavif . Merci √† Ben Morss, libgd prend en charge AVIF et arrivera √©galement sur PHP en novembre.
  • Application Web et application de bureau
    Squoosh , une application Web qui vous permet d'utiliser diff√©rents compresseurs d'images, prend √©galement en charge AVIF, ce qui facilite relativement la conversion et la cr√©ation .avifde fichiers en ligne. Sur le bureau, GIMP prend en charge l'exportation AVIF . ImageMagick e Paint.net prend √©galement en charge AVIF pendant que je plug-in du Communaut√© Photoshop pour AVIF.
  • Biblioth√®ques JavaScript
    • AVIF.js est un polyfill AVIF pour les navigateurs qui ne prennent pas encore en charge AVIF. Utilisez l'API Service Worker pour intercepter l'√©v√©nement de r√©cup√©ration et d√©crypter les fichiers AVIF.
    • Avif.io est un autre utilitaire Web qui peut convertir des fichiers de diff√©rents types d'images en AVIF sur le c√īt√© client . Appelez le code Rust dans le navigateur √† l'aide d'un WebWorker. La biblioth√®que de conversion est compil√©e dans WASM √† l'aide de wasm-pack.
    • Sharp est un module Node.js qui peut convertir des images volumineuses dans des formats standard en images plus petites compatibles avec le Web, y compris des images AVIF.
  • utilitaire
    Les utilitaires de conversion ou de transformation d'image prennent en charge le format AVIF. vous pouvez utiliser MP4Box pour cr√©er et d√©coder des fichiers AVIF.
  • Dans du code
    go-avif impl√©mente un encodeur AVIF pour Go en utilisant libaom. Il est livr√© avec un utilitaire appel√© avifqui peut encoder des fichiers JPEG ou PNG en AVIF.

Toute personne int√©ress√©e √† apprendre √† cr√©er des images AVIF √† l'aide de Squoosh ou √† cr√©er un encodeur de ligne de commande avifencpeut le faire dans le codelab sur le Service de fichiers AVIF .

AVIF ET PERFORMANCES

AVIF peut r√©duire la taille des fichiers d'images gr√Ęce √† une meilleure compression. En cons√©quence, les fichiers AVIF se t√©l√©chargent plus rapidement et consomment moins de bande passante. Cela peut potentiellement am√©liorer les performances en r√©duisant le temps de chargement des images.

L'audit des meilleures pratiques de Lighthouse considère désormais que la compression d'image AVIF peut apporter des améliorations significatives. Collecte toutes les images BMP, JPEG et PNG sur la page, les convertit en WebP et estime la taille du fichier AVIF. Cette estimation permet à Lighthouse de signaler les économies potentielles dans la section "Diffusion d'images dans des formats de nouvelle génération".

Tim Verecke a rapport√© 25 % d'√©conomies d'octets et un impact positif sur LCP (par rapport √† JPEG) apr√®s la conversion de 14 millions d'images de sites Web en AVIF, mesur√© √† l'aide de Real User Monitoring (RUM).

PROBL√ąMES ET CONTRE AVIF

Le plus gros inconv√©nient d'AVIF pour le moment est qu'il manque de support uniforme sur tous les navigateurs. L'introduction d'AVIF en tant qu'am√©lioration progressive aide √† surmonter ce probl√®me. Certains autres aspects o√Ļ AVIF ne r√©pond pas aux normes id√©ales pour un format de fichier moderne.

  • Versions modernes de Chrome (Chrome 94+) prend en charge le rendu progressif AVIF contrairement aux versions pr√©c√©dentes. Bien qu'il n'y ait pas d'encodeur au moment de la r√©daction qui puisse facilement cr√©er ces images, il y a de l'espoir que cela changera.
  • Les images AVIF prennent plus de temps √† encoder et √† cr√©er. Cela pourrait √™tre un probl√®me pour les sites qui cr√©ent dynamiquement des fichiers image. Cependant, l'√©quipe AVIF travaille √† l'am√©lioration des vitesses d'encodage. Les contributeurs AVIF de Google ont √©galement signal√© de beaux gains de performances. Au 1er janvier 2021, l'encodage AVIF a enregistr√© une am√©lioration d'environ 47 % du temps de transcodage (il s'agit de la vitesse 6, la valeur par d√©faut actuelle pour libavif) et sur l'ann√©e civile une am√©lioration de 73 %. Depuis juillet, on note √©galement une am√©lioration de 72% des temps de transcodage √† vitesse 9 (encodage √† la vol√©e).
  • Le d√©codage des images AVIF pour la visualisation peut √©galement n√©cessiter plus de puissance CPU que les autres codecs, bien que des tailles de fichiers plus petites puissent compenser cela.
  • Certains CDN ne prennent pas encore en charge AVIF par d√©faut pour leurs modes de format automatique car il peut √™tre encore plus lent √† g√©n√©rer √† la premi√®re demande.

WebP

Nous avons mentionné WebP à quelques reprises, mais couvrons brièvement son histoire. Google a créé le format WebP en 2011 en tant que format d'image qui aiderait à rendre le Web plus rapide. Au fil des ans, il a été largement accepté et adopté en raison de sa capacité à compresser des images dans des fichiers de plus petite taille que JPEG et PNG. WebP offre à la fois une compression sans perte et avec perte avec une qualité visuelle acceptable et prend en charge la transparence et l'animation du canal alpha.

Logo Webp

La compression WebP avec perte est bas√©e sur le codec vid√©o VP8 et utilise un codage pr√©dictif pour coder une image. Il utilise les valeurs des blocs de pixels adjacents pour pr√©dire la valeur d'un bloc et n'encode que la diff√©rence. Les images WebP sans perte des donn√©es sont g√©n√©r√©es en appliquant plusieurs techniques de transformation aux images pour les compresser.

AVANTAGES WEBP

Les images WebP avec perte sont g√©n√©ralement 26 % plus petites que les images PNG, et les images WebP avec perte sont 25 √† 34 % plus petites que les images JPEG de qualit√© similaire. La prise en charge de l'animation en fait √©galement un excellent remplacement pour les images GIF. Ce qui suit montre une image PNG transparente √† gauche et l'image WebP correspondante √† droite g√©n√©r√©e par l'application Squoosh avec une r√©duction de taille de 26 %.

De plus, WebP offre d'autres avantages tels que :

  • Transparence
    WebP dispose d'un canal de transparence 8 bits sans perte avec seulement 22 % d'octets en plus que PNG. Il prend également en charge la transparence RVB avec perte, qui est une caractéristique unique de WebP.
  • M√©tadonn√©es
    Le format de fichier WebP prend en charge les métadonnées de photo EXIF et les métadonnées des documents numériques de la plate-forme de métadonnées extensibles (XMP). Il peut également contenir un profil de couleur ICC.
  • animation
    WebP prend en charge les images animées en couleurs réelles.

Observation: dans le cas d'images transparentes de type vectoriel comme celles ci-dessus, un SVG optimis√© peut finalement fournir un fichier plus net et plus petit qu'un format raster.

OUTILS WEBP ET ASSISTANCE

Au fil des ans, des écosystèmes autres que Google ont adopté WebP, et de nombreux outils sont disponibles pour créer, afficher et télécharger des fichiers WebP.

Servir et afficher les fichiers WebP

WebP est pris en charge par les dernières versions de presque tous les principaux navigateurs actuels.

Caniuse Webp

Si les d√©veloppeurs souhaitent servir WebP sur d'autres navigateurs √† l'avenir, ils peuvent le faire en utilisant le <picture>les en-t√™tes d'article ou de demande comme indiqu√© dans la section ci-dessus AVIF .

Les r√©seaux de diffusion de contenu d'image (CDN) prennent √©galement en charge images r√©actives avec s√©lection automatique du format des images en WebP ou AVIF selon la prise en charge du navigateur. Les plugins WebP sont disponibles pour d'autres piles populaires telles que WordPress , Joomla , Drupal , etc. La prise en charge initiale de WebP est √©galement disponible dans Noyau de WordPress , √† partir de WordPress 5.8.

Vous pouvez facilement afficher les images WebP en les ouvrant dans un navigateur qui les prend en charge. De plus, vous pouvez √©galement les pr√©visualiser sur Windows et macOS √† l'aide d'un module compl√©mentaire. La mise en place du Plug-in Quick Look pour WebP ( qlImageSize) vous permet de pr√©visualiser les fichiers WebP √† l'aide de l'utilitaire Quick Look. L'√©quipe WebP a publi√© des biblioth√®ques et des utilitaires pr√©compil√© pour le codec WebP pour Windows, macOS et Linux. Leur utilisation sous Windows vous permet de pr√©visualiser les images WebP dans l'explorateur de fichiers Windows ou la visionneuse de photos.

Conversion d'images en WebP

En plus des bibliothèques fournies par l'équipe WebP, plusieurs outils d'édition d'images gratuits, open source et commerciaux prennent en charge WebP.

Utilitaire:
comme AVIF, Squoosh peut √©galement convertir des fichiers en WebP en ligne, comme indiqu√© dans la section pr√©c√©dente. XnConvert est un utilitaire que vous pouvez installer sur votre bureau pour convertir divers formats d'image, y compris WebP. XnConvert peut √©galement aider √† supprimer et √† modifier les m√©tadonn√©es, le recadrage et le redimensionnement, la luminosit√© et le contraste, la personnalisation de la profondeur des couleurs, le flou et la nettet√©, les masques et les filigranes et d'autres transformations.

Modules Node.js :
Image min. est un module de minification d'image populaire avec un module compl√©mentaire pour convertir des images en WebP ( imagemin-webp ). Le module compl√©mentaire prend en charge les modes WebP avec et sans perte.

Autres:
Plusieurs applications de conversion et de manipulation d'images prennent en charge le format WebP. Ceux-ci inclus Croquis , GIMP , ImageMagick , etc. UN Plug-in Photoshop pour WebP .

UTILISER WEBP PRODUCTION

En raison des avantages de la compression par rapport √† JPEG et PNG, de nombreuses grandes entreprises utilisent WebP en production pour r√©duire les temps et les co√Ľts de chargement des pages Web. Google enregistre 30 √† 35 % d'√©conomies en utilisant WebP par rapport √† d'autres sch√©mas de compression avec perte de donn√©es, desservant 43 milliards de demandes d'images. par jour, dont 26 % avec une compression de donn√©es sans perte.

Pour atteindre sa large base d'utilisateurs sur les march√©s √©mergents o√Ļ les donn√©es sont ch√®res, Facebook a commenc√© √† fournir des images WebP aux utilisateurs d'Android. Ont osservato "Une √©conomie de donn√©es de 25-35% par rapport au JPG et 80% par rapport au PNG".

PROBL√ąMES ET INCONV√ČNIENTS DE WEBP

Au début, un inconvénient majeur de WebP était le manque de prise en charge des navigateurs et des outils. Il y a encore peu de compromis avec WebP lorsque l'on considère toutes les fonctionnalités qu'un format moderne devrait idéalement prendre en charge.

  • WebP est limit√© √† une pr√©cision des couleurs de 8 bits. Par cons√©quent, il ne peut pas prendre en charge les images HDR / Wide Gamut.
  • WebP ne prend pas en charge les images avec perte sans sous-√©chantillonnage de chrominance. Lossy WebP fonctionne exclusivement avec un YCbCr 4 bits 2: 0: 8, tandis que WebP sans perte fonctionne avec le format RGBA. Cela peut affecter les images avec des d√©tails fins, des textures color√©es ou du texte color√©. Voir ci-dessous pour un exemple.
  • Il ne prend pas en charge le d√©codage progressif, mais il prend en charge d√©codage incr√©mental . Cela peut quelque peu compenser cela, mais l'effet sur le rendu peut √™tre diff√©rent.

Idéalement, vous devriez générer des fichiers WebP à partir des meilleurs fichiers source disponibles. La conversion de fichiers JPEG médiocres en WebP n'est pas très efficace car vous perdez deux fois en qualité.

Riepilogo

Résumant toutes les informations sur les quatre formats JPEG, PNG, AVIF et WebP et comparant et quantifiant les forces et les faiblesses telles que présentées dans la section précédente, nous avons obtenu le tableau suivant.

Observation: Le nombre d'√©toiles est bas√© sur l'opinion g√©n√©rale et peut varier pour des cas d'utilisation sp√©cifiques.

Vous trouverez ci-dessous quelques-uns des points clés à prendre en compte lorsque vous vous référez à ce tableau.

  • La compression des images photographiques et non photographiques peut diff√©rer davantage en fonction de la fid√©lit√© (qualit√©) des images. Nous avons indiqu√© ici une note globale.
  • Vous devez choisir le sous-√©chantillonnage de chrominance et les param√®tres de qualit√© en fonction de l'objectif des images. Les images de faible et moyenne fid√©lit√© peuvent √™tre acceptables dans la plupart des sc√©narios sur le Web, comme pour les actualit√©s, les m√©dias sociaux et le commerce √©lectronique. Les sites Web de stockage d'images, de films ou de photographies n√©cessitent des images haute fid√©lit√©. Vous devez tester les √©conomies de compression r√©elles pour une haute fid√©lit√© avant de convertir vers un autre format.
  • Le manque de support et de vitesse pour le d√©codage progressif pourrait √™tre un probl√®me pour l'encodage/d√©codage des fichiers AVIF. Pour les sites Web avec des images de taille moyenne, les √©conomies d'octets dues √† la compression peuvent compenser la vitesse et l'absence de d√©codage progressif car les images se t√©l√©chargent rapidement.
  • Lorsque vous comparez la compression offerte par les formats d'image, comparez les tailles de fichier avec m√™me DSSIM .
  • Le param√®tre de qualit√© utilis√© lors de l'encodage n'a pas besoin d'√™tre le m√™me pour diff√©rents formats afin de produire la m√™me qualit√© d'image. Un JPEG encod√© avec un param√®tre de qualit√© de 60 peut √™tre similaire √† un AVIF avec un param√®tre de qualit√© de 50 et un WebP avec un param√®tre de qualit√© de 65, comme sugg√©r√© par this poster .
  • Des √©tudes approfondies sont encore n√©cessaires pour mesurer l'impact r√©el sur le LCP lors de la comparaison des formats.
  • Nous n'avons pas inclus d'autres formats tels que JPEG XL et HEIC dans cette comparaison. JPEG XL est encore √† un stade relativement naissant et seuls les appareils Apple prennent en charge HEIC (contrairement √† Safari). Les redevances et les frais de licence compliquent davantage le support HEIC.

AVIF v√©rifie la plupart des cases en g√©n√©ral, et WebP a un meilleur support et une meilleure compression que JPEG ou PNG. Par cons√©quent, vous devriez sans aucun doute envisager la prise en charge de WebP lors de l'optimisation des images sur votre site Web. √Čvaluer AVIF s'il r√©pond √† vos besoins et l'introduire en tant qu'am√©lioration progressive pourrait apporter de la valeur car le format est adopt√© sur diff√©rents navigateurs et plates-formes. Avec des outils de comparaison de qualit√© et des vitesses d'encodage am√©lior√©es, l'utilisation d'AVIF deviendrait finalement plus facile.

Vous avez des doutes ? Vous ne savez pas par o√Ļ commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos syst√®mes sans avoir √† migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Remonter en haut