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

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

लेआउट शिफ़्ट से बचने के लिए, <img> और srcset का इस्तेमाल करने वाले <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 एट्रिब्यूट सेट करें. इन एट्रिब्यूट के लिए सही वैल्यू इस बात पर निर्भर करती हैं कि <source> टैग, srcset का इस्तेमाल कैसे करता है.
• इमेज में बदलाव करने के लिए, उससे जुड़े <img> टैग को स्टाइल दें. <source> टैग एक खाली एलिमेंट है और इसलिए, इसका कोई असर नहीं पड़ता.
• <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>