Dans la première partie de notre article sur l’optimisation PageSpeed : Get Faster Loading Images article, nous avons tout dit sur WebP, ce qu’il est, et comment le mettre en œuvre sur votre site. Un autre format d’image de nouvelle génération qui gagne en popularité en raison de ses capacités de compression, sans sacrifier la qualité de l’image, est AVIF.
AVIF est un format d’image libre de droits basé sur le codec vidéo AV1 développé par l’Alliance for Open Media (AOMedia) en collaboration avec Google, Cisco et Xiph.org.
Avec AVIF, les images sont compressées et réduites, tout en conservant la même qualité que l’image originale. AVIF offre la meilleure compression du marché, tout en conservant la qualité des images. Il prend en charge tous les codecs d’image et réduit considérablement la taille des fichiers par rapport aux formats JPEG, PNG et même WebP.
Par rapport à JPEG, AVIF est 50% moins volumineux, et par rapport à WebP, il est 20-30% moins volumineux, sans perte de qualité.
AVIF a été développé par de nombreuses entreprises telles que Google, Amazon, Cisco et Netflix, entre autres. Ces entreprises développent ce format en raison de leur besoin d’images de haute qualité qui ne consomment pas trop de bande passante. Netflix a même affirmé que le format AVIF est de loin supérieur aux formats JPEG, PNG et WebP, et l’utilise actuellement pour ses vignettes d’images.
Le format d’image AVIF prend en charge les caractéristiques suivantes, ce qui les rend potentiellement meilleures par rapport aux autres formats d’image :
Bien que le format d’image AVIF présente de nombreux avantages, son principal inconvénient est sa disponibilité et sa prise en charge par les navigateurs.
Au moment où nous écrivons ces lignes (novembre 2021), AVIF est pris en charge par Firefox, Chrome, Android et Opera. Pour l’instant, Microsoft Edge et Safari ne prennent pas en charge ce format d’image. Toutefois, si vous êtes un utilisateur de Microsoft, il existe un module complémentaire que vous pouvez télécharger et qui le prend en charge. En outre, Firefox ne prend pas encore en charge les AVIF animés.
WebP et AVIF sont deux formats d’image de nouvelle génération qui sont tous deux recommandés par Google dans son outil PageSpeed Insights. WebP est beaucoup plus ancien qu’AVIF et a été développé par Google lui-même. Il est également plus couramment utilisé et est pris en charge par un plus grand nombre de navigateurs Web qu’AVIF.
AVIF, cependant, est beaucoup plus petit et rend les images plus rapidement que WebP. En fait, il est environ 20 à 30 % plus petit que WebP. Le seul inconvénient d’AVIF est qu’il n’est pas aussi largement pris en charge que WebP à l’heure actuelle.
L’avenir d’AVIF est toutefois prometteur, car la prise en charge d’Edge et de Safari pourrait être plus rapide, ce format d’image étant considéré comme très prometteur.
En dehors de ces principaux facteurs à prendre en compte, voici quelques autres différences entre AVIF et WebP à considérer :
WebP et AVIF ont tous deux des avantages et des inconvénients l’un par rapport à l’autre. Le choix de l’une ou de l’autre dépend principalement de vos préférences, du type de site que vous possédez et de la solution la plus avantageuse pour vous.
Il existe plusieurs programmes et applications que vous pouvez utiliser pour convertir vos images en AVIF. L’un d’eux est recommandé : Squoosh, une application Web de compression d’images développée par l’équipe Google Chrome Labs. D’autres programmes à utiliser sont GIMP et Microsoft Paint. Malheureusement, Photoshop ne le prend pas en charge à l’heure actuelle.
Étant donné qu’AVIF est une technologie encore récente et qu’elle n’est pas encore totalement prise en charge par tous les navigateurs, il existe deux manières principales de servir le format : par le biais de l’élément image et par la négociation du contenu.
Ce dernier est utilisé pour que, si le navigateur utilisé ne prend pas en charge AVIF, il affiche un autre type d’image à la place.
Voici un exemple de code que vous pourriez ajouter aux balises de votre page.
<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=”description de l’image d’exemple”>
</picture>
Content negotiation allows the server to serve formats based on what is supported by the browser. Browsers that support a specific format can announce it by adding the format to their Accept Request Header. For example, the Accept Request Header for images in Chrome is:
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
The code to check if AVIF is supported in the fetch event handler can look something like this:
const hdrAccept = event.request.headers.get(“accept”);
const sendAVIF = /image\/avif/.test(hdrAccept);
La négociation du contenu permet au serveur de servir des formats 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 ce format à leur en-tête Accept Request Header. Par exemple, l’en-tête Accept Request Header pour les images dans Chrome est le suivant :
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 par défaut.
Une autre option consiste à utiliser un CDN qui prend en charge AVIF. Si vous hébergez vos images sur Cloudflare, cela ne devrait pas poser de problème car ils ont ajouté la prise en charge de ce format.
Si votre site est sous WordPress, il existe des plugins que vous pouvez utiliser pour vous aider à servir des images AVIF aux navigateurs qui le supportent et pour ceux qui ne le supportent pas, utiliser d’autres formats d’image à la place.
Parmi ces plugins, citons Shortpixel, Imagekit, Cloudinary, ImageEngine, entre autres.
De plus en plus de formats d’image de nouvelle génération voient le jour, car les entreprises cherchent à améliorer les performances du Web et à dépasser les formats d’image précédents et leurs limites.
WebP et AVIF sont tous deux des formats de nouvelle génération recommandés par Google pour accélérer votre site et améliorer l’expérience des utilisateurs.
En fin de compte, les deux formats présentent des avantages et des inconvénients, et c’est à vous, en tant que propriétaire de site et chef d’entreprise, de décider quel est le format que vous préférez pour votre site et vos visiteurs/clients.
Lorsqu’il s’agit d’accélérer un site tout en fournissant des images de qualité, les deux formats sont d’excellentes options, par rapport aux formats plus courants comme JPEG et PNG. Nous avons tous les deux testé les formats JPEG et PNG pour voir s’il y avait un format préféré et nous avons constaté qu’il n’y en avait pas, et que tout se résumait à la vitesse de la page. Consultez notre test à ce sujet pour plus de détails.
Si votre objectif est d’accélérer votre site, afin d’obtenir un meilleur classement, la compression d’image n’est qu’un facteur à prendre en compte, et opter pour WebP ou AVIF n’est qu’un pas dans cette direction. Nous espérons qu’avec ces deux articles, vous avez maintenant une meilleure idée du format d’image de nouvelle génération à choisir.
Pour plus d’informations et de conseils sur la manière d’optimiser vos images, consultez notre article sur l’optimisation des images.
Before you can receive free updates, link building strategies or SEO tips you need to confirm your email right now.
(It’s easy)
Just go to your inbox, open the confirmation email from the SIA, and click the link.
And that’s it!
PS: If you don’t see a confirmation email, please check your spam/junk or promotions folders. Sometimes the confirmation message ends up there by mistake.
Obtenez nos 7 études S.I.A. les plus controversées qui feront trembler la tête même les SEO les plus avancés d’incrédulité.
De plus, nous vous alerterons lorsque nous publierons de nouveaux tests au public.
Obtenga nuestros 7 estudios S.I.A. más controvertidos que harán que incluso el SEO más avanzado sacuda la cabeza con incredulidad.
Además, le avisaremos cuando publiquemos nuevas pruebas al público.
Get Our Most 7 Controversial S.I.A. Studies That Will Make Even the Most Advanced SEO Shake Their Head in Disbelief.
Plus we will alert you when we publish new tests to the public.
