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

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

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

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

अन्य विकल्प

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" एट्रिब्यूट

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

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

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

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

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

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

पुष्टि करें

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