Next-Gen फॉर्मेट में इमेज कैसे सर्व करें

Lighthouse चेतावनी का मतलब है कि अपनी JPEG और PNG फ़ाइलों को WebP या AVIF में बदलें, फिर उन्हें फ़ॉलबैक के रूप में मूल फ़ाइल के साथ picture एलिमेंट के माध्यम से परोसें। इस ऑडिट को पास करना आसान कामों में से एक है, क्योंकि इसका समाधान आर्किटेक्चरल होने के बजाय मैकेनिकल है।

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

Lighthouse क्या मापता है

Lighthouse आंतरिक रूप से प्रत्येक इमेज को WebP के रूप में फिर से एनकोड करता है और बचत एक निश्चित सीमा से अधिक होने पर अंतर की रिपोर्ट करता है। रिपोर्ट में दी गई संख्या एक सामान्य अनुशंसा के बजाय एक वास्तविक अनुमान है।

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

मार्कअप जो ऑडिट को संतुष्ट करता है

एक picture एलिमेंट का उपयोग करें जिसमें पहले AVIF हो, दूसरे स्थान पर WebP हो और img टैग में मूल JPEG हो। ब्राउज़र उस पहले सोर्स को चुनता है जिसे वह समझता है, इसलिए नए ब्राउज़रों को छोटी फ़ाइल मिलती है और पुराने ब्राउज़रों को भी इमेज मिल जाती है।

img टैग का होना ज़रूरी है, क्योंकि इसी में alt टेक्स्ट, डाइमेंशन और फ़ॉलबैक होते हैं। width और height एट्रिब्यूट को छोड़ने से इमेज लोड होते समय लेआउट शिफ्ट होता है, जो इस ऑडिट को ठीक करते समय एक अन्य Core Web Vitals माप को नुकसान पहुँचाता है। दोनों एट्रिब्यूट को फ़ॉलबैक इमेज के वास्तविक पिक्सेल आकार पर सेट करें।

ऑडिट को कैसे पास करें

चेतावनी को ठीक से हल करने के लिए, इन 6 चरणों का पालन करें।

1. Lighthouse रिपोर्ट खोलें और उन इमेज की सूची बनाएं जिनका उसने नाम लिया है, ये वे इमेज हैं जिनमें मापने योग्य बचत संभव है।
2. प्रत्येक इमेज के डिस्प्ले साइज़ की जांच करें, क्योंकि कई इमेज गलत फ़ॉर्मेट के साथ-साथ बहुत बड़ी भी होती हैं।
3. प्रत्येक इमेज को उसके वास्तविक डिस्प्ले चौड़ाई में रीसाइज़ करें, हाई-डेंसिटी स्क्रीन के लिए इसे दोगुना करें।
4. पेज की सबसे बड़ी इमेज के लिए WebP को 80 क्वालिटी पर और AVIF को 65 क्वालिटी पर कन्वर्ट करें।
5. परिणामों को picture एलिमेंट के माध्यम से परोसें जिसमें img फ़ॉलबैक के रूप में मूल इमेज हो।
6. यह पुष्टि करने के लिए कि चेतावनी हट गई है और कोई लेआउट शिफ्ट नहीं दिख रहा है, Lighthouse को फिर से चलाएं।

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

किस इमेज के लिए कौन सा फ़ॉर्मेट

क्या आपका प्लेटफ़ॉर्म पहले से ही ऐसा करता है

कई कंटेंट सिस्टम और होस्ट इमेज को स्वचालित रूप से कन्वर्ट करते हैं, इसलिए मैन्युअल रूप से कुछ भी बनाने से पहले जांच लें। एक ही काम को दो बार करना आम बात है और इससे समय बर्बाद होता है।

2 मिनट में टेस्ट करें। पब्लिश किए गए पेज को खोलें, किसी इमेज पर राइट क्लिक करें और उसे एक नए टैब में खोलें, फिर एड्रेस बार में फ़ाइल एक्सटेंशन पढ़ें। आपके द्वारा JPEG के रूप में अपलोड की गई फ़ाइल पर .webp एक्सटेंशन का मतलब है कि प्लेटफ़ॉर्म पहले से ही कन्वर्ट कर रहा है। Shopify, अधिकांश प्रबंधित WordPress होस्ट और कई साइट बिल्डर डिफ़ॉल्ट रूप से ऐसा करते हैं।

चेतावनी कभी-कभी वापस क्यों आ जाती है

जब कनवर्ट करने का चरण स्वचालित होने के बजाय मैन्युअल होता है, तो नए अपलोड समस्या को फिर से पैदा कर देते हैं। जनवरी में ठीक की गई साइट जून तक फिर से चेतावनी दिखाने लगेगी यदि एडिटर सीधे कैमरे से अपलोड करते हैं।

केवल फ़ाइलों को ठीक करने के बजाय प्रक्रिया को ठीक करें। या तो प्लेटफ़ॉर्म स्तर पर स्वचालित कन्वर्शन सक्षम करें, या एक सरल नियम पर सहमति बनाएं कि अपलोड करने से पहले इमेज को रीसाइज़ और कन्वर्ट किया जाए। किसी भी ऐसी साइट पर नियम को लिखित रूप में रखना महत्वपूर्ण है जहाँ एक से अधिक लोग पब्लिश करते हैं, क्योंकि ऑडिट सबसे खराब इमेज को मापता है न कि औसत इमेज को।

क्या आपको AVIF, WebP, या दोनों का उपयोग करना चाहिए

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

फोटोग्राफी प्रधान साइटों पर यह गणना बदल जाती है, जहाँ AVIF उन फ़ाइलों पर अतिरिक्त 20 से 30 प्रतिशत बचाता है जो पहले से ही सैकड़ों किलोबाइट में मापी जाती हैं। 600 KB की हीरो इमेज वाले पेज पर, यह एक वास्तविक कमी है। 40 KB थंबनेल वाले पेज पर, अतिरिक्त पाइपलाइन के प्रयास की तुलना में लाभ कम मिलता है, और केवल WebP ही ऑडिट को पास कर देता है।

परिणाम की ठीक से जांच करना

एक्सटेंशन अक्षम करके एक प्राइवेट विंडो में Lighthouse को फिर से चलाएं, क्योंकि ब्राउज़र एक्सटेंशन माप को बिगाड़ देते हैं। अलग-अलग प्रयासों के बीच स्कोर भी भिन्न होते हैं, इसलिए किसी एक संख्या पर भरोसा करने के बजाय 3 प्रयासों की तुलना करें।

यह मान लेने के बजाय कि ब्राउज़र को नया फ़ॉर्मेट मिल रहा है, इसकी पुष्टि करें। डेवलपर टूल्स खोलें, Network टैब पर जाएं, इमेज द्वारा फ़िल्टर करें और पेज को रीलोड करें। Type कॉलम दिखाता है कि वास्तव में क्या परोसा गया था। कन्वर्शन के बाद भी JPEG परोसने वाले पेज का आमतौर पर मतलब होता है कि picture एलिमेंट मार्कअप गलत है, या कोई कैशिंग लेयर पिछले वर्शन को होल्ड कर रही है।

इसके साथ दिखाई देने वाले संबंधित ऑडिट

• Properly size images. इमेज उस स्थान से बड़ी है जिसमें वह प्रदर्शित होती है। कंप्रेस करने के बजाय रीसाइज़ करें।
• Efficiently encode images. कंप्रेशन बहुत कम है। क्वालिटी सेटिंग को कम करें।
• Defer offscreen images. फ़ोल्ड के नीचे की इमेज में लेज़ी लोडिंग जोड़ें।
• Largest Contentful Paint element. आमतौर पर आपकी हीरो इमेज, जो सबसे पहले ध्यान देने योग्य है।
• Image elements do not have explicit width and height. लेआउट शिफ्ट को रोकने के लिए दोनों एट्रिब्यूट जोड़ें।

ये 5 ऑडिट आमतौर पर एक साथ दिखाई देते हैं, और रिपोर्ट में नामित इमेज को रीसाइज़ और कन्वर्ट करने से एक ही बार में इनमें से अधिकांश ठीक हो जाते हैं।

इससे वास्तव में पेज में कितना सुधार होता है

आधुनिक फ़ॉर्मेट में कनवर्ट करने से आमतौर पर इमेज का 25 से 35 प्रतिशत वजन कम हो जाता है, और पहले रीसाइज़ करने से अक्सर इससे कहीं अधिक कमी आती है। बहुत अधिक इमेज वाले पेज पर संयुक्त प्रभाव अक्सर 70 से 80 प्रतिशत होता है।

यह सुधार Largest Contentful Paint में दिखाई देता है, जो यह मापता है कि मुख्य कंटेंट कितनी जल्दी दिखाई देता है। यह माप आमतौर पर एक इमेज द्वारा तय किया जाता है, इसलिए हीरो फ़ाइल को छोटा करने का प्रभाव पेज पर उसके हिस्से के अनुपात से कहीं अधिक होता है। 20 छोटी इमेज को छोटा करने से ज़्यादा महत्वपूर्ण 1 बड़ी इमेज को छोटा करना है।

क्या न करें

JPEG फ़ॉलबैक को न हटाएं, और उन इमेज को कन्वर्ट न करें जिन्हें विज़िटर डाउनलोड करेंगे। दोनों गलतियाँ थोड़े से स्कोर सुधार के लिए एक वास्तविक सुविधा का सौदा करती हैं।

प्रेस किट, प्रिंट करने योग्य गाइड, डाउनलोड करने योग्य टेम्पलेट और सप्लायर फ़ाइलों को JPEG या PNG ही रहना चाहिए, क्योंकि WebP ब्राउज़र के बाहर ठीक से काम नहीं करता है। इन्हें आधुनिक फ़ॉर्मेट के रूप में परोसने से उन लोगों की ओर से सपोर्ट रिक्वेस्ट आती हैं जो इन्हें खोल नहीं पाते हैं, जिसकी लागत बचाए गए बैंडविड्थ से अधिक होती है।

रिपोर्ट में नामित इमेज को कन्वर्ट करना

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

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

कन्वर्ट की गई फ़ाइलों को मूल फ़ाइलों के साथ मैचिंग नामों का उपयोग करके रखें, ताकि picture एलिमेंट मार्कअप को प्रत्येक इमेज के लिए मैन्युअल रूप से एडिट करने के बजाय एक अनुमानित पैटर्न के साथ जनरेट किया जा सके। hero.jpg, hero.webp और hero.avif रखने वाले फ़ोल्डर को टेम्पलेट करना आसान होता है, और यह अगले फ़ॉर्मेट माइग्रेशन को प्रत्येक पेज को फिर से लिखने के बजाय एक बैच कन्वर्शन बना देता है।