पिछले मॉड्यूल में दिखाया गया था कि 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>
एलिमेंट की कुछ सुविधाएं: