रिस्पॉन्सिव इमेज दिखाएं

Katie Hempenius

मोबाइल डिवाइसों पर डेस्कटॉप साइज़ की इमेज दिखाने से, ज़रूरत से 2 से 4 गुना ज़्यादा डेटा का इस्तेमाल हो सकता है. अलग-अलग डिवाइसों पर इमेज के अलग-अलग साइज़ दिखाकर, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इस पेज पर दिए गए दिशा-निर्देशों का पालन करें.

रिस्पॉन्सिव इमेज और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी

रिस्पॉन्सिव इमेज दिखाने पर आपका पेज, उपयोगकर्ता के डिवाइस पर दिखने की क्षमता का आकलन करता है. साथ ही, इस बात की भी जांच करता है कि इन शर्तों के आधार पर इमेज के किन ग्रुप को दिखाना बेहतर होगा. इससे आपके उपयोगकर्ताओं का डेटा बचता है, खास तौर पर छोटी स्क्रीन वाले डिवाइसों पर छोटे साइज़ की इमेज दिखाई जाती हैं.

इमेज के तेज़ी से लोड होने का असर, आपके पेज के सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर भी पड़ सकता है. उदाहरण के लिए, अगर आपके पेज का एलसीपी एलिमेंट कोई इमेज है, तो उसे रिस्पॉन्सिव तरीके से दिखाने पर, संसाधन लोड होने में लगने वाला समय कम हो सकता है.

कम संसाधन लोड होने की वजह से, एलसीपी इमेज लोड होने में कम समय लगता है. इससे आपके पेज का एलसीपी स्कोर बेहतर होता है. एलसीपी का कम होना, इसका मतलब है कि उपयोगकर्ताओं को आपकी साइट तेज़ी से लोड होती हुई दिखेगी. खास तौर पर, सबसे ज़रूरी कॉन्टेंट (एलसीपी एलिमेंट) तेज़ी से लोड होता हुआ दिखेगा. रिस्पॉन्सिव इमेज दिखाने से, पेज पर मौजूद अन्य संसाधनों के लिए बैंडविड्थ की कमी भी हो सकती है. इससे, आपके पेज के लोड होने की स्पीड बेहतर हो सकती है.

इमेज का साइज़ बदलना

इमेज का साइज़ बदलने वाले दो सबसे लोकप्रिय टूल, sharp npm पैकेज और ImageMagick CLI टूल हैं.

इमेज का साइज़ अपने-आप बदलने के लिए, शार्प पैकेज एक अच्छा विकल्प है. उदाहरण के लिए, अपनी वेबसाइट पर मौजूद सभी वीडियो के लिए अलग-अलग साइज़ के थंबनेल जनरेट करना. यह तेज़ी से काम करता है और बिल्ड स्क्रिप्ट और टूल के साथ अच्छी तरह से इंटिग्रेट होता है. इमेज का साइज़ एक बार में बदलने के लिए, ImageMagick का इस्तेमाल करना ज़्यादा आसान है, क्योंकि यह पूरी तरह से कमांड-लाइन से चलता है.

तेज़

sharp को Node स्क्रिप्ट के तौर पर इस्तेमाल करने के लिए, इस कोड को अपने प्रोजेक्ट में अलग स्क्रिप्ट के तौर पर सेव करें. इसके बाद, अपनी इमेज को बदलने के लिए इसे चलाएं:

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

किसी इमेज को उसके मूल साइज़ का 33% करने के लिए, अपने टर्मिनल में नीचे दिया गया कमांड चलाएं:

convert -resize 33% flower.jpg flower-small.jpg

किसी इमेज का साइज़ बदलकर, उसे 300 पिक्सल चौड़े और 200 पिक्सल ऊंचे स्पेस में फ़िट करने के लिए, यह कमांड चलाएं:

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

आपको इमेज के कितने वर्शन बनाने चाहिए?

इस सवाल का कोई एक "सही" जवाब नहीं है. हालांकि, आम तौर पर किसी इमेज के 3 से 5 अलग-अलग साइज़ दिखाए जाते हैं. परफ़ॉर्मेंस के लिए, इमेज के ज़्यादा साइज़ दिखाना बेहतर होता है. हालांकि, इससे आपके सर्वर पर ज़्यादा जगह लेती है और आपको थोड़ा ज़्यादा एचटीएमएल लिखना पड़ता है.

अन्य विकल्प

Thumbor (ओपन-सोर्स) और Cloudinary जैसी इमेज सेवाओं को भी आज़माना फ़ायदेमंद है. ये दोनों, रिस्पॉन्सिव इमेज बनाने के आसान तरीके हैं. इनकी मदद से, मांग के हिसाब से इमेज में बदलाव भी किया जा सकता है. Thumbor को सेट अप करने के लिए, इसे अपने सर्वर पर इंस्टॉल करें. Cloudinary आपके लिए जानकारी का ध्यान रखता है और इसके लिए किसी सर्वर सेटअप की ज़रूरत नहीं होती.

इमेज के कई वर्शन दिखाना

इमेज के एक से ज़्यादा वर्शन तय करने पर, ब्राउज़र सबसे सही वर्शन चुनता है:

ऐसा नतीजा पाने के लिए, <img> टैग के src, srcset, और sizes एट्रिब्यूट सभी इंटरैक्ट करते हैं.

"src" एट्रिब्यूट

src एट्रिब्यूट की मदद से, यह कोड उन ब्राउज़र पर इस्तेमाल किया जा सकता है जो srcset और sizes एट्रिब्यूट के साथ काम नहीं करते. ऐसे ब्राउज़र, src एट्रिब्यूट में बताए गए संसाधन को लोड करते हैं.

"srcset" एट्रिब्यूट

srcset एट्रिब्यूट, इमेज के फ़ाइल नामों और उनकी चौड़ाई या डेंसिटी के ब्यौरे की कॉमा लगाकर अलग की गई सूची होती है.

इस उदाहरण में, चौड़ाई के डिस्क्रिप्टर का इस्तेमाल किया गया है. इससे ब्राउज़र को पता चलता है कि इमेज कितनी चौड़ी है, ताकि उसे डाउनलोड करने की ज़रूरत न पड़े. 480w, चौड़ाई का ब्यौरा देने वाला एलिमेंट है. इससे ब्राउज़र को पता चलता है कि flower-small.jpg की चौड़ाई 480 पिक्सल है. 1080w, चौड़ाई वाला डिस्क्रिप्टर है. इससे ब्राउज़र को पता चलता है कि flower-large.jpg की चौड़ाई 1080 पिक्सल है.

ज़्यादा क्रेडिट: अलग-अलग साइज़ की इमेज दिखाने के लिए, आपको डेंसिटी डिस्क्रिप्टर के बारे में जानने की ज़रूरत नहीं है. हालांकि, अगर आपको यह जानना है कि डेंसिटी डिस्क्रिप्टर कैसे काम करते हैं, तो रिज़ॉल्यूशन स्विच करने वाले कोड का लैब देखें. डेंसिटी डिस्क्रिप्टर का इस्तेमाल, डिवाइस की पिक्सल डेंसिटी के आधार पर अलग-अलग इमेज दिखाने के लिए किया जाता है.

"साइज़" एट्रिब्यूट

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

ब्राउज़र, उपयोगकर्ता के डिवाइस (इसमें उसके डाइमेंशन और पिक्सल डेंसिटी भी शामिल है) के बारे में अपनी जानकारी के साथ-साथ इस जानकारी का इस्तेमाल करके यह तय करता है कि कौनसी इमेज लोड करनी है.

अगर कोई ब्राउज़र "sizes" एट्रिब्यूट की पहचान नहीं करता है, तो वह "src" एट्रिब्यूट की मदद से बताई गई इमेज को लोड करता है. (sizes और srcset को एक साथ लॉन्च किया गया था. इसलिए, हर ब्राउज़र में दोनों एट्रिब्यूट काम करते हैं या फिर कोई भी काम नहीं करता.)

अतिरिक्त क्रेडिट: अगर आपको इस्तेमाल करना है, तो साइज़ एट्रिब्यूट का इस्तेमाल अलग-अलग स्लॉट साइज़ तय करने के लिए भी किया जा सकता है. यह उन वेबसाइटों के लिए सही है जो अलग-अलग व्यूपोर्ट साइज़ के लिए अलग-अलग लेआउट का इस्तेमाल करती हैं. ऐसा करने का तरीका जानने के लिए, एक से ज़्यादा स्लॉट वाले कोड का सैंपल देखें.

(और भी) ज़्यादा क्रेडिट

पहले से दी गई अतिरिक्त क्रेडिट के अलावा (इमेज जटिल हैं!), इन कॉन्सेप्ट का इस्तेमाल आर्ट डायरेक्शन के लिए भी किया जा सकता है. आर्ट डायरेक्शन एक ऐसा तरीका है जिसमें अलग-अलग व्यूपोर्ट में, एक ही इमेज के अलग-अलग वर्शन दिखाने के बजाय, पूरी तरह से अलग दिखने वाली इमेज दिखाई जाती हैं. आर्ट डायरेक्शन कोड लैब में जाकर, इस बारे में ज़्यादा जानें.

पुष्टि करें

रिस्पॉन्सिव इमेज लागू करने के बाद, लाइटहाउस का इस्तेमाल किया जा सकता है, ताकि यह पक्का किया जा सके कि आपसे कोई भी इमेज छूट न जाए. लाइटहाउस परफ़ॉर्मेंस ऑडिट (Lighthouse > विकल्प > परफ़ॉर्मेंस) चलाएं और इमेज का सही साइज़ ऑडिट के नतीजे देखें. इन नतीजों में, उन इमेज की सूची होती है जिनका साइज़ आपको अब भी बदलना है.