HTML रिस्पॉन्सिव इमेजेस
In this page:
<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 चुन लेता है।
- जो 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
उदाहरण: The srcset Attribute
<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 चुन पाता है।
- बेहतर 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()
उदाहरण: The sizes Attribute
<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 करने देता है।
- जब आपकी 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
उदाहरण: The picture Element for Art Direction
<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 ही न करे।
- Accepted values:
- loading — lazy | eager (default)
- decoding — async | sync | auto
उदाहरण: Lazy Loading Images
<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 लोड होते समय इधर-उधर उछलने से बच जाता है।
- Accepted attributes:
- width — integer pixels
- height — integer pixels
उदाहरण: Setting width and height to Prevent Layout Shift
<img src="photo.jpg" width="800" height="600" alt="Photo">Chapter Quiz — Complete all 20 topics to unlock
0/20 topics done
Complete these topics first:
- HTML Keyboard Shortcuts
- HTML Browser Support
- HTML Character Sets
- HTML Doctypes
- HTML Audio/Video Reference
- HTML Meta Tags
- HTML ARIA Roles
- HTML Input Validation
- HTML Iframe Security
- HTML Responsive Images
- HTML Web Fonts
- HTML Icon Fonts
- HTML Progress & Meter
- HTML Output Element
- HTML Datalist
- HTML Image Maps
- HTML Browser DevTools
- HTML Validation
- HTML Quiz
- HTML Interview Prep