Avec la constante évolution de la technologie web, il est impératif d’adopter des méthodes efficaces pour garantir à la fois la qualité visuelle et les performances optimales de votre site WordPress. Dans cet esprit, l’utilisation du format d’image AVIF se présente comme une solution innovante et prometteuse. Dans cet article, nous explorerons en profondeur ce qu’est AVIF, pourquoi choisir ce format plutôt que d’autres comme WEBP, et comment intégrer étape par étape des images AVIF dans votre site WordPress. Préparez-vous à découvrir les avantages de cette approche et à donner un coup de pouce significatif à l’expérience visuelle de vos utilisateurs tout en améliorant la vitesse de chargement de votre site.
1. C'est quoi AVIF
AVIF, qui signifie AV1 Image File Format, est un format d’image basé sur le codec vidéo AV1. Il utilise une compression avancée pour réduire la taille des fichiers tout en préservant une qualité d’image élevée. Contrairement à d’autres formats d’image, AVIF est particulièrement efficace pour compresser les images sans perte de qualité perceptible.
2. Pourquoi choisir AVIF ?
Il existe plusieurs raisons de choisir AVIF pour vos images. Tout d’abord, il offre une excellente qualité d’image avec une taille de fichier réduite, ce qui améliore considérablement les performances du site web. De plus, AVIF prend en charge la transparence, ce qui le rend polyvalent pour divers types d’images. En outre, il est soutenu par de nombreux navigateurs modernes.
3. La différence en AVIF, WEBP
AVIF et WEBP sont deux formats d’image modernes qui offrent une compression efficace. La principale différence réside dans les technologies sous-jacentes. AVIF est basé sur le codec AV1, tandis que WEBP utilise le codec VP8 ou VP9. La qualité dépendra de divers facteurs, y compris le contenu de l’image et les paramètres de compression utilisés.
4. Comment insérer AVIF dans WordPress étape par étape :
Par défaut, WordPress ne prend pas en compte le format AVIF, nous allons voir ensemble comment l’autoriser sur WordPress et surtout sans extensions.
Pour commencer, il vous faut aller dans Apparence -> Thème -> Thème enfant ->et aller dans la function.php
Insérer ce code en bas de votre function.php
// Ajouter et autoriser le support du format AVIF
function modify_upload_mimes($mime_types) {
$mime_types['avif'] = 'image/avif';
return $mime_types;
}
add_filter('upload_mimes', 'modify_upload_mimes');
Ce code permet d’autoriser le téléversement des fichiers .avif dans la médiathèque
// Permettre l'affichage des images AVIF dans la bibliothèque multimédia
function display_avif_images($response, $attachment, $meta) {
if (isset($meta['height'], $meta['width'], $meta['file'], $meta['orientation'])) {
$response['sizes']['avif'] = array(
'height' => $meta['height'],
'width' => $meta['width'],
'url' => $meta['file'],
'orientation' => $meta['orientation'],
);
}
return $response;
}
add_filter('wp_generate_attachment_metadata', 'display_avif_images', 10, 3);
5. Les avantages de AVIF
- Taille de fichier réduite : Les images AVIF offrent une compression supérieure, réduisant ainsi la taille des fichiers.
- Qualité d’image élevée : Malgré la compression, AVIF maintient une qualité d’image exceptionnelle.
- Transparence : La prise en charge de la transparence rend AVIF adapté à une variété d’images.
- Par rapport au JPG : Réduction de 20% à 50% : En comparaison avec les images JPG de qualité similaire, AVIF peut souvent réduire la taille des fichiers de 20% à 50%, voire plus. Cela dépend de la complexité visuelle de l’image.
- Par rapport au WEBP : Réduction de 5% à 20% : Comparé à WEBP, un autre format d’image moderne, AVIF peut encore offrir une réduction supplémentaire de la taille des fichiers, bien que cette différence puisse être moins importante.
