webp vs avif: 2026 में सपोर्ट, साइज़ और fallback का फ़ैसला

webp vs avif में फ़ैसला यह है: अगर आप images पहले से encode कर सकते हैं, तो AVIF को पहले दें और WebP या JPEG को fallback रखें; अगर तेज़ encoding चाहिए या सिर्फ़ एक सरल format, तो अकेले WebP का इस्तेमाल करें। अक्टूबर 2026 तक दोनों Baseline के तहत व्यापक रूप से उपलब्ध हैं, इसलिए अब browser support तय करने वाली बात नहीं रही। WebP images की सीमा 16383 × 16383 px है (WebP FAQ), जो सिर्फ़ बहुत बड़े panorama पर मायने रखती है। web.dev के प्रकाशित परीक्षणों में AVIF एक ही visual quality पर छोटी फ़ाइलें देता है और HDR सपोर्ट करता है; WebP की encoding कहीं तेज़ है (web.dev, 2023 अपडेट)। बाइट्स का अंतर image पर निर्भर करता है, इसलिए फ़ैसला लेने से पहले अपनी तस्वीरों पर नापें।

एक नज़र में WebP और AVIF

दोनों formats का फ़र्क support से ज़्यादा लागत और सुविधाओं में है। Support के आँकड़े web-features 3.44.0 (22 अक्टूबर 2026) से हैं; बाकी पंक्तियाँ Google के WebP docs और web.dev से हैं:

AVIF को 25 जनवरी 2024 को Baseline “नई तौर पर उपलब्ध” का दर्जा मिला, जब Edge 121 ने इसे जोड़ा, और 30 महीने बाद, 25 जुलाई 2026 को “व्यापक रूप से उपलब्ध” हुआ। अगर आपके analytics में अब भी Safari 16 या Edge 121 से पुराने browsers का अच्छा-खासा हिस्सा दिखता है, तो fallback रखें।

फ़ाइल साइज़: कौन सी छोटी है?

web.dev के प्रकाशित तुलनाओं में AVIF की फ़ाइलें छोटी निकलीं, पर अंतर इतना बदलता है कि कोई एक प्रतिशत भ्रम पैदा कर सकता है। Google का अपना आँकड़ा WebP के लिए JPEG से 25 से 34% छोटा है। web.dev का AVIF लेख “JPEG से 50% से ज़्यादा बचत” बताता है, साथ में चेतावनी कि सटीक बचत content, encoding settings और quality target पर निर्भर है, और 2023 का web.dev अपडेट Imgix का आँकड़ा देता है: JPEG से 60% और WebP से 35% बचत। ये आँकड़े अलग-अलग image sets से हैं, इसलिए अपने images नापें।

चूँकि नतीजे content पर निर्भर हैं, अपनी साइट से कम से कम तीन तरह की images पर टेस्ट करें: एक बड़ी तस्वीर, एक screenshot या text वाला graphic, और एक छोटा thumbnail। हर source को कुछ quality स्तरों पर encode करें और जो quality आप स्वीकार करते हैं उस पर फ़ाइल साइज़ मिलाएँ, cwebp और libavif के avifenc का इस्तेमाल करके:

# WebP, quality 75
cwebp -q 75 hero.jpg -o hero.webp

# AVIF, quality 60 को tune करने के लिए शुरुआती मान के रूप में, 8 threads के साथ
avifenc -q 60 --jobs 8 hero.jpg hero.avif

ls -l hero.*

Squoosh यही काम browser में side-by-side slider के साथ करता है, जो कुछ images के लिए तेज़ तरीका है।

Encoding की गति और tools

WebP तेज़ encode होता है, और यह तब मायने रखता है जब images माँग पर बनती हों। web.dev का 2023 अपडेट कहता है कि on-the-fly इस्तेमाल के लिए AVIF आम encoders में सबसे धीमा है, जबकि पहले से encode करने पर default effort में यह प्रतिस्पर्धी है। avifenc में --speed 0 (सबसे धीमा) से 10 (सबसे तेज़) तक है, default 6; ज़्यादा speed से compression कुशलता घटती है। web.dev के अनुसार 8 threads के साथ encoding लगभग 5 गुना तेज़ होती है, पर वह परीक्षण कैसे हुआ, यह नहीं बताया गया।

व्यवहार में:

• Build-time pipelines (static sites, cache के साथ next/image, cache वाला image CDN) AVIF को अच्छी तरह संभालते हैं, क्योंकि हर image एक बार encode होती है।
• बिना cache के on-the-fly resizing में WebP की गति काम आती है।
• CMS uploads: pipeline बदलने से पहले जाँचें कि आपका CMS AVIF स्वीकार करता है। WordPress 6.5 (2024) से AVIF uploads स्वीकार करता है, पर तभी जब सर्वर की Imagick या GD library AVIF सपोर्ट करे; Tools > Site Health > Info > Media Handling में दिखता है कि यह है या नहीं (WordPress core blog)।

<picture> fallback के साथ दोनों दें

<picture> element का इस्तेमाल करें, ताकि हर browser ऊपर से नीचे तक पहला समर्थित format चुने, और न मिले तो <img> पर जाए:

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-800.jpg"
       srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw"
       width="1600" height="900" alt="Product on a desk">
</picture>

फ़ोन पर तीन बातें मायने रखती हैं:

• <img> पर width और height browser को फ़ाइल आने से पहले जगह रिज़र्व करने देते हैं, जिससे image लोड होते समय layout shift रुकता है।
• sizes के साथ srcset 2 pixel ratio वाले 390px चौड़े फ़ोन को 1600w के बजाय 800w फ़ाइल चुनने देता है (390 × 2 = 780 device pixels)। 3 pixel ratio वाले फ़ोन को 1170 device pixels चाहिए, और वह 1600w फ़ाइल लेता है। फ़ोन के लिए images का आकार कैसे तय करें, यह वेबसाइट को मोबाइल-फ़्रेंडली कैसे बनाएँ में है।
• alt, loading और fetchpriority <img> पर जाते हैं, <source> पर नहीं।

CSS backgrounds के लिए type() वाला image-set() वही काम करता है, और मार्च 2026 से यह व्यापक रूप से उपलब्ध Baseline है:

.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
}

CDN पर content negotiation

कुछ image CDN <picture> के बजाय request के Accept header से format चुनते हैं (अपने CDN के docs देखें)। iPhone पर इसमें एक पेच है। MDN की default Accept values की सूची (अक्टूबर 2026 अपडेट) के अनुसार Chrome और Edge 121+ image/avif,image/webp,... भेजते हैं, Firefox भी image/avif भेजता है, जबकि Safari की value image/webp से शुरू होती है और उसमें AVIF नहीं है। यानी जो CDN सिर्फ़ Accept पढ़ता है, वह Safari को WebP भेजेगा, जबकि Safari 16.4 से AVIF decode कर सकता है। अगर iPhone पर AVIF चाहिए, तो <picture> इस्तेमाल करें, या जाँचें कि आपका CDN Safari को कैसे पहचानता है।

JPEG XL का क्या?

JPEG XL अभी Baseline नहीं है, इसलिए इसे fallback चाहिए। अक्टूबर 2026 तक यह Safari 17+ (केवल still images), Chrome 155, Firefox 158 (13 अक्टूबर 2026 को जारी, इसके release notes के अनुसार) और Edge 155 (8 अक्टूबर 2026 को जारी, इसके release notes के अनुसार) में समर्थित है। Samsung Internet इसे सपोर्ट नहीं करता, और MDN browser-compat-data 8.1.7 अब भी Edge को असमर्थित दिखाता है, इसलिए web-features इसे Baseline में नहीं रखता (MDN browser-compat-data)। जो browsers इसे समर्थन देते हैं उनके लिए इसे AVIF के ऊपर तीसरी <source> लाइन के रूप में जोड़ा जा सकता है, पर हर image पर एक और encode की कीमत पर।

JPEG कब भी ठीक है

अच्छी तरह compress किया गया JPEG इन स्थितियों में सही विकल्प है:

• आप markup या build नहीं बदल सकते, और CMS या CDN formats अपने-आप नहीं बदलता;
• image एक छोटा thumbnail है जहाँ बची बाइट्स कुछ किलोबाइट्स ही हैं;
• फ़ाइल उपयोगकर्ताओं को download, email या edit के लिए दी जानी है, और JPEG हर tool में चलता है;
• आप पहले से हर device के लिए सही आकार परोस रहे हैं और page अपना image audit पास करता है।

Lighthouse 13 (अक्टूबर 2025) में पुराना “modern formats में images परोसें” audit Image delivery insight में मिला दिया गया (Chrome for Developers)। इसे page पर सबसे बड़ी बचत का संकेत मानें; format से पहले image के आयाम जाँचें। audit कैसे चलाएँ और पढ़ें, यह Lighthouse मोबाइल audit गाइड में है।

फ़ोन-आकार के page पर नतीजा जाँचें

format बदलने के बाद दो बातें जाँचें: सही फ़ाइलें लोड हो रही हैं, और layout नहीं हिला। DevTools के Network panel में हर image का वास्तविक format और आकार दिखता है; Img से filter करें और Type column देखें। field data में गति के लिए मोबाइल पेज स्पीड टेस्ट गाइड के तरीके इस्तेमाल करें।

Layout के लिए page को फ़ोन की चौड़ाई पर खोलें। Mobile View Extension tab को फ़ोन के user agent, screen size और pixel ratio के साथ दोबारा लोड करता है, इसलिए आप असली mobile version के साथ फ़ोन का layout देख सकते हैं। यह केवल layout दिखाता है: image का वज़न या load time नहीं नापता, और desktop Chrome का engine चलाता है, इसलिए Safari का format चुनाव Safari में ही जाँचना होगा।

अक्सर पूछे जाने वाले सवाल

क्या AVIF, WebP से बेहतर है?

फ़ाइल साइज़ के लिहाज़ से, प्रकाशित परीक्षणों में हाँ: web.dev की तुलनाओं में AVIF ने मिलते-जुलते visual quality पर JPEG और WebP से छोटी फ़ाइलें बनाईं, और यह HDR सपोर्ट करता है। अपनी images पर जाँचें, क्योंकि अंतर content पर निर्भर है। जब encoding की गति मायने रखती है, या आपके tools AVIF नहीं संभालते, तब WebP बेहतर है।

क्या 2026 में सभी browsers AVIF सपोर्ट करते हैं?

सभी मौजूदा प्रमुख browsers करते हैं। AVIF 25 जुलाई 2026 से व्यापक रूप से उपलब्ध Baseline है, Chrome 85, Firefox 113, Safari 16.4 (Safari iOS 16.1) और Edge 121 से समर्थित।

क्या मुझे अब भी WebP इस्तेमाल करना चाहिए?

हाँ, AVIF के बाद fallback के रूप में, या अगर आपकी pipeline माँग पर encode करती है तो अकेले आधुनिक format के रूप में। WebP 2020 में Safari 14 से हर प्रमुख browser में समर्थित है।

क्या AVIF SEO को नुकसान पहुँचाता है?

नहीं। Google Search AVIF को समर्थित image formats में WebP, JPEG, PNG, GIF, BMP और SVG के साथ सूचीबद्ध करता है (Google Search Central, मार्च 2026 अपडेट)। पेज इस format को ranking signal नहीं बताता।