रिस्पॉन्सिव इमेज और आर्ट डायरेक्शन

रिस्पॉन्सिव इमेज को अक्सर srcset एट्रिब्यूट का इस्तेमाल करके लागू किया जाता है. srcset एट्रिब्यूट, इमेज फ़ाइल के नामों और उनकी चौड़ाई या डेंसिटी डिस्क्रिप्टर की सूची होती है. इस लिस्ट को कॉमा लगाकर अलग किया जाता है. लेआउट शिफ़्ट रोकने के लिए, srcset का इस्तेमाल करने वाले <img> और <source> टैग पर width और height एट्रिब्यूट सेट करें.

डेंसिटी डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज के लिए:

• src और srcset में दी गई सभी इमेज का आसपेक्ट रेशियो एक जैसा होना चाहिए.
• width और height एट्रिब्यूट को सेट करें, ताकि वे 1x इमेज के डाइमेंशन से मेल खाएं.
• src एट्रिब्यूट से, 1x इमेज की जानकारी मिलनी चाहिए.

चौड़ाई डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज के लिए:

• src और srcset में दी गई सभी इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) एक जैसा होना चाहिए.
• width और height एट्रिब्यूट को सेट करें, ताकि वे फ़ॉलबैक इमेज के डाइमेंशन से मेल खाएं.
• ज़रूरत के मुताबिक इमेज स्टाइल में बदलाव करें: सीएसएस स्टाइलिंग न होने पर, चौड़ाई डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज पर width और height सेटिंग की वजह से, इमेज हमेशा एक ही साइज़ में रेंडर होगी, भले ही srcset में शामिल की गई इमेज के डाइमेंशन अलग-अलग हों. यह तरीका आपकी पसंद के मुताबिक नहीं है. अपनी इमेज स्टाइल में width: 100%; height: auto; या width: 100vw; height: auto; जोड़ने से, आपको मनचाहा विज़ुअल मिल सकता है.

<picture> टैग के लिए:

• सभी <source> टैग के लिए, width और height एट्रिब्यूट सेट करें: width और height के लिए सही वैल्यू इस बात पर निर्भर करेंगी कि <source> टैग, srcset का इस्तेमाल कैसे करता है. (srcset के साथ काम करने से जुड़ी जानकारी के लिए ऊपर देखें.)
• इमेज स्टाइल में बदलाव करें: अगर आपको इमेज की स्टाइल में बदलाव करना है, तो ध्यान रखें कि <source> टैग में स्टाइल जोड़ने से कोई असर नहीं पड़ता. <source> टैग, खाली एलिमेंट होता है. इसके बजाय, आपको इससे जुड़े <img> टैग को स्टाइल देना होगा.
• <img> टैग पर width और height एट्रिब्यूट सेट करें: ये वैल्यू, फ़ॉलबैक इमेज के मूल साइज़ से मेल खानी चाहिए.

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>