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

Katie Hempenius

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

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

रिस्पॉन्सिव इमेज दिखाने पर, आपका पेज उपयोगकर्ता के डिवाइस की डिसप्ले क्षमताओं का आकलन करता है और इमेज के ऐसे सेट में से किसी एक को चुनता है जो उन शर्तों के हिसाब से डिसप्ले के लिए सबसे अच्छा होता है. यह आपके उपयोगकर्ताओं का डेटा बचाता है, क्योंकि मुख्य रूप से छोटी स्क्रीन वाले डिवाइसों पर छोटी इमेज दिखाई जाती हैं.

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

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

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

इमेज का साइज़ बदलने के दो सबसे लोकप्रिय टूल हैं, तेज़ npm पैकेज और ImageMagick सीएलआई टूल.

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

तेज़

नोड स्क्रिप्ट के रूप में शार्प का इस्तेमाल करने के लिए, इस कोड को अपने प्रोजेक्ट में एक अलग स्क्रिप्ट के रूप में सेव करें, फिर उसे अपनी इमेज बदलने के लिए चलाएं:

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

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

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

अन्य विकल्प

थंबर (ओपन-सोर्स) और Cloudinary जैसी इमेज सेवाएं भी आज़माएं. दोनों ही रिस्पॉन्सिव इमेज बनाने के आसान तरीके हैं. इनसे मांग पर इमेज में बदलाव भी होता है. thumbsor को सेट अप करने के लिए, उसे अपने सर्वर पर इंस्टॉल करें. 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 का इस्तेमाल करके यह पक्का किया जा सकता है कि आपसे कोई भी इमेज छूट न गई हो. लाइटहाउस परफ़ॉर्मेंस ऑडिट चलाएं (लाइटहाउस > विकल्प > परफ़ॉर्मेंस) और सही साइज़ वाली इमेज ऑडिट से मिले नतीजे देखें. इन नतीजों में वे इमेज दिखती हैं जिनका साइज़ बदलने की ज़रूरत है.