तस्वीर वाला एलिमेंट

पिछले मॉड्यूल में दिखाया गया था कि 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 एलिमेंट एक बेहतरीन टूल होता है.

यहां एक तरह की इमेज है, जिसके लिए आपको किसी भी समाधान की ज़रूरत नहीं होती है: आइकॉन. यही आगे के लिए तैयार है.

देखें कि आपको कितना समझ आया है

फ़ोटो एलिमेंट के बारे में अपनी जानकारी को परखें