इमेज का सही आकार कैसे तय करें
वेब पर इमेज से जुड़ी सबसे आम गलती, इससे आपके विज़िटर्स को होने वाला नुकसान, और एक ही बैच में इसे ठीक करने का तरीका।
इमेज के सबसे चौड़े रेंडर आकार को मापें, हाई-डेंसिटी स्क्रीन के लिए इसे दोगुना करें, और अपनी पूरी लाइब्रेरी को उस नंबर पर रीसाइज़ करें। 800 पिक्सेल के स्लॉट में 4000 पिक्सेल की तस्वीर डालने का मतलब है कि ब्राउज़र डिस्प्ले की क्षमता से लगभग 25 गुना अधिक पिक्सेल डेटा डाउनलोड करता है, और फिर बाकी को छोड़ देता है।
फ़ोन कनेक्शन पर विज़िटर को इस सब के लिए समय और डेटा दोनों के रूप में भुगतान करना पड़ता है। इमेज का सही आकार तय करना आमतौर पर किसी साइट के पेज साइज़ को कम करने का सबसे बड़ा और आसान तरीका है, और इसके लिए रीडिज़ाइन की नहीं बल्कि केवल एक बैच की आवश्यकता होती है।
ओवरसाइज़्ड इमेज इतनी महंगी क्यों पड़ती हैं
फ़ाइल का आकार पिक्सेल काउंट के साथ बढ़ता है, इसलिए चौड़ाई और ऊंचाई को आधा करने से लगभग 75 प्रतिशत डेटा कम हो जाता है। यह संबंध रैखिक (linear) होने के बजाय द्विघाती (quadratic) होता है, यही वजह है कि बर्बादी बहुत तेज़ी से बढ़ती है।
| अपलोड किया गया आकार | इस पर प्रदर्शित | बर्बाद हुआ पिक्सेल डेटा | सामान्य फ़ाइल |
|---|---|---|---|
| 4000 x 3000 | 800 x 600 | 96 प्रतिशत | 180 KB के मुकाबले 4.2 MB |
| 2400 x 1600 | 1200 x 800 | 75 प्रतिशत | 290 KB के मुकाबले 1.1 MB |
| 1600 x 1200 | 800 x 600 | 75 प्रतिशत | 140 KB के मुकाबले 520 KB |
| 1200 x 900 | 1200 x 900 | 0 प्रतिशत | 310 KB, सही आकार |
पहली पंक्ति उन साइटों का एक आम मामला है जहाँ एडिटर सीधे कैमरे से अपलोड करते हैं। ब्राउज़र 4.2 MB डाउनलोड करता है, इसे छोटा करता है, और केवल 180 KB की फ़ाइल के बराबर प्रदर्शित करता है।
वास्तविक डिस्प्ले आकार को कैसे मापें
अपने लाइव पेज पर इमेज पर राइट-क्लिक करें, Inspect चुनें, और मूल (intrinsic) डाइमेंशन के बजाय प्रदर्शित (displayed) डाइमेंशन को पढ़ें। ब्राउज़र दोनों आंकड़े दिखाता है, और उनके बीच का अंतर ही बर्बादी है।
सामान्य मामले के बजाय सबसे चौड़े मामले की जाँच करें। किसी आर्टिकल कॉलम के अंदर की इमेज डेस्कटॉप पर 700 पिक्सेल और फ़ोन पर 380 पिक्सेल पर रेंडर हो सकती है, इसलिए 700 ही वह नंबर है जो मायने रखता है। अपने विज़िटर्स द्वारा उपयोग की जाने वाली सबसे चौड़ी ब्राउज़र विंडो पर टेस्ट करें, क्योंकि एक फुल-विड्थ बैनर व्यूपोर्ट के साथ बढ़ता है और उसके लिए अलग कैलकुलेशन की आवश्यकता होती है।
हाई-डेंसिटी स्क्रीन के लिए दोगुना करने का नियम
डिस्प्ले की चौड़ाई को 2 से गुणा करें और वहीं रुक जाएं, क्योंकि उस डेंसिटी से आगे की स्क्रीन पर ऐसा कोई सुधार नहीं दिखता जिसे कोई नोटिस कर सके। 700 पिक्सेल पर प्रदर्शित इमेज को 1400 पिक्सेल पर एक्सपोर्ट किया जाना चाहिए।
कभी-कभी तीन गुना करने का सुझाव दिया जाता है लेकिन इसकी शायद ही कभी ज़रूरत होती है। सामान्य दूरी से देखने पर 2 और 3 गुना डेंसिटी के बीच का अंतर पता नहीं चलता, जबकि फ़ाइल का आकार आधे से अधिक बढ़ जाता है। 2 गुना डेंसिटी पर अधिक कंप्रेस करना, 3 गुना डेंसिटी पर हल्का कंप्रेस करने से बेहतर परिणाम देता है, क्योंकि अतिरिक्त पिक्सेल कंप्रेशन को छुपा लेते हैं।
रीसाइज़ करने के लिए सामान्य डिस्प्ले चौड़ाई
- आर्टिकल बॉडी इमेज: लगभग 700 px पर प्रदर्शित होती है, 1400 px पर एक्सपोर्ट करें।
- फुल-विड्थ हीरो इमेज: 1920 px तक प्रदर्शित होती है, 1920 px पर एक्सपोर्ट करें और अधिक कंप्रेस करें।
- हाफ-विड्थ फ़ीचर इमेज: लगभग 600 px पर प्रदर्शित होती है, 1200 px पर एक्सपोर्ट करें।
- प्रोडक्ट ग्रिड थंबनेल: लगभग 300 px पर प्रदर्शित होती है, 600 px पर एक्सपोर्ट करें।
- लेखक या प्रोफाइल फोटो: लगभग 80 px पर प्रदर्शित होती है, 160 px पर एक्सपोर्ट करें।
- हेडर में लोगो: लगभग 180 px पर प्रदर्शित होता है, 360 px पर एक्सपोर्ट करें या वेक्टर ग्राफिक्स का उपयोग करें।
फुल-विड्थ इमेज अपवाद क्यों हैं
एक फुल-विड्थ बैनर का कोई निश्चित डिस्प्ले आकार नहीं होता है, इसलिए इसे 1920 पिक्सेल पर सीमित करें और दोगुना करने के बजाय इसे अधिक कंप्रेस करें। फुल-विड्थ इमेज को दोगुना करके 3840 पिक्सेल करने से एक ऐसी फ़ाइल बनती है जिसे कोई भी पेज सही नहीं ठहरा सकता।
बैनर आमतौर पर दूरी से देखे जाते हैं और उनमें किसी प्रोडक्ट फ़ोटोग्राफ़ की तुलना में कम बारीक विवरण होते हैं, जिसका अर्थ है कि उन पर आक्रामक कंप्रेशन कम दिखाई देता है। WebP में 70 क्वालिटी पर 1920 पिक्सेल का बैनर आमतौर पर 200 KB के अंदर रहता है और हर स्क्रीन पर सही दिखता है, जबकि 3840 पिक्सेल वाला वर्शन 4 गुना अधिक भारी होने पर भी कोई दृश्य लाभ नहीं देता है।
पूरी लाइब्रेरी को एक साथ कैसे ठीक करें
किसी मौजूदा साइट को सही तरीके से रीसाइज़ करने के लिए, इन 6 स्टेप्स का पालन करें।
- अपने डिज़ाइन में इमेज स्लॉट की सूची बनाएं, जो आमतौर पर दर्जनों के बजाय 4 से 6 अलग-अलग आकार के होते हैं।
- लाइव पेज पर ब्राउज़र इंस्पेक्टर का उपयोग करके प्रत्येक स्लॉट की डिस्प्ले चौड़ाई मापें।
- अपना एक्सपोर्ट आकार प्राप्त करने के लिए प्रत्येक चौड़ाई को दोगुना करें।
- लाइब्रेरी को स्लॉट के अनुसार फ़ोल्डर्स में सॉर्ट करें, क्योंकि एक बैच उस फ़ोल्डर की हर फ़ाइल पर एक ही आकार लागू करता है।
- प्रत्येक फ़ोल्डर को उसके टारगेट चौड़ाई पर रीसाइज़ करें, फिर उसी पास में कंप्रेस और कन्वर्ट करें।
- समान नाम रखते हुए फ़ाइलों को बदलें ताकि मौजूदा पेज काम करते रहें।
फ़ोल्डर्स में सॉर्ट करना वह स्टेप है जो इसे एक बैच जॉब में बदल देता है। अधिकांश साइटें अपनी धारणा से बहुत कम अलग-अलग इमेज आकारों का उपयोग करती हैं, और स्लॉट के अनुसार ग्रुप बनाने से फ़ाइलों को व्यक्तिगत रूप से संभालने की आवश्यकता समाप्त हो जाती है।
रिस्पॉन्सिव इमेज और srcset एट्रिब्यूट
कई आकारों की पेशकश करने के लिए srcset का उपयोग करें और ब्राउज़र को प्रत्येक डिवाइस के लिए सही आकार चुनने दें। इसके बाद एक फ़ोन 400 पिक्सेल की फ़ाइल डाउनलोड करता है जबकि एक डेस्कटॉप उसी मार्कअप से 1400 पिक्सेल की फ़ाइल डाउनलोड करता है।
प्रति इमेज 3 चौड़ाई जनरेट करें, आमतौर पर 400, 800 और 1600 पिक्सेल, और उन्हें उनकी पिक्सेल चौड़ाई के साथ लिस्ट करें ताकि ब्राउज़र चुन सके। अधिकांश कंटेंट सिस्टम अपलोड करने पर इसे स्वचालित रूप से जनरेट करते हैं, इसलिए जाँचें कि आपका प्लेटफ़ॉर्म पहले से क्या करता है। जहाँ यह ऐसा करता है, वहाँ भी सही आकार के ओरिजिनल को अपलोड करना हर जनरेटेड वेरिएंट को बेहतर बनाता है।
कंप्रेस करने से पहले हमेशा रीसाइज़ करें
पहले रीसाइज़ करने का मतलब है कि कंप्रेशन को कम काम करना पड़ता है, इसलिए फ़ाइल छोटी रहने के साथ-साथ क्वालिटी भी हाई रह सकती है। पहले कंप्रेस करने और बाद में रीसाइज़ करने से वे विवरण नष्ट हो जाते हैं जिन्हें आप फिर से फेंक देते हैं।
यह क्रम इस बात को भी प्रभावित करता है कि परिणाम कैसा दिखता है। फुल साइज़ पर कंप्रेस की गई इमेज में ऐसे आर्टिफैक्ट्स आ जाते हैं जो इमेज को छोटा करने पर अधिक दिखाई देते हैं, क्योंकि आर्टिफैक्ट्स भी उसी के साथ स्केल होते हैं। पहले रीसाइज़ करने से एनकोडर के लिए एक साफ़ सोर्स मिलता है और समान फ़ाइल आकार पर काफी बेहतर परिणाम मिलता है।
इससे पेज की स्पीड पर क्या असर पड़ता है
इमेज का सही आकार तय करने से आमतौर पर उस साइट पर इमेज का वजन 60 से 90 प्रतिशत तक कम हो जाता है जिसने ऐसा पहले कभी नहीं किया है। यह सुधार किसी भी फॉर्मेट बदलाव से बड़ा है और आमतौर पर हर दूसरे ऑप्टिमाइज़ेशन के संयुक्त प्रभाव से भी बड़ा है।
इसका प्रभाव मोबाइल विज़िटर्स पर केंद्रित होता है, जहाँ कनेक्शन धीमे होते हैं और डेटा के पैसे लगते हैं। Largest Contentful Paint में सीधे तौर पर सुधार होता है, क्योंकि यह माप सामान्यतः एक बड़ी इमेज द्वारा तय किया जाता है। Lighthouse में Properly size images ऑडिट को पास करने से अक्सर एक ही समय में 2 या 3 संबंधित चेतावनियां भी दूर हो जाती हैं।
फिट करने के लिए इमेज को कभी भी बड़ा न करें
बड़ा करने से ऐसे पिक्सेल जुड़ते हैं जिन्हें कैमरे ने कभी कैप्चर नहीं किया था, इसलिए परिणाम धुंधला होता है और बिना किसी लाभ के फ़ाइल का आकार बढ़ जाता है। छोटा करना हमेशा सुरक्षित होता है, जबकि बड़ा करना एक ऐसा ऑपरेशन है जो निश्चित रूप से इमेज को खराब दिखाता है।
जहाँ एक सोर्स इमेज उस स्लॉट से छोटी है जिसे उसे भरना है, वहाँ सही विकल्प यह है कि इसे इसके प्राकृतिक आकार में उपयोग करें, इसके चारों ओर लेआउट को क्रॉप करें, या इमेज को बदलें। 600 पिक्सेल की फ़ोटोग्राफ़ को 1600 पिक्सेल तक बड़ा करने से मूल फ़ाइल के वजन से 4 गुना भारी एक धुंधली फ़ाइल बनती है, जो क्वालिटी और स्पीड दोनों मामलों में विफल रहती है।
ओवरसाइज़्ड इमेज के लिए पेज की जाँच करना
डेवलपर टूल्स खोलें, Network टैब पर जाएं, इमेज द्वारा फ़िल्टर करें और पेज को रीलोड करें। सूची प्रत्येक इमेज को उसके ट्रांसफर किए गए आकार के साथ दिखाती है, जिसमें सबसे बड़ी इमेज सबसे पहले होती है।
500 KB से अधिक की किसी भी सिंगल इमेज की जाँच की जानी चाहिए, और कोई भी पेज जहाँ इमेज का कुल आकार 2 MB से अधिक है, वहाँ समस्या है। Elements पैनल में किसी इमेज पर होवर करके उसके मूल (intrinsic) और प्रदर्शित (displayed) आकारों को साथ-साथ देखें। इन 2 नंबरों के बीच का बड़ा अंतर ही गलत आकार की इमेज की परिभाषा है, और यह कुछ ही सेकंड में दिखाई दे जाता है।
एक ही बैच में पूरी लाइब्रेरी को रीसाइज़ करना
इमेज को व्यक्तिगत रूप से रीसाइज़ करने के बजाय, एक बार टारगेट चौड़ाई सेट करें और इसे फ़ोल्डर की हर फ़ाइल पर लागू करें। जब काम को बैच में किया जाता है, तो कई सौ इमेज की लाइब्रेरी कुछ ही मिनटों में रीसाइज़ हो जाती है।
एक बार में 500 तक फ़ाइलें डालें, या सीधे एक ZIP आर्काइव को ड्रैग करें, और पूरे सेट के लिए चौड़ाई, फॉर्मेट और कंप्रेशन टारगेट सेट करें। सब कुछ आपके अपने प्रोसेसर पर आपके ब्राउज़र के अंदर चलता है, इसलिए क्लाइंट साइट्स, स्टेजिंग एसेट्स और अप्रकाशित गैलरी कभी भी किसी सर्वर तक नहीं पहुंचती हैं। कुछ भी अपलोड नहीं किया जाता है, जिसका अर्थ है कि नेटवर्क पर एक भी फ़ाइल भेजे बिना पूरी लाइब्रेरी रीसाइज़ हो जाती है।