हम सभी ने कभी न कभी ऐसा किया है: आपने किसी इमेज को पेज पर जोड़ने से पहले, उसका साइज़ कम करना भूल गए हों. यह इमेज ठीक दिख रही है, लेकिन इससे उपयोगकर्ताओं का डेटा खर्च हो रहा है और पेज की परफ़ॉर्मेंस पर असर पड़ रहा है.
गलत साइज़ वाली इमेज की पहचान करना
Lighthouse की मदद से, गलत साइज़ वाली इमेज का पता आसानी से लगाया जा सकता है. परफ़ॉर्मेंस ऑडिट (Lighthouse > Options > Performance) चलाएं और Properly size images ऑडिट के नतीजे देखें. ऑडिट में उन सभी इमेज की सूची दी जाती है जिनका साइज़ बदलना ज़रूरी है.
इमेज का सही साइज़ तय करना
इमेज का साइज़ तय करना मुश्किल हो सकता है. इस वजह से, हमने दो तरीके दिए हैं: "अच्छा" और "बेहतर". दोनों से परफ़ॉर्मेंस बेहतर होगी. हालांकि, "बेहतर" तरीके को समझने और लागू करने में थोड़ा समय लग सकता है. हालांकि, इससे आपको परफ़ॉर्मेंस में ज़्यादा सुधार देखने को मिलेंगे. आपके लिए सबसे सही विकल्प वह है जिसे लागू करने में आपको आसानी हो.
सीएसएस यूनिट के बारे में खास जानकारी
एचटीएमएल एलिमेंट, जैसे कि इमेज का साइज़ तय करने के लिए, दो तरह की सीएसएस यूनिट होती हैं:
- ऐब्सलूट यूनिट: ऐब्सलूट यूनिट का इस्तेमाल करके स्टाइल किए गए एलिमेंट, डिवाइस चाहे कोई भी हो, हमेशा एक ही साइज़ में दिखेंगे. मान्य और ऐब्सलूट सीएसएस यूनिट के उदाहरण: px, cm, mm, in.
- रिलेटिव यूनिट: रिलेटिव यूनिट का इस्तेमाल करके स्टाइल किए गए एलिमेंट, अलग-अलग साइज़ में दिखेंगे. यह साइज़, तय की गई रिलेटिव लेंथ पर निर्भर करेगा. मान्य और रिलेटिव सीएसएस यूनिट के उदाहरण: %, vw (1vw = व्यूपोर्ट की चौड़ाई का 1%), em (1.5 em = फ़ॉन्ट साइज़ का 1.5 गुना).
"अच्छी" रणनीति
इनके आधार पर साइज़ तय करने वाली इमेज के लिए…
- रिलेटिव यूनिट: इमेज का साइज़ बदलकर ऐसा करें कि वह सभी डिवाइसों पर काम करे.
आपके लिए यह जानना ज़रूरी हो सकता है कि आपके उपयोगकर्ता, आम तौर पर किस डिसप्ले साइज़ का इस्तेमाल करते हैं. इसके लिए, अपने आंकड़ों के डेटा (जैसे, Google Analytics) की जांच करें. इसके अलावा, screensiz.es पर जाकर, कई सामान्य डिवाइसों की डिसप्ले के बारे में जानकारी पाई जा सकती है. - ऐब्सलूट यूनिट: इमेज का साइज़ बदलकर, उसे उस साइज़ के मुताबिक करें जिसमें वह दिख रही है.
DevTools के Elements पैनल का इस्तेमाल करके, यह पता लगाया जा सकता है कि इमेज किस साइज़ में दिख रही है.
"बेहतर" तरीका
जिन इमेज के लिए, साइज़िंग के ऐब्सलूट और रिलेटिव, दोनों तरीकों का इस्तेमाल किया गया है उनके लिए srcset और sizes एट्रिब्यूट का इस्तेमाल करें. इससे अलग-अलग डिसप्ले डेंसिटी के लिए अलग-अलग इमेज दिखाई जा सकेंगी.
रिस्पॉन्सिव इमेज से जुड़ी गाइड पढ़ें.
"डिसप्ले सघनता" का मतलब है कि अलग-अलग डिसप्ले में पिक्सल की सघनता अलग-अलग होती है. अन्य सभी चीज़ें एक जैसी होने पर, ज़्यादा पिक्सल डेंसिटी वाला डिसप्ले, कम पिक्सल डेंसिटी वाले डिसप्ले की तुलना में ज़्यादा बेहतर दिखेगा.
इसलिए, अगर आपको उपयोगकर्ताओं को सबसे साफ़ इमेज दिखानी हैं, तो आपको इमेज के कई वर्शन बनाने होंगे. इससे कोई फ़र्क़ नहीं पड़ता कि उनके डिवाइस की पिक्सल डेंसिटी कितनी है.
रिस्पॉन्सिव इमेज की तकनीकों की मदद से ऐसा किया जा सकता है. इनकी मदद से, इमेज के कई वर्शन दिखाए जा सकते हैं. साथ ही, डिवाइस के लिए सबसे सही इमेज चुनी जा सकती है.
सभी डिवाइसों पर काम करने वाली इमेज, छोटे डिवाइसों के लिए ज़रूरत से ज़्यादा बड़ी होगी. रिस्पॉन्सिव इमेज की तकनीकों, खास तौर पर srcset और sizes की मदद से, इमेज के कई वर्शन तय किए जा सकते हैं. साथ ही, डिवाइस के लिए सबसे सही साइज़ चुनने का विकल्प भी दिया जा सकता है.
इमेज का साइज़ बदलना
चाहे आपने कोई भी तरीका चुना हो, इमेज का साइज़ बदलने के लिए 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 को फिर से चलाएं. इससे यह पुष्टि की जा सकेगी कि आपने कोई इमेज नहीं छोड़ी है.