← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 10 of 20

HTML रिस्पॉन्सिव इमेजेस

किसी mobile user को high resolution desktop image देने से उनका data बर्बाद होता है और आपका page धीमा हो जाता है। Responsive images browser को सही device के लिए सही image size चुनने देकर इसे solve करते हैं। HTML इसके लिए दो शक्तिशाली tools देता है: srcset और picture element।

In this page:

  1. srcset एट्रिब्यूट
  2. sizes एट्रिब्यूट
  3. Art Direction के लिए picture एलिमेंट
  4. लेज़ी लोडिंग इमेजेस
  5. Layout Shift रोकने के लिए width और height सेट करना
Syntax
markup 
<img src="default.jpg" srcset="small.jpg 480w, large.jpg 1080w" sizes="(max-width: 600px) 480px, 1080px" alt="Description">

srcset एट्रिब्यूट

srcset browser को अलग-अलग sizes में image options का एक menu देता है। browser device की screen size और resolution के आधार पर सबसे अच्छा option चुन लेता है।

Note:
  • जो browsers srcset support नहीं करते उनके लिए हमेशा एक fallback src शामिल करें।
  • Accepted values:
  • url Nw — image width descriptor, e.g. photo-800.jpg 800w
  • url Nx — pixel density descriptor, e.g. [email protected] 2x
  • Entries are comma-separated
Warning: srcset एक suggestion है, कोई command नहीं — browser फिर भी कोई cached बड़ी image चुन सकता है।

उदाहरण: The srcset Attribute

markup 
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" alt="Photo">

sizes एट्रिब्यूट

sizes attribute browser को बताता है कि अलग-अलग viewport sizes पर image कितनी चौड़ाई पर display होगी। इससे browser कुछ भी download करने से पहले सही srcset option चुन पाता है।

Note:
  • बेहतर results के लिए अपनी sizes values को अपने CSS breakpoints से मैच करें।
  • Accepted values:
  • (media-condition) length — e.g. (max-width: 600px) 100vw
  • Final entry is the default length, e.g. 50vw
  • Lengths use px, vw, em, calc()
Warning: sizes के बिना browser मान लेता है कि image हमेशा 100vw चौड़ी है, जिससे unnecessarily बड़ी images download होती हैं।

उदाहरण: The sizes Attribute

markup 
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Photo">

Art Direction के लिए picture एलिमेंट

कभी-कभी आपको mobile पर बस उसी image का छोटा version नहीं चाहिए होता — आपको पूरी तरह अलग crop या composition चाहिए होता है। picture element आपको अलग-अलग screen sizes के लिए पूरी तरह अलग images specify करने देता है।

Note:
  • जब आपकी image को mobile बनाम desktop के लिए सिर्फ अलग size नहीं बल्कि अलग cropping चाहिए हो, तब picture इस्तेमाल करें।
  • Accepted attributes:
  • source media — media query
  • source srcset — image URL(s)
  • source type — MIME type
  • img src / alt — required fallback
Warning: picture के अंदर हमेशा एक fallback img tag शामिल करें — जो browsers picture support नहीं करते वे इसे दिखाएंगे।

उदाहरण: The picture Element for Art Direction

markup 
<picture>
  <source media="(max-width: 600px)" srcset="photo-square.jpg">
  <img src="photo-wide.jpg" alt="Photo">
</picture>

लेज़ी लोडिंग इमेजेस

loading="lazy" attribute browser को बताता है कि किसी image का लोड होना तब तक टाल दे जब तक वह view में scroll होने वाली न हो, जिससे initial page load तेज़ होता है क्योंकि वे images download नहीं होतीं जिन तक visitor शायद कभी scroll ही न करे।

Note:
  • Accepted values:
  • loading — lazy | eager (default)
  • decoding — async | sync | auto

उदाहरण: Lazy Loading Images

markup 
<img src="photo.jpg" alt="Photo" loading="lazy">

Layout Shift रोकने के लिए width और height सेट करना

responsive images के साथ भी, width और height attributes (या CSS में एक aspect-ratio) को explicitly सेट करना page पर image के download पूरा होने से पहले ही सही जगह reserve कर देता है, जिससे उसके आसपास का content लोड होते समय इधर-उधर उछलने से बच जाता है।

Note:
  • Accepted attributes:
  • width — integer pixels
  • height — integer pixels

उदाहरण: Setting width and height to Prevent Layout Shift

markup 
<img src="photo.jpg" width="800" height="600" alt="Photo">
Live Example
Related Topics

HTML रिस्पॉन्सिव · HTML पृष्ठभूमि छवियाँ · HTML इमेज · HTML Iframe सिक्योरिटी

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. srcset इस्तेमाल करते समय fallback src attribute भूल जाना।
  2. picture element के अंदर img fallback छोड़ देना।
  3. sizes के बिना srcset इस्तेमाल करना, जिससे browser 100vw width मान लेता है।
चैप्टर सारांश
  • srcset browser को चुनने के लिए कई image size options देता है।
  • Width descriptors (400w) browser को हर option की actual pixel width बताते हैं।
  • sizes attribute browser को बताता है कि image कितनी चौड़ी display होगी।
  • picture element अलग-अलग screen sizes के लिए पूरी तरह अलग images देने देता है।
  • पुराने browsers के लिए हमेशा एक fallback src या img शामिल करें।
ब्राउज़र सपोर्ट

srcset और sizes सभी modern browsers में supported हैं। picture element Chrome, Firefox, Safari, और Edge में supported है। IE11 इनमें से कोई भी support नहीं करता।

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Iframe Security Next Lesson → HTML Web Fonts

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.