Publier les images d’un site en AVIF, WebP et JPG permet d’adapter les ressources aux navigateurs et aux contraintes techniques. Mais trois fichiers par visuel ne suffisent pas à garantir une page rapide : le poids, la résolution, le balisage et le choix du bon format dans le navigateur comptent tout autant.
Comprendre la fonction de chaque format
JPEG reste largement compatible pour les photographies. WebP offre des options de compression modernes et peut convenir à de nombreux usages. AVIF peut produire de très bons résultats à poids réduit, selon la photographie et les réglages d’encodage. Comparez visuellement les fichiers : une compression très agressive peut dégrader les petits textes, les contrastes et les détails d’un produit.
Prévoir un vrai mécanisme de sélection
Pour offrir plusieurs formats, le HTML peut utiliser l’élément picture avec des sources AVIF puis WebP et une image JPG de secours. Il est important de conserver des chemins cohérents et de ne pas présumer qu’un fichier .avif sera automatiquement utilisé simplement parce qu’il existe sur le serveur. Vérifiez le HTML produit par le site et l’onglet Réseau du navigateur.
Adapter les dimensions à l’emplacement
Un visuel d’article de 1600 pixels peut être approprié pour un grand écran, mais une carte de blog affichée sur 300 pixels ne devrait pas forcément télécharger ce fichier complet. Utilisez des dimensions responsive lorsque le système le permet. Indiquez largeur et hauteur afin de réserver l’espace de l’image et de limiter les décalages de mise en page.
Soigner les noms et textes alternatifs
Un nom de fichier descriptif et stable facilite l’organisation, mais ne remplace pas un texte alternatif utile. Décrivez ce que l’image apporte à la page ; évitez la répétition systématique de mots-clés. Une illustration purement décorative peut recevoir un texte alternatif vide dans le HTML. Sur des captures montrant une interface, soyez précis sur l’action représentée.
Contrôler les traitements après import
Lorsqu’un CMS ou un script génère les variantes, vérifiez qu’aucun format ne manque et que tous les fichiers correspondent au même contenu. Une ancienne image mise en cache peut subsister après un remplacement. Comparez tailles en octets, résolution réelle, type MIME envoyé et présence éventuelle d’erreurs 404. N’effacez pas le JPG de secours avant d’avoir validé la chaîne complète.
Test simple sur une fiche d’article
Ouvrez un article, vérifiez l’image principale sur desktop et mobile, puis inspectez le fichier réellement téléchargé. Désactivez temporairement une source moderne dans une préproduction pour vérifier le repli JPG. Mesurez poids et affichage plutôt que de déduire la performance du nom de l’extension. Un workflow de médias fiable se teste jusqu’au navigateur.
Questions fréquentes
Faut-il conserver le JPG si l’AVIF existe ?
Il reste utile comme format de secours pour certains environnements et workflows. Le choix dépend du système de diffusion et des navigateurs ciblés.
Le fichier le plus léger est-il toujours le meilleur ?
Non si la qualité devient insuffisante pour voir un produit ou lire une capture. Évaluez toujours taille, dimensions et lisibilité.
Ressources pour continuer
- Performance mobile : cinq vérifications avant d’ajouter un plugin d’optimisation
- Fiche produit PrestaShop : améliorer l’expérience d’achat sans surcharge
- Améliorer LCP, INP et CLS sur un site e-commerce
Pour un besoin spécifique, une vérification de compatibilité ou une évolution sur mesure, découvrez les prestations Concepty ou contactez Concepty.