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

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

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

जांचें कि आपको कितना समझ आया

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