Formats d'images modernes : WebP, AVIF et au-delà
Choisir le bon format d'image peut raser les secondes de temps de charge tout en veillant à la fidélité visuelle intacte. Nous avons comparé les codes modernes pour vous aider à réparer des expériences de prévisualisation flash parfaites pixel sur chaque appareil.
1. Méthode de référence
Nous avons testé AVIF, WebP, JPEG XL et JPEG de haute qualité en utilisant un ensemble de données de 120 actifs produits, portraits, architectures et illustrations. Chaque image a été encodée aux niveaux de qualité cible (SSIM > 0,98) en utilisant libaom, libwebp et libjpeg-turbo. Les tests de décodage ont été exécutés sur Chrome, Firefox, Safari Technology Preview, et un appareil de milieu de gamme Android.
| Format | Taille moyenne (Ko) | Décoder le bureau de vitesse (ms) | Décodeur la vitesse mobile (ms) | Support du navigateur (janvier 2025) |
|---|---|---|---|---|
| AVIF | 152 | 18 | 34 | Chrome, Edge, Firefox, Android (partielle Safari) |
| WebP | 210 | 12 | 22 | Tous les principaux navigateurs |
| JPEG XL | 168 | 20 | 36 | Drapeau Chrome Canaris, Firefox nuit |
| JPEG | 320 | 10 | 18 | Universel |
2. Choisir le bon format
Pour l'aperçu flash, nous vous recommandons une approche par paliers:
- Primaire: Servez AVIF aux navigateurs avec un support complet. Il offre la meilleure compression tout en conservant les détails.
- Retour en arrière : Servir Web P pour assurer la compatibilité avec Safari 17 et les anciens appareils Android.
- Héritage : Fournissez JPEG pour les navigateurs longue file d'attente ou les e-mails intégrés.
Utilisation
type
attribut dans
<source>
éléments pour que les navigateurs choisissent la meilleure option. Paire avec
queues
et
srcset
des attributs pour une livraison adaptée.
3. Conseils de cablage
Le codage de la stratégie compte autant que le choix du format. Suivez ces conseils :
- Encodage par lots en utilisant Node.js ou Allez les pipelines qui s'intègrent à votre DAM.
- Activer la synthèse des grains pour les images de film ou de mode afin de préparer les textures plastiques.
- Conservez les fichiers RAW d'origine séparé et réencodez les bibliothèques de codec s'améliorer.
4. Liste de contrôle pour la mise en œuvre
- Général des départements AVIF et WebP pendant la construction ou le téléchargement.
- Service d'utilisation Workers pour mettre en cache les données locales pour l'aperçu hors ligne.
- Intégrer avec notre laboratoire de métadonnées pour suivre les formats disponibles pour chaque actif.
- Surveiller les Vitals Web de base chaque semaine et réencoder lorsque les méthodes se dégradent.
5. Considerations relatives à l'accessibilité et au référencement
L'imagerie rapide n'est qu'une partie de l'histoire. Maintenez un texte alt descriptif, validez des sous-titres pour des visuels complexes et validez des portes-places paresseux avec des palettes de couleurs dominantes pour faire les changements de disposition. Données structurelles (Produit, ImageObject) aide les moteurs de recherche à comprendre et à présenter vos visuels en résultats richesses.
6. Perspectives
JPEG XL reste promoteur grace à la compression sans perte et au décodage progressif. Bien que le support soit limité aujourd'hui, réalisez votre pipeline pour ajouter de nouveaux formats rapidement. Les abstractions dans votre CMS ou CDN rendent l'adoption future sans douleur.