📘 Lesson · Lesson 33

Responsive Images: srcset, picture

Why One Image Size Fails Everyone

Serve one big image to all devices and you lose twice: a phone on mobile data downloads a huge 2000px file it displays at 400px (slow, wasteful of the visitor's data), while a large screen gets a small image that looks blurry when stretched. Responsive images serve the RIGHT size to each device — small file to the phone, large file to the desktop, automatically. On shared hosting where bandwidth matters, this is real money and real speed.

srcset — let the browser pick the resolution

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1600.jpg 1600w"
     alt="School building">

Browser looks at the screen + its pixel density, then downloads the best-matching file. A phone grabs photo-400; a retina laptop grabs photo-1600. Old browsers that don't understand srcset fall back to plain src.

You supply several versions of the SAME image at different widths (the 400w tells the browser each file's real pixel width). The browser does the choosing — you never write "if mobile then...". src stays as the universal fallback.

The sizes Attribute — telling the browser the display width

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="School building">

sizes tells the browser how wide the image will actually DISPLAY, so it can choose even more accurately BEFORE downloading. Read the example as: "on screens up to 600px, the image fills 100% of viewport width; otherwise 50%." Combined with srcset, the browser now knows both the available files and the display size — and picks perfectly. (vw = viewport width; more in the CSS course.)

picture — Art Direction (different image, not just size)

<picture>
    <source media="(max-width: 600px)" srcset="school-square.jpg">
    <source media="(min-width: 601px)" srcset="school-wide.jpg">
    <img src="school-wide.jpg" alt="School building">
</picture>

srcset vs picture — the key distinction: srcset switches between the SAME image at different sizes (resolution switching). <picture> switches between DIFFERENT images per condition — this is art direction. Example: on desktop show a wide landscape banner; on a narrow phone show a cropped square version where the subject is still clearly visible. The <img> inside is the mandatory fallback and also carries the alt. First matching <source> wins.

Format Fallback and lazy loading — two speed wins

<!-- Serve modern WebP, fall back to JPG automatically -->
<picture>
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="School" loading="lazy">
</picture>

WebP fallback: browsers that support WebP get the smaller file; others silently get the JPG — best of both, no risk.
loading="lazy": images below the fold load only as the user scrolls near them, so the page opens fast. One attribute, meaningful speed gain — especially on image-heavy pages.

These two lines together — modern format with fallback, plus lazy loading — are the practical responsive-image setup used on real production sites.

Exam Corner

Q: What does srcset do? Offers multiple sizes of the same image so the browser downloads the best fit for the device.

Q: srcset vs picture? srcset = same image, different resolutions; picture = different images per condition (art direction).

Q: What does the sizes attribute tell the browser? How wide the image will display, to help it choose the right srcset file.

Q: How to serve WebP with a JPG fallback? A <picture> with a <source type="image/webp"> and a JPG <img>.

Q: What does loading="lazy" do? Delays loading off-screen images until the user scrolls near them, speeding page load.

एक Image Size क्यों नाकाफी है

एक ही 2000px चौड़ी image हर device पर भेजना दो तरह से नुकसान करता है. Phone user को वह पूरी भारी file download करनी पड़ती है (धीमा page, mobile data बर्बाद) जबकि उसकी screen पर सिर्फ 400px दिख रहे हैं. दूसरी ओर, अगर आप छोटी image भेजें तो बड़े desktop या retina screen पर वह धुंधली दिखेगी. Responsive images का हल: browser को कई विकल्प दीजिए, और उसे खुद चुनने दीजिए कि screen और connection के हिसाब से कौन-सी file उतारनी है. यह page speed सुधारने के सबसे असरदार तरीकों में से एक है.

srcset — Resolution Switching

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1600.jpg 1600w"
     alt="School building">

srcset में आप एक ही image के कई versions और उनकी असली चौड़ाई (400w = 400 pixels चौड़ी) बताते हैं. Browser device की screen width, pixel density, और कभी-कभी network speed देखकर सबसे उपयुक्त file उतारता है. src attribute fallback के लिए रहता है — बहुत पुराने browsers जो srcset नहीं समझते वही उतारते हैं. ध्यान दीजिए यह वही image है, बस अलग आकारों में — इसे "resolution switching" कहते हैं. सारे images एक जैसे दिखते हैं, सिर्फ file का वज़न बदलता है.

sizes Attribute

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            600px"
     alt="School building">

sizes browser को बताता है कि image layout में कितनी जगह घेरेगी — srcset से चुनाव करने के लिए यही जानकारी चाहिए. ऊपर के उदाहरण का मतलब: 600px से छोटी screen पर image पूरी चौड़ाई (100vw) लेगी; 1200px तक आधी चौड़ाई (50vw); उससे बड़ी screen पर fixed 600px. Browser यह गणित करके तय करता है कि 400w, 800w या 1600w में से कौन-सी file चाहिए. बिना sizes के browser मान लेता है कि image पूरी viewport चौड़ाई लेगी, और अक्सर ज़रूरत से बड़ी file उतार लेता है.

picture — Art Direction

<picture>
  <source media="(max-width: 600px)" srcset="hero-square.jpg">
  <source media="(min-width: 601px)" srcset="hero-wide.jpg">
  <img src="hero-wide.jpg" alt="Students in classroom">
</picture>

<picture> तब चाहिए जब आप अलग screens पर अलग तरह से काटी गई image दिखाना चाहें — यह "art direction" है, सिर्फ आकार बदलना नहीं. जैसे desktop पर चौड़ी banner image जिसमें पूरा classroom दिखे, पर phone पर उसी की square crop जिसमें सिर्फ बच्चों के चेहरे दिखें (क्योंकि चौड़ी image में चेहरे बहुत छोटे हो जाते). हर <source> की media query जाँची जाती है ऊपर से नीचे, और पहली मिलती हुई चुनी जाती है. <img> tag अंदर होना ज़रूरी है — वही fallback है और वही alt रखता है.

Format Fallback और lazy loading

<!-- Naye format pehle, purana fallback aakhri me -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="School building">
</picture>

<!-- Neeche wali images tabhi load ho jab user scroll kare -->
<img src="photo.jpg" alt="..." loading="lazy" width="800" height="600">

<picture> का दूसरा बड़ा काम है नए image formats देना. AVIF और WebP, JPEG से काफी छोटे होते हैं. Browser ऊपर से नीचे पढ़ता है और जो पहला format वह समझता है वही उतारता है — नए browsers को AVIF मिलेगा, पुराने को JPEG. loading="lazy" उन images को तब तक download नहीं करता जब तक user उन तक scroll न करे — page पहली बार बहुत तेज़ खुलता है. साथ में width और height ज़रूर दीजिए ताकि image load होने पर page उछले नहीं (layout shift).

Exam Corner

Q: srcset क्या करता है? एक ही image के कई आकार देता है ताकि browser screen के हिसाब से सबसे सही चुने.

Q: srcset में 800w का क्या मतलब है? वह image file असल में 800 pixels चौड़ी है.

Q: sizes attribute क्यों चाहिए? यह बताता है image layout में कितनी जगह लेगी, जिससे browser सही file चुन सके.

Q: srcset और <picture> में मुख्य अंतर? srcset एक ही image के अलग आकार देता है; picture अलग-अलग crop या format दे सकता है.

Q: loading="lazy" क्या करता है? Image तभी download करता है जब user उसके पास scroll करे.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.