आधुनिक इमेज फ़ॉर्मैट का उपयोग: मानक और इसे ठीक करने का तरीका

यह क्यों महत्वपूर्ण है

समान गुणवत्ता पर WebP और AVIF का आकार आम तौर पर JPEG या PNG से बहुत छोटा होता है, और इमेज अक्सर पेज का सबसे भारी हिस्सा होती हैं।

इसमें सुधार कैसे करें

JPEG या PNG फ़ॉलबैक के साथ WebP या AVIF भेजें, या तो इमेज CDN के ज़रिए या बिल्ड के समय दोनों फ़ॉर्मैट बनाकर।

इमेज डिलीवरी की तैयारी का टूल

हम कैसे जाँचते हैं

कम से कम तीन इमेज वाले होमपेज पर कुछ इमेज WebP या AVIF का उपयोग करती हैं (फ़ाइल प्रकार, source एलिमेंट के प्रकार या इमेज-CDN फ़ॉर्मैट पैरामीटर के आधार पर)।

देखा गया: WebP या AVIF इमेज मिलीं।

नहीं देखा गया: कोई WebP या AVIF इमेज नहीं मिली।

सीमा: स्वचालित क्लाइंट को भेजे गए होमपेज के HTML पर आधारित; बाद में चलने वाली स्क्रिप्ट निष्पादित नहीं की गईं।

स्टैक-विशिष्ट चरण

WordPress: WordPress में 5.8 से WebP अपलोड और 6.5 से AVIF अपलोड का समर्थन है; इमेज प्लगइन या होस्ट मौजूदा इमेज को बदल सकते हैं।
Next.js: next/image कंपोनेंट अपने-आप अनुकूलित फ़ॉर्मैट भेजता है।
Nuxt: Nuxt Image, WebP और AVIF आउटपुट कर सकता है।
Cloudflare: Cloudflare Polish इमेज को WebP में बदल सकता है।
Vercel: Vercel Image Optimization आधुनिक फ़ॉर्मैट भेजता है।
Shopify: Shopify का इमेज CDN आधुनिक फ़ॉर्मैट भेज सकता है; थीम के लिए Shopify के वेब प्रदर्शन संबंधी मार्गदर्शन का पालन करें।

Chrome UX Report श्रेणी	देखा गया	मापा गया
शीर्ष 1K	42%	219
शीर्ष 5K	38%	1,042
शीर्ष 10K	41%	1,351
शीर्ष 50K	39%	10,382
शीर्ष 100K	40%	10,125
शीर्ष 500K	39%	31,251
शीर्ष 1M	40%	68,845

ऐसा करने की सबसे अधिक संभावना वाली श्रेणियाँ

सबसे कम संभावना वाली श्रेणियाँ

स्टैक के अनुसार

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%

प्रदाता के अनुसार

स्रोत और मार्गदर्शिकाएँ

मार्गदर्शिका: AVIF, WebP, JPEG और PNG: सही इमेज फ़ॉर्मेट चुनें अपनी साइट जाँचें

आधुनिक इमेज फ़ॉर्मैट उपयोग में हैं