तेज़ लोडिंग के लिए इमेज को ऑप्टिमाइज़ कैसे करें

किसी भी वेब डेवलपर से पूछिए कि ज़्यादातर वेबसाइट को क्या धीमा करता है, तो जवाब लगभग हमेशा एक ही होता है। इमेज। वेब के लिए इमेज ऑप्टिमाइज़ेशन इमेज की फ़ाइल साइज़ को विज़ुअल क्वालिटी खोए बिना घटाने की प्रक्रिया है, ताकि पेज बिना बुरा दिखे तेज़ लोड हों। बिना कंप्रेस की एक फ़ोटो कई मेगाबाइट की हो सकती है। वही इमेज, सही फ़ॉर्मैट और कंप्रेशन के साथ, स्क्रीन पर कोई फ़र्क दिखे बिना 100 किलोबाइट से कम की हो सकती है। यह लेख बताता है कि कौन-से फ़ाइल फ़ॉर्मैट इस्तेमाल करें, कंप्रेशन कैसे काम करता है, अपलोड से पहले रीसाइज़ कब करें, लेज़ी लोडिंग कहाँ फ़िट होती है, और आपके पेज की लोडिंग स्पीड में सबसे बड़ा व्यावहारिक फ़र्क किससे पड़ता है।

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

इमेज वेबसाइट को धीमा क्यों करती हैं?

जब विज़िटर कोई पेज खोलता है, तो ब्राउज़र पेज दिखाने से पहले उस पर मौजूद हर रिसोर्स डाउनलोड करता है। इन रिसोर्स में इमेज आम तौर पर सबसे बड़ी होती हैं। हर इमेज की अपनी रिक्वेस्ट होती है, और ब्राउज़र को कंटेंट पूरी तरह रेंडर करने से पहले उन रिक्वेस्ट के पूरा होने का इंतज़ार करना पड़ता है।

इमेज लोडिंग मेट्रिक्स पर कैसे असर डालती हैं

• इमेज सीधे Largest Contentful Paint (LCP) पर असर डालती हैं। अगर पेज का सबसे बड़ा दिखने वाला एलिमेंट हीरो इमेज है, तो LCP वह समय है जो उस इमेज को पूरी तरह लोड होने में लगता है
• बिना ऑप्टिमाइज़ की इमेज पेज का कुल वज़न बढ़ाती हैं, जिससे लोडिंग टाइमलाइन के बाक़ी हर मेट्रिक में देरी होती है
• मोबाइल कनेक्शन पर असर और बढ़ जाता है। जो 3MB की हीरो इमेज ब्रॉडबैंड पर दो सेकंड में लोड होती है, वह औसत मोबाइल नेटवर्क पर आठ या उससे ज़्यादा सेकंड ले सकती है
• कई बड़ी इमेज मिलकर समस्या को बढ़ाती हैं। जिस गैलरी या प्रोडक्ट पेज पर दस बिना कंप्रेस की फ़ोटो हैं, उसे धीमे कनेक्शन पर इस्तेमाल करना मुश्किल हो सकता है

वेब इमेज के लिए कौन-से फ़ाइल फ़ॉर्मैट इस्तेमाल करें?

JPEG

• फ़ोटोग्राफ़ और ग्रेडिएंट व कई रंगों वाली इमेज के लिए मानक फ़ॉर्मैट
• लॉसी कंप्रेशन सपोर्ट करता है, यानी फ़ाइल साइज़ घटाने के लिए इमेज का कुछ डेटा हमेशा के लिए हटा दिया जाता है
• बिना किसी अपवाद के सभी ब्राउज़र और डिवाइस पर चलता है
• 75 से 85 की क्वालिटी सेटिंग ऐसी फ़ाइलें बनाती है जो मूल से 60 से 80 प्रतिशत छोटी होती हैं और ज़्यादातर फ़ोटोग्राफ़ में क्वालिटी का कोई दिखने वाला नुकसान नहीं होता

PNG

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

WebP

• एक आधुनिक फ़ॉर्मैट जो JPEG और PNG दोनों की जगह लेने के लिए बना, बराबर क्वालिटी पर बेहतर कंप्रेशन के साथ
• WebP इमेज आम तौर पर बराबर JPEG फ़ाइलों से 25 से 35 प्रतिशत छोटी होती हैं
• लॉसी और लॉसलेस दोनों कंप्रेशन सपोर्ट करता है, और पारदर्शिता भी सपोर्ट करता है
• सभी बड़े ब्राउज़र पर चलता है। अगर आपका वेबसाइट बिल्डर इमेज को अपने आप WebP में नहीं बदलता, तो अपलोड करने से पहले उन्हें ख़ुद बदल लीजिए

AVIF

• एक नया फ़ॉर्मैट जो WebP से बेहतर कंप्रेशन देता है, अक्सर तुलनीय क्वालिटी पर JPEG से 50 प्रतिशत छोटा
• ब्राउज़र सपोर्ट बढ़ रहा है लेकिन अभी सार्वभौमिक नहीं है। जहाँ सपोर्ट हो वहाँ AVIF इस्तेमाल कीजिए, और जो ब्राउज़र इसे सपोर्ट नहीं करते उनके लिए WebP या JPEG पर अपने आप फ़ॉलबैक रखिए

इमेज कंप्रेशन क्या है और यह कैसे काम करता है?

कंप्रेशन इमेज के डेटा को हटाकर या सरल करके फ़ाइल साइज़ घटाता है। इसके दो प्रकार हैं, और फ़र्क तय करता है कि कब कौन-सा इस्तेमाल करें।

लॉसी कंप्रेशन

• छोटी फ़ाइल साइज़ पाने के लिए इमेज का कुछ डेटा हमेशा के लिए हटा देता है
• हटाया जाने वाला डेटा इस आधार पर चुना जाता है कि इंसानी आँख को सबसे कम क्या नोटिस होगा, आम तौर पर रंगों के हल्के बदलाव और बारीक टेक्सचर का ब्योरा
• JPEG और लॉसी WebP में इस्तेमाल होता है
• 75 से 85 की क्वालिटी सेटिंग नाटकीय रूप से छोटी फ़ाइलें बनाती है, जिनकी इमेज ज़्यादातर व्यावहारिक इस्तेमाल में बिना कंप्रेस की मूल इमेज जैसी ही दिखती हैं
• पहले से कंप्रेस की गई JPEG को कम क्वालिटी सेटिंग पर दोबारा सेव करने से बचिए। इससे कंप्रेशन की गड़बड़ियाँ जुड़ती जाती हैं और हर सेव के साथ इमेज और बिगड़ती है

लॉसलेस कंप्रेशन

• इमेज का कोई डेटा हटाए बिना फ़ाइल साइज़ घटाता है। हर पिक्सल बिल्कुल वैसा ही रहता है
• PNG और लॉसलेस WebP में इस्तेमाल होता है
• लॉसी कंप्रेशन से कम फ़ाइल साइज़ की बचत, लेकिन क्वालिटी का बिल्कुल कोई नुकसान नहीं
• प्रोडक्ट डायग्राम, स्क्रीनशॉट, टेक्स्ट से भरे ग्राफ़िक, या किसी भी ऐसी इमेज के लिए सबसे सही जिसमें कंप्रेशन की गड़बड़ियाँ दिखेंगी या स्वीकार्य नहीं होंगी

क्या अपलोड करने से पहले इमेज रीसाइज़ करनी चाहिए?

फ़ाइल साइज़ और पिक्सल की माप अलग मुद्दे हैं, और दोनों लोडिंग स्पीड पर असर डालते हैं। 4,000 पिक्सल चौड़ी इमेज को कंप्रेस करने से मदद नहीं मिलती अगर ब्राउज़र को उसे सिर्फ़ 800 पिक्सल चौड़ाई पर दिखाना है। ब्राउज़र पूरी 4,000 पिक्सल की इमेज डाउनलोड करता है और उसे व्यूपोर्ट में छोटा करता है, जिससे बैंडविड्थ बर्बाद होती है और हर विज़िटर के लिए पेज धीमा होता है।

अपलोड से पहले इमेज का सही साइज़ कैसे रखें

• वह अधिकतम चौड़ाई पहचानिए जिस पर इमेज कभी भी दिखाई जाएगी। फ़ुल-विड्थ डेस्कटॉप इमेज के लिए यह आम तौर पर 1,440 से 1,920 पिक्सल होती है
• कॉलम या कार्ड में लगी इमेज के लिए दिखने वाली चौड़ाई कम होती है, अक्सर 400 से 800 पिक्सल
• अपलोड से पहले इमेज को उसके अधिकतम डिस्प्ले साइज़ पर रीसाइज़ कीजिए
• रेटिना और हाई-डेंसिटी डिस्प्ले के लिए डिस्प्ले चौड़ाई को 1.5 से 2 से गुणा कीजिए। 400 पिक्सल चौड़ी कार्ड इमेज को रेटिना स्क्रीन पर तेज़ दिखने के लिए 600 से 800 पिक्सल चौड़ी सोर्स फ़ाइल से फ़ायदा होता है

लेज़ी लोडिंग क्या है और यह इमेज ऑप्टिमाइज़ेशन पर कैसे असर डालती है?

लेज़ी लोडिंग उन इमेज के डाउनलोड को टाल देती है जो अभी व्यूपोर्ट में दिख नहीं रहीं। पेज की हर इमेज को एक साथ लोड करने की जगह, ब्राउज़र इमेज तभी लोड करता है जब विज़िटर उनके पास तक स्क्रॉल करते हैं। जिन पेज पर कई इमेज हैं, वहाँ यह शुरुआती पेज वज़न को काफ़ी घटाती है और बिना स्क्रॉल किए दिखने वाले कंटेंट के लिए Time to Interactive सुधारती है।

• लेज़ी लोडिंग इमेज टैग पर loading="lazy" एट्रिब्यूट से सभी बड़े ब्राउज़र में सीधे सपोर्ट होती है
• फ़ोल्ड के ऊपर की इमेज पर लेज़ी लोडिंग मत लगाइए। हीरो इमेज और बिना स्क्रॉल किए दिखने वाला कोई भी कंटेंट तुरंत लोड होना चाहिए
• फ़ोल्ड के नीचे की सभी इमेज पर लेज़ी लोडिंग लगाइए, इसमें प्रोडक्ट गैलरी, ब्लॉग थंबनेल और पेज में नीचे की इमेज से भरे सेक्शन शामिल हैं

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

रेस्पॉन्सिव इमेज क्या हैं और ये क्यों मायने रखती हैं?

रेस्पॉन्सिव इमेज वह है जो विज़िटर की स्क्रीन साइज़ के हिसाब से अलग फ़ाइल साइज़ देती है। 375 पिक्सल चौड़ी मोबाइल स्क्रीन वाले विज़िटर समेत हर डिवाइस को 1,920 पिक्सल की इमेज भेजने की जगह, रेस्पॉन्सिव इमेज ब्राउज़र को सिर्फ़ वही माँगने देती हैं जो उसे चाहिए।

रेस्पॉन्सिव इमेज मोबाइल लोड टाइम कैसे घटाती हैं

• मोबाइल विज़िटर को पूरी डेस्कटॉप फ़ाइल की जगह इमेज का 400 पिक्सल वाला वर्ज़न मिलता है, जिससे डाउनलोड साइज़ नाटकीय रूप से घटता है
• रेस्पॉन्सिव इमेज srcset एट्रिब्यूट से अलग-अलग चौड़ाई की कई सोर्स फ़ाइलें तय करती हैं ताकि ब्राउज़र सही वाली चुन सके
• जो वेबसाइट बिल्डर यह अपने आप संभालते हैं, वे आपको कई इमेज साइज़ हाथ से बनाने से बचाते हैं
• रेस्पॉन्सिव इमेज मोबाइल पर Core Web Vitals को सीधे सुधारती हैं, जहाँ इमेज ऑप्टिमाइज़ेशन का LCP पर सबसे बड़ा असर होता है

Core Web Vitals और LCP का स्कोर कैसे तय होता है, इसके ब्योरे के लिए Core Web Vitals क्या हैं वाला लेख देखिए।

इमेज को स्टेप-बाय-स्टेप कैसे ऑप्टिमाइज़ करें?

अपलोड से पहले

• इमेज को सही डिस्प्ले माप पर रीसाइज़ कीजिए
• सही फ़ॉर्मैट चुनिए: फ़ोटोग्राफ़ और आम ग्राफ़िक के लिए WebP, PNG सिर्फ़ तब जब पारदर्शिता ज़रूरी हो
• लॉसी फ़ॉर्मैट के लिए 75 से 85 की क्वालिटी सेटिंग से कंप्रेस कीजिए
• फ़ाइल साइज़ जाँचिए। आम वेब इमेज 200KB से कम होनी चाहिए। डेस्कटॉप पर हीरो इमेज 400KB तक जा सकती हैं; उससे ऊपर की किसी भी चीज़ को अपलोड से पहले दोबारा देखना ठीक है

अपलोड के बाद

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

लगातार

• हर अपलोड से पहले नई इमेज जाँचिए। जल्दी काम करते समय बिना ऑप्टिमाइज़ की इमेज आसानी से निकल जाती हैं
• नई इमेज के किसी बड़े बैच के पब्लिश होने के बाद स्पीड टेस्ट चलाइए
• अगर साइट मौजूदा ऑप्टिमाइज़ेशन तरीकों से पहले की है, तो पुरानी इमेज को दोबारा देखिए। पुरानी इमेज लाइब्रेरी स्पीड की समस्याओं का आम और अनदेखा स्रोत है

अपनी पूरी साइट के प्रदर्शन को जाँचने की गाइड के लिए अपनी वेबसाइट की स्पीड कैसे टेस्ट करें वाला लेख देखिए।

WEMASY में इमेज ऑप्टिमाइज़ेशन कैसे संभाला जाता है

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

WEMASY से बने सभी पेज पर फ़ोल्ड के नीचे की इमेज में लेज़ी लोडिंग डिफ़ॉल्ट रूप से लगी होती है। ऑल्ट टेक्स्ट प्लेटफ़ॉर्म के इमेज एडिटर में जोड़ा जा सकता है। LCP समेत पेज स्पीड स्कोर WEMASY एनालिटिक्स डैशबोर्ड में दिखते हैं, जहाँ हर पेज के लिए इमेज से जुड़ी समस्याएँ ख़ास सुझावों के साथ चिह्नित होती हैं।

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें, या प्राइसिंग पेज पर प्लान के विकल्प देखें।

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