17 juin 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.
Retour en haut de page