Verifica di preparazione · Percorso Accelera · peso 6
Formati di immagine moderni in uso
In una homepage con almeno tre immagini, alcune utilizzano WebP o AVIF (in base al tipo di file, al tipo di un elemento source o a un parametro di formato della CDN per immagini).
- Osservato su
- 40%
- Primi 1.000 siti
- 42%
- Fascia dei primi 1 milione
- 40%
- Non misurato
- 62,841
su 123,215 siti misurati
219 misurati
68,845 misurati
bloccato, sottoposto a una verifica di accesso o non applicabile
Perché è importante
WebP e AVIF hanno in genere dimensioni molto inferiori a JPEG o PNG a parità di qualità, e le immagini sono spesso la parte più pesante di una pagina.
Come risolvere il problema
Servi WebP o AVIF con un'alternativa JPEG o PNG, tramite una CDN per immagini oppure generando entrambi i formati in fase di compilazione.
Strumento di valutazione della preparazione alla distribuzione delle immagini
Come eseguiamo il controllo
In una homepage con almeno tre immagini, alcune utilizzano WebP o AVIF (in base al tipo di file, al tipo di un elemento source o a un parametro di formato della CDN per immagini).
Rilevato: Individuate immagini WebP o AVIF.
Non rilevato: Nessuna immagine WebP o AVIF individuata.
Limite: analisi basata sull'HTML della homepage distribuito a un client automatizzato; gli script eseguiti in un secondo momento non sono stati eseguiti.
Passaggi specifici per lo stack
- WordPress: WordPress supporta il caricamento di WebP da 5.8 e di AVIF da 6.5; i plugin per immagini o il provider di hosting possono convertire le immagini esistenti.
- Next.js: Il componente next/image serve automaticamente formati ottimizzati.
- Nuxt: Nuxt Image può produrre WebP e AVIF.
- Cloudflare: Cloudflare Polish può convertire le immagini in WebP.
- Vercel: Vercel Image Optimization serve formati moderni.
- Shopify: La CDN per immagini di Shopify può servire formati moderni; segui le indicazioni di Shopify sulle prestazioni web per i temi.
Per fascia di popolarità
| Fascia Chrome UX Report | Osservato | Misurato |
|---|---|---|
| Primi 1.000 | 42% | 219 |
| Primi 5.000 | 38% | 1,042 |
| Primi 10.000 | 41% | 1,351 |
| Primi 50.000 | 39% | 10,382 |
| Primi 100.000 | 40% | 10,125 |
| Primi 500.000 | 39% | 31,251 |
| Primo milione | 40% | 68,845 |
Categorie con la maggiore probabilità di adottare questa pratica
Categorie con la minore probabilità
Per stack
- 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%
Per fornitore
- Netlify52%
- Cloudflare47%
- Bunny CDN46%
- Amazon CloudFront46%
- Vercel46%
- Fastly44%
- Azure Front Door/CDN42%
- Alibaba Cloud CDN40%
- Google edge40%
- Imperva35%
- Sucuri33%
- Akamai27%
Siti popolari su cui abbiamo osservato questa pratica
Fonti e guide
- web.dev: usare immagini WebP
- WordPress 5.8 aggiunge il supporto per WebP
- WordPress 6.5 aggiunge il supporto per AVIF
- Next.js: componente Image
- Nuxt Image
- Cloudflare Polish
Guida: AVIF, WebP, JPEG e PNG: Scegli il formato immagine giustoVerifica il tuo sito