srcset एट्रिब्यूट
srcset एट्रिब्यूट HTML में विभिन्न स्थितियों (स्क्रीन आकार, रिज़ॉल्यूशन, आदि) के लिए अलग-अलग छवि URL निर्दिष्ट करने के लिए उपयोग किया जाता है। यह रिस्पॉन्सिव छवियों को सक्षम बनाता है, जिससे ब्राउज़र उपयोगकर्ता के डिवाइस के लिए सबसे उपयुक्त छवि चुन सकता है।
कार्यप्रणाली
<picture>तत्व के साथ<source>टैग्स का उपयोग करके मीडिया क्वेरीज़ के आधार पर अलग-अलग छवियाँ प्रदान की जाती हैं।- ब्राउज़र पहला मिलान करने वाला
<source>चुनता है जिसकी मीडिया क्वेरी सत्य है। - यदि कोई मीडिया क्वेरी मेल नहीं खाती, तो फॉलबैक
<img>उपयोग किया जाता है। srcsetमें डिस्क्रिप्टर्स (w, x) शामिल हो सकते हैं जो चौड़ाई या पिक्सेल घनत्व दर्शाते हैं।
उदाहरण
निम्नलिखित कोड srcset का उपयोग करके रिस्पॉन्सिव छवि दिखाता है। ब्राउज़र आकार बदलकर अलग-अलग छवियाँ लोड होते देखें:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 500px)" srcset="medium.jpg">
<img src="small.jpg" alt="रिस्पॉन्सिव छवि उदाहरण" style="width:100%; max-width:800px;">
</picture>
</body>
</html>
उन्नत उपयोग: पिक्सेल घनत्व (x डिस्क्रिप्टर)
<img src="image-1x.jpg"
srcset="image-1x.jpg 1x,
image-2x.jpg 2x,
image-3x.jpg 3x"
alt="हाई-DPI छवि">
चौड़ाई डिस्क्रिप्टर (w) के साथ
<img src="small.jpg"
srcset="small.jpg 400w,
medium.jpg 800w,
large.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="रिस्पॉन्सिव चौड़ाई छवि">
लाभ
- बैंडविड्थ बचत: मोबाइल उपकरणों को छोटी छवियाँ मिलती हैं
- तेज़ लोडिंग: उपयुक्त आकार की छवि डाउनलोड होती है
- बेहतर UX: हाई-DPI स्क्रीन पर तेज छवियाँ
- SEO लाभ: कोर वेब वाइटल्स में सुधार
