Contrôle de préparation · Axe Accélérer · pondération 6
Formats d’image modernes utilisés
Sur une page d’accueil comportant au moins trois images, certaines utilisent WebP ou AVIF (selon le type de fichier, le type d’un élément source ou un paramètre de format du CDN d’images).
- Observé sur
- 40%
- Sites du top 1K
- 42%
- Tranche du top 1M
- 40%
- Non mesuré
- 62,841
sur 123,215 sites mesurés
219 mesurés
68,845 mesurés
bloqué, soumis à un défi de validation ou non applicable
Pourquoi c’est important
Les formats WebP et AVIF sont généralement beaucoup plus légers que JPEG ou PNG à qualité comparable, et les images constituent souvent la partie la plus lourde d’une page.
Comment apporter la correction
Servez des images WebP ou AVIF avec une solution de repli JPEG ou PNG, soit via un CDN d’images, soit en générant les deux formats lors de la compilation.
Outil d’évaluation de la préparation à la diffusion d’images
Notre méthode de contrôle
Sur une page d’accueil comportant au moins trois images, certaines utilisent WebP ou AVIF (selon le type de fichier, le type d’un élément source ou un paramètre de format du CDN d’images).
Observé : Images WebP ou AVIF détectées.
Non observé : Aucune image WebP ou AVIF détectée.
Limite : résultat fondé sur le HTML de la page d’accueil transmis à un client automatisé ; les scripts qui s’exécutent ultérieurement n’ont pas été exécutés.
Étapes propres à chaque pile technologique
- WordPress : WordPress prend en charge l’importation de fichiers WebP depuis 5.8 et de fichiers AVIF depuis 6.5 ; les extensions de gestion d’images ou l’hébergeur peuvent convertir les images existantes.
- Next.js : Le composant next/image sert automatiquement des formats optimisés.
- Nuxt : Nuxt Image peut produire des images WebP et AVIF.
- Cloudflare : Cloudflare Polish peut convertir les images au format WebP.
- Vercel : Vercel Image Optimization sert des formats modernes.
- Shopify : Le CDN d’images de Shopify peut servir des formats modernes ; suivez les recommandations de Shopify sur les performances web des thèmes.
Par tranche de popularité
| Tranche Chrome UX Report | Observé | Mesuré |
|---|---|---|
| 1 000 premiers | 42% | 219 |
| 5 000 premiers | 38% | 1,042 |
| 10 000 premiers | 41% | 1,351 |
| 50 000 premiers | 39% | 10,382 |
| 100 000 premiers | 40% | 10,125 |
| 500 000 premiers | 39% | 31,251 |
| 1 million de premiers | 40% | 68,845 |
Catégories les plus susceptibles de le faire
Catégories les moins susceptibles de le faire
Par pile technologique
- Astro on Amazon CloudFront83%
- Webflow81%
- Astro on Cloudflare78%
- Astro75%
- Gatsby72%
- Gatsby on Amazon CloudFront71%
- Nuxt on Amazon CloudFront62%
- Nuxt on Cloudflare58%
- Nuxt56%
- Nuxt on Google edge55%
- Angular on Cloudflare55%
- HubSpot CMS55%
- Shopify53%
- Angular53%
- Next.js on Amazon CloudFront50%
- Next.js on Azure Front Door/CDN49%
- Next.js on Google edge49%
- Next.js on Cloudflare48%
- WordPress on Cloudflare47%
- WordPress on Amazon CloudFront47%
- Drupal on Amazon CloudFront45%
- Drupal on Cloudflare45%
- Drupal on Fastly44%
- Next.js44%
- PrestaShop on Cloudflare44%
- Angular on Amazon CloudFront44%
- WordPress on Google edge44%
- Next.js on Netlify43%
- WordPress on Vercel43%
- WordPress43%
- Next.js on Vercel43%
- Bitrix42%
- Drupal40%
- Magento / Adobe Commerce on Cloudflare40%
- Wix39%
- Next.js on Akamai39%
- Drupal on Akamai38%
- WordPress on Fastly38%
- PrestaShop36%
- WordPress on Sucuri35%
- Magento / Adobe Commerce34%
- Next.js on Fastly32%
- WordPress on Imperva31%
- GoDaddy Website Builder31%
- Blogger30%
- Adobe Experience Manager on Amazon CloudFront29%
- Sitecore on Azure Front Door/CDN26%
- Joomla26%
- Adobe Experience Manager25%
- Adobe Experience Manager on Cloudflare25%
- BigCommerce25%
- Tilda22%
- Squarespace21%
- Sitecore16%
- Sitecore on Cloudflare16%
- Adobe Experience Manager on Akamai14%
Par fournisseur
- Netlify52%
- Cloudflare47%
- Bunny CDN46%
- Amazon CloudFront46%
- Vercel46%
- Fastly44%
- Azure Front Door/CDN42%
- Alibaba Cloud CDN40%
- Google edge40%
- Imperva35%
- Sucuri33%
- Akamai27%
Sites populaires sur lesquels nous avons observé ce comportement
Sources et guides
- web.dev : utiliser des images WebP
- WordPress 5.8 ajoute la prise en charge de WebP
- WordPress 6.5 ajoute la prise en charge de AVIF
- Next.js : composant Image
- Nuxt Image
- Cloudflare Polish
Guide : AVIF, WebP, JPEG et PNG : choisissez le bon format d’imageVérifiez votre propre site