पिछले मॉड्यूल में दिखाया गया था कि srcset
एट्रिब्यूट की मदद से, एक ही इमेज के अलग-अलग साइज़ के वर्शन कैसे दिए जा सकते हैं. इसके बाद, ब्राउज़र यह तय कर सकता है कि इस्तेमाल करने के लिए कौनसा वर्शन सही है. अगर आप इमेज को पूरी तरह बदलना चाहते हैं, तो आपको picture
एलिमेंट की ज़रूरत होगी.
जिस तरह srcset
, src
एट्रिब्यूट पर बनता है उसी तरह picture
एलिमेंट img
एलिमेंट पर बनता है. picture
एलिमेंट, img
एलिमेंट के चारों ओर रैप होता है.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
अगर picture
एलिमेंट के अंदर कोई img
एलिमेंट नेस्ट नहीं किया गया है, तो picture
एलिमेंट काम नहीं करेगा.
srcset
एट्रिब्यूट की तरह, picture
एलिमेंट उस img
एलिमेंट में src
एट्रिब्यूट की वैल्यू को अपडेट करेगा. अंतर यह है कि जहां srcset
एट्रिब्यूट ब्राउज़र को सुझाव देता है, वहीं picture
एलिमेंट निर्देश देता है. इससे आपको कंट्रोल मिलता है.
source
आपके पास picture
एलिमेंट में एक से ज़्यादा source
एलिमेंट जोड़ने का विकल्प होता है. हर एलिमेंट का अपना srcset
एट्रिब्यूट होता है. इसके बाद ब्राउज़र, जो भी सबसे पहले काम कर सकता है उसे लागू करता है.
इमेज फ़ॉर्मैट
इस उदाहरण में, तीन अलग-अलग फ़ॉर्मैट में तीन अलग-अलग इमेज हैं:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
पहला source
एलिमेंट, नए AVIF फ़ॉर्मैट में मौजूद इमेज पर ले जाता है. अगर ब्राउज़र AVIF इमेज को रेंडर करने में सक्षम है, तो यही वह इमेज फ़ाइल है जिसे वह चुनता है. ऐसा न होने पर, यह अगले source
एलिमेंट पर चला जाता है.
दूसरा source
एलिमेंट, WebP फ़ॉर्मैट में मौजूद इमेज पर ले जाता है. अगर ब्राउज़र WebP इमेज को रेंडर करने में सक्षम है, तो वह उस इमेज फ़ाइल का इस्तेमाल करेगा.
ऐसा न करने पर, ब्राउज़र, img
एलिमेंट के src
एट्रिब्यूट की इमेज फ़ाइल के तौर पर दिखेगा. वह इमेज JPEG फ़ॉर्मैट में है.
इसका मतलब है कि पुराने सिस्टम के साथ काम करने की सुविधा से समझौता किए बिना, नए इमेज फ़ॉर्मैट का इस्तेमाल शुरू किया जा सकता है.
उस उदाहरण में, type
एट्रिब्यूट ने ब्राउज़र को बताया था कि किस तरह का इमेज फ़ॉर्मैट तय किया गया है.
चित्र का आकार
इमेज फ़ॉर्मैट के बीच स्विच करने के साथ-साथ, इमेज के साइज़ के बीच भी स्विच किया जा सकता है. media
एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र को बताएं कि इमेज कितनी चौड़ी दिखेगी. media
एट्रिब्यूट में मीडिया क्वेरी डालें.
<picture>
<source srcset="large.png" media="(min-width: 75em)">
<source srcset="medium.png" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
यहां ब्राउज़र को बताया जा रहा है कि अगर व्यूपोर्ट की चौड़ाई 75em
से ज़्यादा है, तो उसे बड़ी इमेज का इस्तेमाल करना होगा. ब्राउज़र को 40em
से 75em
के बीच मीडियम इमेज का इस्तेमाल करना होगा. 40em
से नीचे, ब्राउज़र को छोटी इमेज का इस्तेमाल करना होगा.
यह img
एलिमेंट पर srcset
और sizes
एट्रिब्यूट का इस्तेमाल करने के तरीके से अलग है. ऐसी स्थिति में आप ब्राउज़र को सुझाव दे रहे हैं. source
एलिमेंट, सुझाव से ज़्यादा निर्देश की तरह होता है.
किसी source
एलिमेंट के srcset
एट्रिब्यूट में, पिक्सल सघनता डिस्क्रिप्टर का भी इस्तेमाल किया जा सकता है.
<picture>
<source srcset="large.png 1x" media="(min-width: 75em)">
<source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>
उस उदाहरण में, अब भी ब्राउज़र को यह बताया जा रहा है कि अलग-अलग ब्रेकपॉइंट पर क्या करना है. हालांकि, अब ब्राउज़र के पास डिवाइस की पिक्सल सघनता के हिसाब से सबसे सही इमेज चुनने का विकल्प है.
काटा जा रहा है
अगर आपको एक ही इमेज के अलग-अलग साइज़ वाले वर्शन दिखाने हैं, तो srcset
सबसे अच्छा विकल्प है. हालांकि, अगर कोई इमेज छोटे साइज़ में अच्छी नहीं दिखती, तो उसका क्रॉप किया गया वर्शन बनाया जा सकता है.
अलग-अलग इमेज की चौड़ाई और ऊंचाई का अनुपात अलग-अलग हो सकता है, ताकि वे इमेज के कॉन्टेक्स्ट को बेहतर तरीके से समझ सकें. उदाहरण के लिए, किसी मोबाइल ब्राउज़र पर, हो सकता है कि आप छोटा और लंबा आसपेक्ट रेशियो वाला कोई डेटा दिखाना चाहें. वहीं, डेस्कटॉप ब्राउज़र पर आपको चौड़ी और छोटी इमेज दिखाई जा सकती है.
यहां हीरो इमेज का एक उदाहरण दिया गया है, जो व्यूपोर्ट की चौड़ाई के हिसाब से अपने कॉन्टेंट और आकार में बदलाव करता है. हर source
एलिमेंट में width
और height
एट्रिब्यूट जोड़ें.
<picture>
<source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
<source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
<img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>
याद रखें कि इमेज के सोर्स के आधार पर, alt
एट्रिब्यूट को नहीं बदला जा सकता. आपको ऐसा alt
एट्रिब्यूट लिखना होगा जो फ़ुल साइज़ की इमेज और क्रॉप की गई इमेज, दोनों के बारे में जानकारी दे.
ज़्यादातर रिस्पॉन्सिव इमेज के लिए आपको picture
एलिमेंट का इस्तेमाल करने की ज़रूरत नहीं पड़ेगी—img
एलिमेंट में मौजूद srcset
और sizes
एट्रिब्यूट में, इस्तेमाल के कई उदाहरण शामिल होते हैं. हालांकि, अगर आपको और ज़्यादा कंट्रोल की ज़रूरत है, तो picture
एलिमेंट एक बेहतर टूल है.
यहां एक ऐसी इमेज है जिसके लिए आपको शायद किसी भी सलूशन की ज़रूरत न पड़े: आइकॉन. आगे क्या करना है.
जांचें कि आपको कितना समझ आया
फ़ोटो एलिमेंट के बारे में अपनी जानकारी की जांच करें
जहां srcset
एट्रिब्यूट, ब्राउज़र को ________ देता है, वहीं <picture>
एलिमेंट से ________ मिलता है.
<picture>
एलिमेंट की कुछ सुविधाएं ये हैं:
avif
या webp
फ़ाइलों को छोटी और आसानी से डाउनलोड करने की सुविधा देता है.