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

Katie Hempenius

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

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

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

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

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

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

इमेज का साइज़ बदलने वाले दो सबसे लोकप्रिय टूल हैं, शार्प एनपीएम पैकेज और 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

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

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

अन्य विकल्प

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

इमेज के एक से ज़्यादा वर्शन इस्तेमाल करें

जब इमेज के एक से ज़्यादा वर्शन तय किए जाते हैं, तो ब्राउज़र, इमेज के सबसे अच्छे वर्शन को चुन लेता है इस्तेमाल करें:

<img> टैग का src, srcset, और sizes एट्रिब्यूट की वैल्यू शामिल की गई है.

"src" विशेषता

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

"srcset" विशेषता

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

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

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

"साइज़" विशेषता

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

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

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

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

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

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

पुष्टि करें

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