किसी वेबसाइट की इमेज तेज़ी से कैसे लोड कराएँ
किसी भी साइट की इमेज हल्की करने वाले पाँच बदलाव, असर के हिसाब से क्रम में।
ज़्यादातर वेबसाइटों पर आगंतुक जो डेटा डाउनलोड करता है उसका बड़ा हिस्सा इमेज होता है। एक बिना सुधारी फ़ोन की फ़ोटो पूरे पेज के बाक़ी हिस्से से भारी हो सकती है। इमेज ठीक करना आम तौर पर रफ़्तार का सबसे बड़ा और सबसे सस्ता सुधार है, और तेज़ पेज बेहतर रैंक करता है, लोगों को ज़्यादा रोकता है और ज़्यादा नतीजे देता है।
1. इमेज उसी नाप पर लोड कीजिए जिसमें वह दिखती है
फ़ोन से निकली फ़ोटो 4000 पिक्सेल या उससे ज़्यादा चौड़ी होती है। लेख का कॉलम शायद ही कभी 1200 पिक्सेल से चौड़ा होता है, और कार्ड या छोटी झलक उससे भी कम। हर फ़ालतू पिक्सेल डाउनलोड होता है और फिर ब्राउज़र उसे फेंक देता है। अपलोड से पहले साइज़ बदलिए: पूरी चौड़ाई के बैनर के लिए लगभग 2000 पिक्सेल, ताकि घनी स्क्रीन पर भी साफ़ दिखे; लेख के भीतर की इमेज के लिए 1200 से 1600; और कार्ड के लिए 600 से 800। साइज़ बदलने वाला टूल पूरा फ़ोल्डर एक बार में संभाल लेता है।
2. कंप्रेस कीजिए
नाप सही हो जाएँ तो बाक़ी काम कंप्रेशन करता है। क्वालिटी 80 पर सहेजी गई फ़ोटो वेब पेज पर क्वालिटी 100 जैसी ही दिखती है और अक्सर उसका एक तिहाई वज़न रखती है। इमेज कंप्रेसर एक साथ कई फ़ाइलों पर काम करता है और हर फ़ाइल की बचत दिखाता है।
3. WebP इस्तेमाल कीजिए
WebP को आज का हर ब्राउज़र समझता है और एक जैसी दिखने वाली क्वालिटी पर वह आम तौर पर JPG से 25 से 35 प्रतिशत हल्का होता है, साथ में पारदर्शिता भी, जिससे वह बहुत से PNG की जगह भी ले लेता है। JPG से WebP या PNG से WebP से बदलिए। AVIF और भी हल्का है, पर उसकी एन्कोडिंग धीमी है और अपलोड सिस्टम उसे कम स्वीकार करते हैं, इसलिए व्यावहारिक पसंद WebP ही है।
4. सामग्री के हिसाब से फ़ॉर्मैट चुनिए
| सामग्री | सबसे अच्छा फ़ॉर्मैट |
|---|---|
| फ़ोटो | WebP, या जहाँ WebP न चले वहाँ JPG |
| लोगो और आइकन | अगर हो तो SVG, वरना PNG या WebP |
| टेक्स्ट वाले स्क्रीनशॉट | PNG या बिना नुक़सान वाला WebP |
| सादे एनिमेशन | GIF के बजाय छोटा वीडियो |
5. ब्राउज़र को समझदारी से लोड करने दीजिए
- देर से लोड होना। पहली स्क्रीन के नीचे की इमेज तभी लोड होनी चाहिए जब आगंतुक स्क्रॉल करके उनके पास पहुँचे। ज़्यादातर प्लेटफ़ॉर्म यह ख़ुद करते हैं; सादे HTML में शुरू में न दिखने वाले img टैग पर loading="lazy" जोड़िए।
- नाप। हर इमेज को चौड़ाई और ऊँचाई दीजिए, ताकि इमेज आते समय पेज उछले नहीं। लेआउट का खिसकना Google के Core Web Vitals का हिस्सा है।
- पहले मुख्य इमेज। सबसे ऊपर की बड़ी इमेज, जो आम तौर पर Largest Contentful Paint गिनी जाती है, कभी देर से लोड नहीं होनी चाहिए। उसे जितनी जल्दी हो सके लोड होना चाहिए।
इससे कितना फ़र्क़ पड़ता है
फ़ोन से सीधी निकली दस फ़ोटो वाला एक आम पेज 30 MB का हो सकता है। समझदार चौड़ाई पर लाकर और कंप्रेस करके वही पेज आम तौर पर लगभग 2 MB पर आ जाता है। WebP में बदलने पर लगभग 1,4 MB। मोबाइल कनेक्शन पर यही फ़र्क़ है एक सेकंड में खुलने वाले पेज और ऐसे पेज में जिसे बहुत से आगंतुक छोड़ देते हैं।
नतीजे जाँचना
Google का PageSpeed Insights और Chrome के डेवलपर टूल का Lighthouse पैनल ज़रूरत से बड़ी इमेज, WebP में होनी चाहिए वाली इमेज और Largest Contentful Paint वाले हिस्से की सूची देते हैं। पहले और बाद में मापिए, और सबसे ज़्यादा ट्रैफ़िक वाले पेजों से शुरू कीजिए।