AVIF छवि ऑडिट

केवल उन जगहों पर JPEG को AVIF में बदलें जहाँ पेज तेज़ होता है

AVIF सबसे उपयोगी तब होता है जब आप इसे एक छवि ऑडिट की तरह मानते हैं, न कि एक सामान्य निर्यात सेटिंग के रूप में। यह गाइड आपको उन JPEG फ़ोटो को खोजने में मदद करता है जो AVIF के योग्य हैं, समीक्षा प्रक्रिया चुनने में सहायता करता है, और छोटी लेकिन दृश्य रूप से खराब फ़ाइलें प्रकाशित करने से बचाता है।

त्वरित निर्णय

पूरे मीडिया फ़ोल्डर के बजाय अपवादों को बदलें

सर्वश्रेष्ठ JPEG से AVIF निर्णय पेज प्रभाव से शुरू होता है। उन बड़ी फोटोग्राफिक फ़ाइलों को बदलें जो आकार बदलने के बाद भी पेज को धीमा करती हैं। नियमित थंबनेल, UI स्क्रीनशॉट, आरेख, और पहले से छोटे संसाधनों को सरल पथ पर छोड़ें।

मजबूत उम्मीदवार बड़ी फोटोग्राफिक LCP छवि

जब हीरो या लैंडिंग पेज फोटो आकार बदलने और WebP निर्यात के बाद भी वजन में हावी हो, तब AVIF का उपयोग करें।

शायद महत्वपूर्ण लेकिन प्रमुख नहीं

केवल तब AVIF का परीक्षण करें जब वर्तमान फ़ाइल अभी भी महत्वपूर्ण रूप से भारी हो या पेज में स्पष्ट गति समस्या हो।

बचें छोटे, ग्राफिक, या अप्रत्यक्षित संसाधन

जब छवि छोटी हो, ज्यादातर UI हो, टेक्स्ट भारी हो, या आप प्रकाशन से पहले परिणाम जांच न सकें तो AVIF छोड़ें।

पहले छवि ऑडिट करें

AVIF चुनने से पहले ये प्रश्न पूछें

AVIF उत्कृष्ट हो सकता है, लेकिन यह कोई जादुई सुधार नहीं है। यह केवल तब मायने रखता है जब छवि का आकार सही हो, सही भूमिका दी गई हो, और उस लेआउट में समीक्षा की गई हो जहाँ विज़िटर इसे देखेंगे।

प्रश्न यह क्यों महत्वपूर्ण है कार्रवाई
क्या रेंडर किया गया आकार पहले से सही है? AVIF 4000px की छवि को 900px पर प्रदर्शित करते समय सुधार नहीं कर सकता। पहले आकार बदलें, फिर फॉर्मेट की तुलना करें।
क्या यह छवि LCP या पहली छाप को प्रभावित करती है? फोल्ड के ऊपर बड़ी तस्वीरों का प्रभाव गहरे पेज सजावट की तुलना में अधिक होता है। हीरो, लैंडिंग, और अभियान दृश्य प्राथमिकता दें।
क्या सामग्री फोटोग्राफिक है? AVIF आमतौर पर फोटोज़ पर बेहतर काम करता है, न कि फ्लैट UI या लोगो-शैली ग्राफिक्स पर। जब तेज किनारे अधिक महत्वपूर्ण हों तो PNG, SVG, या WebP का उपयोग करें।
क्या आप परिणाम को संदर्भ में समीक्षा कर सकते हैं? AVIF आर्टिफैक्ट्स को तब तक छुपा सकता है जब तक छवि वास्तविक लेआउट में न हो। मोबाइल चौड़ाई, ग्रेडिएंट, चेहरे, और क्रॉप जांचें।
क्या आपके पास फॉलबैक मार्ग है? हर वातावरण आधुनिक फॉर्मेट्स को समान रूप से नहीं संभालता। पिक्चर मार्कअप या आपके फ्रेमवर्क के समकक्ष के साथ प्रकाशित करें।

उम्मीदवार चयन

कौन सी JPEG छवियाँ अच्छे AVIF उम्मीदवार हैं?

ऐसी छवियों की तलाश करें जहाँ छोटी फ़ाइल पेज को बदलती हो, केवल फ़ाइल प्रबंधक को नहीं। सबसे मजबूत उम्मीदवार आमतौर पर फोटोग्राफिक, दृश्य रूप से महत्वपूर्ण, और लोडिंग गति को प्रभावित करने के लिए पर्याप्त बड़े होते हैं।

सर्वोत्तम उम्मीदवार

LCP हीरो फोटो

एक बड़ी फोटोग्राफिक हीरो छवि जो पहले व्यूपोर्ट को परिभाषित करती है और आकार बदलने के बाद भी भारी रहती है, आमतौर पर AVIF के लिए सबसे उपयुक्त होती है।

अच्छा उम्मीदवार

लैंडिंग पेज अभियान छवि

जब कोई अभियान या उत्पाद फोटो पेज के ऊपर दिखाई दे और उसे दृश्य रूप से परिष्कृत बनाए रखना हो, तो अतिरिक्त समीक्षा उचित होती है।

चयनात्मक उम्मीदवार

संपादकीय फीचर छवि

जब छवि पर्याप्त बड़ी हो और महत्वपूर्ण हो, तब AVIF का उपयोग करें, न कि केवल इसलिए कि हर लेख छवि फिर से निर्यात हो रही है।

खराब उम्मीदवार

टेक्स्ट-भारी स्क्रीनशॉट

स्क्रीनशॉट, UI कैप्चर, आरेख, और आइकन अक्सर AVIF संपीड़न से पहले टेक्स्ट स्पष्टता में विफल होते हैं।

गुणवत्ता समीक्षा

AVIF टूल्स के बीच गुणवत्ता संख्या न कॉपी करें

AVIF गुणवत्ता स्लाइडर सार्वभौमिक नहीं हैं। एक एन्कोडर में अच्छा दिखने वाला मान दूसरे में बहुत नरम या बहुत भारी हो सकता है। टूल डिफ़ॉल्ट या मध्यम गुणवत्ता सीमा से शुरू करें, फिर वास्तविक पेज पर आउटपुट का मूल्यांकन करें।

लक्ष्य सबसे छोटी संभव AVIF फ़ाइल नहीं है। लक्ष्य सबसे छोटी फ़ाइल है जो पेज का समर्थन करती हो: पर्याप्त साफ विवरण, स्वीकार्य ग्रेडिएंट, कोई ध्यान भटकाने वाला बनावट नुकसान नहीं, और कोई दृश्य रंग परिवर्तन नहीं।

समीक्षा क्रम
  1. मूल कैमरा फ़ाइल के बजाय आकार बदले गए JPEG या WebP से तुलना करें।
  2. छवि को रेंडर किए गए डेस्कटॉप आकार और मोबाइल चौड़ाई पर जांचें।
  3. चेहरे, आसमान, ग्रेडिएंट, छायाएं, छोटी बनावट, और ब्रांड रंग जांचें।
  4. पुष्टि करें कि फ़ाइल वास्तव में उस पेज पर लोड होती है जिसे आप प्रकाशित करने वाले हैं।

दृश्य विफलता मोड

प्रकाशन से पहले जांचने योग्य AVIF आर्टिफैक्ट्स

एक अच्छा AVIF निर्यात शानदार दिख सकता है। एक खराब निर्यात चुपचाप विफल हो सकता है: फ़ाइल छोटी होती है, लेकिन छवि सपाट, धुंधली या शोरयुक्त लगती है, खासकर उस हिस्से में जिसे उपयोगकर्ता सबसे पहले देखते हैं।

आसमान या ग्रेडिएंट में बैंडिंग जब संपीड़न बहुत अधिक हो, तो चिकने पृष्ठभूमि में स्टेपिंग दिख सकती है।
मوم जैसा त्वचा या उत्पाद बनावट पोर्ट्रेट और उत्पाद सतहें प्राकृतिक विवरण खो सकती हैं, भले ही फ़ाइल पहली नजर में तेज़ दिखे।
धुंधली सूक्ष्म विवरण पत्ते, कपड़ा, बाल, और छोटे दोहराए जाने वाले पैटर्न इस तरह धुंधले हो सकते हैं कि वह बचाए गए बाइट्स के मुकाबले कम गुणवत्ता जैसा लगे।
रंग या कंट्रास्ट में बदलाव अभियान छवियों और उत्पाद फ़ोटो को रूपांतरण के बाद ब्रांड-सुरक्षित रंग जांच की आवश्यकता होती है।
क्रॉप और फोकल पॉइंट की गलतियाँ यदि रिस्पॉन्सिव क्रॉप्स उस छवि के हिस्से को छुपाते हैं जो पेज को आकर्षक बनाता है, तो छोटी फ़ाइल कोई जीत नहीं है।

डिलीवरी

AVIF को फॉलबैक के साथ प्रकाशित करें, अंधाधुंध प्रतिस्थापन के रूप में नहीं

महत्वपूर्ण पेज छवियों के लिए, डिलीवरी को सरल और पूर्वानुमेय रखें। AVIF का उपयोग पहले करें जब समर्थित हो, WebP या JPEG फॉलबैक रखें, चौड़ाई और ऊंचाई सेट करें, और ब्राउज़र को लेआउट आकार देर से खोजने न दें।

केवल तब AVIF प्रीलोड करें जब वह वास्तव में LCP छवि हो। हर कन्वर्टेड संसाधन को प्रीलोड करने से पेज धीमा और भारी हो सकता है।

HTMLAVIF फॉलबैक के साथ पिक्चर मार्कअप
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

गोपनीयता और नियंत्रण

अप्रकाशित अभियान छवियों को यादृच्छिक अपलोड प्रवाह से बाहर रखें

बड़ी JPEG तस्वीरें अक्सर तटस्थ फ़ाइलें नहीं होतीं। इनमें अप्रकाशित उत्पाद, क्लाइंट कार्य, स्थान संकेत, मंचित अभियान सामग्री, या आंतरिक संदर्भ प्रकट करने वाले फ़ाइल नाम हो सकते हैं। इन्हें कन्वर्टर में अपलोड करना एक सोच-समझकर लिया गया निर्णय होना चाहिए, डिफ़ॉल्ट नहीं।

एक स्थानीय वर्कफ़्लो स्रोत फ़ाइलें, आउटपुट नाम, और समीक्षा चरणों को प्रोजेक्ट के करीब रखता है। यह विशेष रूप से उपयोगी होता है जब एक ही लैंडिंग पेज को सही दृश्य संतुलन तक पहुँचाने के लिए कई निर्यात प्रयासों की आवश्यकता होती है।

व्यावहारिक वर्कफ़्लो

हर छवि को प्रोजेक्ट में बदले बिना दोहराने योग्य JPEG से AVIF प्रक्रिया

  1. 01
    केवल भारी उम्मीदवार इकट्ठा करें

    सामान्य आकार बदलने और WebP निर्यात के बाद भी महत्वपूर्ण बड़ी JPEG तस्वीरों की एक छोटी सूची से शुरू करें।

  2. 02
    AVIF वेरिएंट्स को अलग से निर्यात करें

    AVIF आउटपुट को एक समर्पित फ़ोल्डर में रखें ताकि स्रोत JPEG और नियमित WebP फ़ाइलें आसानी से तुलना के लिए उपलब्ध रहें।

  3. 03
    वास्तविक पेज में समीक्षा करें

    उम्मीदवार को वास्तविक घटक या टेम्पलेट में रखें और केवल कन्वर्टर पूर्वावलोकन नहीं, बल्कि दृश्य परिणाम जांचें।

  4. 04
    फॉलबैक मार्कअप के साथ प्रकाशित करें

    जहाँ समर्थित हो AVIF परोसें और पूर्वानुमेय व्यवहार के लिए WebP या JPEG फॉलबैक डिलीवरी रखें।

  5. 05
    नियम को दस्तावेज़ित करें

    लिख लें कि कौन सी छवि भूमिकाएँ AVIF प्राप्त करती हैं ताकि अगला अपडेट अनुमान लगाने वाला न बने।

फॉर्मेट सीमा

WebP को आधार बनाएं और AVIF को उन्नयन के रूप में उपयोग करें

एक स्वस्थ वर्कफ़्लो में आमतौर पर एक डिफ़ॉल्ट और एक अपवाद मार्ग होता है। WebP नियमित वेबसाइट छवियों के लिए डिफ़ॉल्ट है क्योंकि यह व्यावहारिक और व्यापक रूप से समर्थित है। AVIF तब उपयोगी होता है जब बड़ी फोटोग्राफिक छवि का आकार अभी भी बहुत बड़ा हो।

यह सीमा लेख वर्कफ़्लो को तेज़ रखती है और साथ ही आपको उन छवियों को बचाने का तरीका देती है जो वजन या LCP पर हावी हैं।

नियमित लेख छवियाँ जब तक कोई विशिष्ट फ़ाइल अभी भी बहुत भारी न हो, WebP का उपयोग करें।
बड़ा फोटोग्राफिक हीरो आकार बदलने के बाद AVIF आज़माएं और दृश्य परिणाम की तुलना करें।
स्क्रीनशॉट और UI जब टेक्स्ट और सख्त किनारे महत्वपूर्ण हों तो PNG या WebP पसंद करें।
अप्रत्यक्षित बैच निर्यात केवल फ़ोल्डर छोटा होने के कारण AVIF को बिना जांचे प्रकाशित न करें।

प्रकाशन पूर्व चेकलिस्ट

JPEG को AVIF से बदलने से पहले इसे जांचें

स्रोत छवि का आकार बदला गया AVIF फ़ाइल सबसे बड़े प्रदर्शित आकार के करीब होती है, न कि कैमरा की मूल फ़ाइल।
पेज AVIF का उपयोग करता है नेटवर्क या पेज-स्रोत जांच पुष्टि करते हैं कि नई फ़ाइल वास्तव में सर्व की जा रही है।
एक फॉलबैक मौजूद है WebP या JPEG उस डिलीवरी पथ के लिए उपलब्ध रहता है जिसे आप उपयोग करते हैं।
गुणवत्ता की समीक्षा की गई अंतिम पेज को डेस्कटॉप और मोबाइल पर आर्टिफैक्ट्स के लिए जांचा गया।
मेटाडेटा अभी भी समझ में आता है Alt टेक्स्ट, Open Graph छवियाँ, और JSON-LD छवि संदर्भ गलती से टूटे नहीं हैं।
मूल संरक्षित है स्रोत JPEG भविष्य के क्रॉप, आकार, और पुनः निर्यात के लिए उपलब्ध रहते हैं।

सामान्य प्रश्न

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

JPEG से AVIF प्रकाशन निर्णयों के लिए व्यावहारिक उत्तर