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

पिछले मॉड्यूल में बताया गया था कि 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">
</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">
</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"
    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" fetchpriority="high">
</picture>

ध्यान रखें कि इमेज सोर्स के हिसाब से, alt एट्रिब्यूट की वैल्यू नहीं बदली जा सकती. आपको एक alt एट्रिब्यूट लिखना होगा. इसमें पूरी इमेज और काटी गई इमेज, दोनों के बारे में जानकारी दी गई हो.

ज़्यादातर रिस्पॉन्सिव इमेज के लिए, आपको picture एलिमेंट का इस्तेमाल करने की ज़रूरत नहीं होगी. img एलिमेंट पर मौजूद srcset और sizes एट्रिब्यूट, इस्तेमाल के कई मामलों को कवर करते हैं. हालांकि, अगर आपको ज़्यादा कंट्रोल की ज़रूरत है, तो picture एलिमेंट एक बेहतरीन टूल है.

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

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

पिक्चर एलिमेंट के बारे में अपनी जानकारी की जांच करें