AVIF est un format d’image relativement récent offrant une meilleure compression et une meilleure qualité que les formats populaires tels que JPEG, PNG et WebP. AVIF signifie AV1 Image File Format, basé sur le codec vidéo AV1 développé par l’Alliance for Open Media.
AVIF utilise les mêmes techniques de compression qu’AV1, telles que l’intra-prédiction, le codage par transformation, le codage entropique et le filtrage en boucle, pour réduire la taille des fichiers image sans sacrifier la qualité visuelle. AVIF prend en charge la transparence, l’animation, les profils de couleur et le HDR (contrairement à WebP).
L’un des principaux avantages d’AVIF est qu’il peut atteindre des taux de compression beaucoup plus élevés que JPEG et PNG, et même WebP, tout en maintenant ou en améliorant la qualité de l’image.
La réduction de la taille est importante pour les développeurs car la bande passante coûte de l’argent. De plus, la vitesse de la page est importante pour l’expérience de l’utilisateur final et pour les algorithmes de recherche de Google. Si toutes choses sont égales, la page la plus rapide peut être mieux classée.
Par exemple, vous pouvez avoir la photo originale qui fait 9,04 Mo en JPG mais 706 Ko en AVIF. L’œil ne peut pas détecter de différence de qualité, même s’il arrive que l’explorateur de fichiers Windows 10 ne prenne pas encore en charge AVIF. Mais vous pouvez imaginer les économies pour une entreprise comme Facebook (qui prend en charge AVIF) qui affiche des milliards d’images. Intéressant !
Un autre avantage d’AVIF est qu’il est ouvert et libre de droits, contrairement à d’autres formats d’image tels que HEIC et JPEG 2000. N’importe qui peut utiliser et mettre en œuvre AVIF sans payer de frais de licence ni se soucier des problèmes de brevets. Eb effet, AOMedia est un consortium d’entreprises et d’organisations technologiques qui comprend Google, Microsoft, Netflix, Facebook, Amazon, Mozilla et d’autres.
AVIF est encore un format relativement nouveau et n’a pas encore été largement pris en charge par les navigateurs et les applications. Cependant, les principaux navigateurs comme Chrome, Firefox et Edge ont déjà ajouté ou annoncé la prise en charge d’AVIF, et d’autres plates-formes devraient suivre.
Comment créer des images AVIF
Tout d’abord, vous devez créer ou convertir vos images au format AVIF. Plusieurs outils et services peuvent vous aider dans cette tâche. Certains que vous connaissez peut-être pour votre bureau sont : GIMP, Photoshop, ImageMagick, FFMPEG, irfanview et Zoner Photo Studio X.
Si vous recherchez une application Web, essayez Squoosh. Vous pouvez faire glisser et déposer vos images, choisir le format de sortie (y compris AVIF) et régler les paramètres de qualité. Squoosh vous montre également une comparaison côte à côte des images originales et compressées pour voir la différence de taille et d’apparence du fichier.
Si vous voulez allez loin, consultez libavif : une bibliothèque qui fournit des fonctions d’encodage et de décodage pour les images AVIF. Vous pouvez l’utiliser pour créer des applications ou des scripts qui gèrent les fichiers AVIF.
Comment utiliser AVIF sur une page Web
Une fois vos images AVIF prêtes, il est temps de les ajouter à votre page Web. La meilleure façon de le faire est d’utiliser l’élément, qui vous permet de spécifier plusieurs sources pour une image, et de laisser le navigateur choisir la meilleure en fonction de ses capacités et de ses préférences. Par exemple:
< image>
< source srcset="image.avif" type="image/avif">
< source srcset="image.webp" type="image/webp">
< img src="image.jpg" alt="Image">
< /image>Ce code indique au navigateur d’essayer de charger d’abord le fichier image.avif, s’il prend en charge le format AVIF. Sinon, il essaiera de charger le fichier image.webp, s’il prend en charge le format WebP. Si aucun de ces formats n’est pris en charge, il reviendra au fichier image.jpg, une image JPEG standard.
En utilisant cette technique, vous pouvez vous assurer que votre page Web se chargera plus rapidement et s’affichera mieux pour les utilisateurs dont les navigateurs prennent en charge le format AVIF tout en offrant une expérience compatible aux utilisateurs qui ne le font pas.
Cependant, il existe certains défis et limitations dont vous devez être conscient lorsque vous utilisez le format AVIF dans une page Web.
- Prise en charge des navigateurs : actuellement, seuls quelques navigateurs prennent en charge le format AVIF de manière native, tels que Chrome, Edge, Firefox et Opera. D’autres navigateurs peuvent nécessiter des extensions ou des plugins pour afficher les images AVIF. Vous pouvez vérifier l’état actuel de la prise en charge du navigateur pour le format AVIF ici : https://caniuse.com/avif
- Vitesse d’encodage : la création d’images AVIF peut prendre plus de temps que la création d’images JPEG ou PNG en raison de la complexité de l’algorithme de compression. Cela peut affecter votre flux de travail ou vos performances si vous devez générer ou mettre à jour vos images fréquemment ou dynamiquement.
- Compatibilité : certains outils ou services d’édition d’images peuvent ne pas encore prendre en charge le format AVIF, ou peuvent avoir des fonctionnalités ou des options limitées pour celui-ci. Cela peut limiter votre capacité à manipuler ou optimiser vos images comme vous le souhaitez ou vous devrez peut-être télécharger des applications supplémentaires.
En résumé : AVIF (AV1 Image File Format) est un format d’image prometteur qui offre de nombreux avantages par rapport à ceux existants pour les développeurs Web. Il a été développé par l’Alliance for Open Media, un consortium industriel qui vise à développer des technologies multimédias ouvertes et libres de droits.
AVIF utilise l’algorithme de compression AV1, qui est connu pour sa capacité à réduire considérablement la taille des fichiers tout en préservant ou en améliorant la qualité visuelle. Cela permet de réduire la consommation de bande passante des images sur le Web, ce qui peut conduire à des temps de chargement plus rapides et une expérience utilisateur améliorée.
Outre sa compression efficace, AVIF offre également des fonctionnalités avancées telles que la prise en charge des profils de couleur étendus, de la transparence, des images HDR (High Dynamic Range) et bien plus encore. Grâce à sa flexibilité, il peut être utilisé pour une grande variété de cas d’utilisation, que ce soit pour des sites Web, des applications mobiles, des services de streaming vidéo ou d’autres applications multimédias.
Une autre raison de considérer l’utilisation de l’AVIF est que c’est un format ouvert et libre de droits. Cela signifie qu’il n’y a pas de restrictions particulières sur son utilisation et qu’il peut être adopté librement par les développeurs et les plateformes. De plus, AVIF bénéficie du soutien d’un groupe important et diversifié d’acteurs de l’industrie, ce qui lui donne une perspective prometteuse pour devenir un format d’image largement utilisé à l’avenir.
En conclusion, AVIF est un format d’image révolutionnaire qui offre de nombreux avantages pour les développeurs Web. Il permet de réduire la taille des fichiers et la consommation de bande passante des images, tout en préservant ou en améliorant leur qualité visuelle. Avec ses fonctionnalités avancées et son soutien de l’industrie, il a le potentiel de devenir le format d’image standard pour le Web à l’avenir.
