इमेज ऑप्टिमाइज़ेशन की प्राथमिकता

ब्राउज़र, इमेज को लोड करने की प्राथमिकताएं असाइन करने के लिए, ह्यूरिस्टिक का इस्तेमाल करते हैं. हालांकि, हो सकता है कि ये डिफ़ॉल्ट प्राथमिकताएं, आपके पेज के सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के साथ हमेशा अलाइन न हों.

<img> एलिमेंट पर fetchpriority का इस्तेमाल करके, ब्राउज़र को साफ़ तौर पर यह बताया जा सकता है कि कौनसी इमेज ज़रूरी है. इससे यह पक्का किया जा सकता है कि ज़रूरी इमेज तेज़ी से लोड हों और कम ज़रूरी इमेज, बैंडविड्थ के लिए मुकाबला न करें.

loading=lazy एट्रिब्यूट, इमेज को स्क्रीन से बाहर होने पर डाउनलोड होने से रोकता है. इससे इमेज को प्राथमिकता देने में मदद मिलती है.

इन्हें कैसे लागू करें

1. एलसीपी इमेज की पहचान करें: यह तय करें कि सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के लिए, कौनसी इमेज सबसे सही है. आम तौर पर, पेज के सबसे ऊपर मौजूद हीरो इमेज सबसे सही होती है.
2. एलसीपी की प्राथमिकता बढ़ाएं: एलसीपी कैंडिडेट के लिए, <img> एलिमेंट में fetchpriority="high" जोड़ें.
3. कम ज़रूरी इमेज को प्राथमिकता न दें: ऐसी इमेज के लिए fetchpriority="low" जोड़ें जो सेकंडरी यूज़र इंटरफ़ेस (यूआई) का हिस्सा हैं या उपयोगकर्ता के इंटरैक्शन के बाद ही दिखती हैं. जैसे, मेगा मेन्यू, मॉडल या ऑफ़-स्क्रीन कैरसेल स्लाइड.
4. लेज़ी लोडिंग को ऑप्टिमाइज़ करना: एलसीपी इमेज पर कभी भी loading="lazy" का इस्तेमाल न करें. फ़ोल्ड के नीचे मौजूद स्टैंडर्ड इमेज के लिए, loading="lazy" का इस्तेमाल करना काफ़ी है. इससे अनुरोध को तब तक के लिए रोका जा सकता है, जब तक उपयोगकर्ता स्क्रोल करके इमेज के पास नहीं पहुंच जाता. इन इमेज में fetchpriority="low" जोड़ने से बचें, क्योंकि उपयोगकर्ता के स्क्रोल करने पर, आपको इन्हें सामान्य प्राथमिकता के साथ लोड करना होगा. fetchpriority="low" को उन इमेज के लिए रिज़र्व करें जो तकनीकी तौर पर "पेज के ऊपरी हिस्से" में मौजूद हैं, लेकिन शुरुआत में नहीं दिखती हैं. जैसे, छिपी हुई कैरसेल स्लाइड या मेगा मेन्यू. छिपी हुई इन इमेज के लिए, loading="lazy" का इस्तेमाल भी किया जा सकता है. ब्राउज़र, कम प्राथमिकता का ध्यान रखते हुए अनुरोध के समय को मैनेज करेगा.
5. डिफ़ॉल्ट प्राथमिकताओं को प्राथमिकता दें: अगर किसी इमेज को लोड होने की सामान्य प्राथमिकता मिलनी चाहिए, तो fetchpriority एट्रिब्यूट को auto पर सेट करने के बजाय, उसे पूरी तरह से हटा दें. यह एक स्टाइल कन्वेंशन है, जिससे आपके एचटीएमएल को साफ़-सुथरा रखा जा सकता है. साथ ही, ब्राउज़र के नेटिव ह्यूरिस्टिक पर भरोसा किया जा सकता है.

कोड का उदाहरण

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

सबसे सही तरीके

• ज़रूरी: एलसीपी इमेज पर हमेशा fetchpriority="high" लागू करें.
• ज़रूरी: fetchpriority="high" का इस्तेमाल, ज़्यादा से ज़्यादा एक या दो ज़रूरी इमेज पर ही करें. इससे नेटवर्क की समस्या से बचा जा सकता है और प्राथमिकता को कम होने से रोका जा सकता है.
• ज़रूरी: ऐसी इमेज के लिए fetchpriority="low" का इस्तेमाल करें जो तकनीकी तौर पर "पेज के ऊपरी हिस्से" में मौजूद हों, लेकिन शुरुआत में छिपी हुई हों. जैसे, छिपी हुई कैरसेल स्लाइड, मेगा मेन्यू की इमेज.
• ज़रूरी: पेज के निचले हिस्से में मौजूद उन स्टैंडर्ड इमेज पर fetchpriority="low" का इस्तेमाल न करें जो पहले से ही loading="lazy" का इस्तेमाल कर रही हैं. व्यूपोर्ट में आने के बाद, ये इमेज सामान्य प्राथमिकता के साथ लोड होनी चाहिए.
• सुझाव: fetchpriority="auto" का इस्तेमाल करने से बचें. अगर आपको डिफ़ॉल्ट प्राथमिकता चाहिए, तो अपने एचटीएमएल को साफ़ रखने के लिए एट्रिब्यूट को पूरी तरह से हटा दें.
• fetchpriority="high" को loading="lazy" के साथ न जोड़ें.
• importance एट्रिब्यूट का इस्तेमाल न करें, क्योंकि अब इसका इस्तेमाल नहीं किया जाता. इसकी जगह fetchpriority का इस्तेमाल किया जाता है. यह किसी भी ब्राउज़र पर काम नहीं करता.
• loading="auto" वैल्यू का इस्तेमाल न करें, क्योंकि अब यह काम नहीं करती. शुरुआत में, Chrome पर इसका इस्तेमाल किया जा सकता था. हालांकि, अब इसे हटा दिया गया है और किसी भी ब्राउज़र पर इसका इस्तेमाल नहीं किया जा सकता.

फ़ॉलबैक रणनीति

fetchpriority एट्रिब्यूट, <img> एलिमेंट के लिए एक प्रोग्रेसिव एन्हांसमेंट है. अगर कोई ब्राउज़र इस एट्रिब्यूट के साथ काम नहीं करता है, तो एट्रिब्यूट को अनदेखा कर दिया जाता है. साथ ही, ब्राउज़र अपनी डिफ़ॉल्ट प्राथमिकता के हिसाब से काम करता है.