हम सभी का अनुभव है: किसी इमेज को पेज पर जोड़ने से पहले, उसका साइज़ छोटा करना न भूलें. इमेज ठीक लग रही है, लेकिन इससे उपयोगकर्ताओं का डेटा बर्बाद हो रहा है और पेज की परफ़ॉर्मेंस पर बुरा असर पड़ रहा है.
गलत साइज़ वाली इमेज की पहचान करना
लाइटहाउस गलत साइज़ वाली इमेज की पहचान करना आसान बनाता है. परफ़ॉर्मेंस ऑडिट करें (Lighthouse > विकल्प > परफ़ॉर्मेंस) और सही साइज़ की इमेज ऑडिट के नतीजे देखें. ऑडिट में, ऐसी सभी इमेज की सूची होती है जिनका साइज़ बदलने की ज़रूरत होती है.
इमेज का सही साइज़ तय करना
इमेज का साइज़ बदलना मुश्किल हो सकता है. इस वजह से, हमने दो तरीके उपलब्ध कराए हैं: "अच्छा" और "बेहतर". दोनों से परफ़ॉर्मेंस में सुधार होगा, लेकिन "बेहतर" तरीके को समझने और लागू करने में थोड़ा ज़्यादा समय लग सकता है. हालांकि, यह आपको बेहतर परफ़ॉर्मेंस में भी सुधार करेगा. आपके लिए सबसे सही विकल्प वह है जिसे आप लागू करने में सहज महसूस करें.
सीएसएस यूनिट के बारे में खास जानकारी
एचटीएमएल एलिमेंट के साइज़ को तय करने के लिए, सीएसएस यूनिट दो तरह की होती हैं. इनमें इमेज भी शामिल हैं:
- ऐब्सलूट यूनिट: ऐब्सलूट यूनिट का इस्तेमाल करके स्टाइल किए गए एलिमेंट, हमेशा एक ही साइज़ में दिखाए जाएंगे, भले ही डिवाइस कोई भी हो. मान्य, ऐब्सलूट सीएसएस यूनिट के उदाहरण: px, cm, mm, in.
- रिलेटिव यूनिट: मिलती-जुलती इकाइयों का इस्तेमाल करके स्टाइल किए गए एलिमेंट, तय की गई मिलती-जुलती लंबाई के आधार पर अलग-अलग साइज़ में दिखाए जाएंगे. मान्य, मिलती-जुलती सीएसएस यूनिट के उदाहरण: %, vw (व्यूपोर्ट की चौड़ाई का 1vw = 1%), em (1.5 em = फ़ॉन्ट साइज़ का 1.5 गुना).
"अच्छा" नज़रिया
इसके आधार पर साइज़ बदलने वाली इमेज के लिए...
- रिलेटिव यूनिट: इमेज का साइज़ बदलकर, ऐसे साइज़ में करें जो सभी डिवाइसों पर काम करे.
Google Analytics जैसे आंकड़ों का डेटा देखने से, आपको यह जानने में मदद मिल सकती है कि आपके उपयोगकर्ता आम तौर पर किस साइज़ का डिसप्ले इस्तेमाल करते हैं. इसके अलावा, screensiz.es से पता चलता है कि यहां कई तरह के डिवाइस देखे जा सकते हैं. - ऐबसलूट यूनिट: इमेज का साइज़ बदलकर, उसे दिखाए गए साइज़ से मैच करें.
DevTools एलिमेंट पैनल का इस्तेमाल यह तय करने के लिए किया जा सकता है कि कोई इमेज किस साइज़ में दिखाई जाए.
"बेहतर" नज़रिया
पूरी और मिलती-जुलती साइज़, दोनों वाली इमेज के लिए अलग-अलग डिसप्ले डेंसिटी पर अलग-अलग इमेज दिखाने के लिए, srcset और sizes एट्रिब्यूट का इस्तेमाल करें.
रिस्पॉन्सिव इमेज के बारे में गाइड पढ़ें.
"डिसप्ले की डेंसिटी" का मतलब है कि अलग-अलग डिसप्ले में अलग-अलग पिक्सल की डेंसिटी होती है. बाकी सभी चीज़ें एक जैसी होने पर, ज़्यादा पिक्सल सघनता वाला डिसप्ले कम पिक्सल सघनता वाले डिसप्ले की तुलना में बेहतर दिखेगा.
ऐसे में, अगर उपयोगकर्ताओं को डिवाइस की पिक्सल डेंसिटी पर ध्यान दिए बिना सबसे बेहतरीन इमेज का अनुभव कराना है, तो इमेज के एक से ज़्यादा वर्शन बनाने की ज़रूरत होती है.
रिस्पॉन्सिव इमेज तकनीकों की मदद से, आप इमेज के एक से ज़्यादा वर्शन की सूची बना सकते हैं. साथ ही, डिवाइस अपने हिसाब से सबसे सही इमेज चुन सकता है.
सभी डिवाइसों पर काम करने वाली इमेज, छोटे डिवाइसों के लिए बेवजह बड़ी होगी. रिस्पॉन्सिव इमेज की तकनीकों, खास तौर पर srcset और साइज़ की मदद से, इमेज के कई वर्शन तय किए जा सकते हैं. साथ ही, डिवाइस अपने हिसाब से सबसे सही साइज़ चुन सकता है.
इमेज का साइज़ बदलें
आप चाहे जो भी तरीका चुनें, अपनी इमेज का साइज़ बदलने के लिए ImageMagick का इस्तेमाल करें. ImageMagick, इमेज बनाने और उनमें बदलाव करने के लिए सबसे लोकप्रिय कमांड लाइन टूल है. जीयूआई-आधारित इमेज एडिटर के बजाय सीएलआई का इस्तेमाल करते समय, ज़्यादातर लोग इमेज का साइज़ तेज़ी से बदल सकते हैं.
इमेज का साइज़ बदलकर, ओरिजनल इमेज के साइज़ का 25% करें:
convert flower.jpg -resize 25% flower_small.jpg
इमेज को "200 पिक्सल चौड़ाई गुणा 100 पिक्सल ऊंचाई" के अंदर फ़िट करने के लिए स्केल करें:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
अगर कई इमेज का साइज़ बदलना है, तो इस प्रोसेस को ऑटोमेट करने के लिए किसी स्क्रिप्ट या सेवा का इस्तेमाल करना ज़्यादा आसान हो सकता है. इसके बारे में आप रिस्पॉन्सिव इमेज गाइड में ज़्यादा जान सकते हैं.
डाइमेंशन के बारे में बताकर, लेआउट शिफ़्ट से बचें
इस गाइड में, डाउनलोड की गई ग़ैर-ज़रूरी बाइट को कम करने के लिए, इमेज के डाइमेंशन के बारे में बताया गया है. हालांकि, इस बात पर ध्यान देना ज़रूरी है कि पेज की कुल लेआउट शिफ़्ट को छोटा करने के लिए, लेआउट में इमेज के लिए सही जगह सेव करना भी ज़रूरी है. एचटीएमएल में इमेज दिखाते समय, सही width और height एट्रिब्यूट का इस्तेमाल करें, ताकि ब्राउज़र को पता चल सके कि इमेज के लेआउट में कितना स्टोरेज देना है:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
इन एट्रिब्यूट या सीएसएस के मिलते-जुलते साइज़ के बिना, ब्राउज़र को यह पता नहीं होता कि लोड होने तक इमेज कितनी जगह लेगी. इससे दस्तावेज़ में लेआउट शिफ़्ट होंगे. इससे, उपयोगकर्ता के कॉन्टेंट का इस्तेमाल शुरू करने के बाद, उसमें बदलाव करने में परेशानी हो सकती है. इसकी वजह से, उपयोगकर्ता पढ़ते समय अपनी टारगेट की गई जगह खो सकते हैं. ऐसा भी हो सकता है कि वे अपना टारगेट पूरा न कर पाएं. ऐसा भी हो सकता है कि वे पेज लोड होने के दौरान, उपयोगकर्ताओं को किसी ऐसी चीज़ पर क्लिक न कर दें जो वे नहीं चाहते थे.
चौड़ाई और ऊंचाई की जानकारी साफ़ तौर पर देने के बजाय, इमेज पर सीएसएस aspect-ratio प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसका असर, एलिमेंट के साइज़ पर भी वही पड़ता है जो width और height एट्रिब्यूट इस मामले में करते हैं कि कंटेनर का आसपेक्ट रेशियो एक जैसा रहेगा. हालांकि, अंतर यह है कि इस वजह से इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में अंतर हो सकता है. इसलिए, आपको object-fit सेटिंग का इस्तेमाल करना चाहिए, ताकि 16/9 के इस अश्लील व्यू में इमेज की क्वालिटी खराब न हो:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
पुष्टि करें
अपनी सभी इमेज का साइज़ बदलने के बाद, Lighthouse को फिर से चलाकर देखें कि आपने कोई चीज़ छूट तो नहीं ली है.