Engrain by ByteRush

WEB.10.01 Mid-level· 11 minCore — asked often

Responsive images: srcset, sizes, picture and the right loading hints

How srcset with width descriptors and sizes lets the browser pick the right file, when to use density descriptors, picture for art direction and AVIF/WebP, lazy loading, decoding, fetchpriority, and why width and height matter.

Comes up in: Web fundamentals, Frontend system design

Learn#

Kunal’s travel site sends the same 2,400-pixel, 900 KB hero photo to every phone. On a slow connection, the page’s main image, its LCP, takes 6 seconds.

srcset lists files at different widths; sizes tells the browser how wide the image will be shown, before CSS has loaded. The browser multiplies that slot by the screen’s pixel density and picks the smallest file that is big enough:

<img
  src="hero-800.jpg"
  srcset="hero-480.avif 480w, hero-800.avif 800w, hero-1200.avif 1200w, hero-1600.avif 1600w"
  sizes="(min-width: 600px) 600px, 100vw"
  width="1600" height="900" alt="Houseboats on the backwaters at sunset"
  fetchpriority="high">

A srcset with w descriptors gives choices; sizes gives the slot width; the browser decides.

The width and height attributes give the aspect ratio, so the browser reserves space before the image loads and nothing jumps (CLS).

How a phone picks a file from srcsetStep 1 of 4

State

  • viewport: 390 CSS px
  • device pixel ratio: 3

Network

    empty

    The preload scanner finds the img before CSS has loaded, so it cannot know the image's real size yet.

    Read the steps as text
    1. The preload scanner finds the img before CSS has loaded, so it cannot know the image's real size yet.
    2. sizes says: below 600px wide, the image is 100vw. So the slot is 390 CSS px.
    3. 390 × 3 = 1,170 device pixels needed. srcset offers 480w, 800w, 1200w and 1600w.
    4. The browser picks hero-1200.avif, the smallest that is big enough. A laptop at 1x with a 600px slot would get the 800w file.

    Predict#

    Predict first

    An img has srcset with w descriptors but no sizes attribute. What slot width does the browser assume?

    Interview angle#

    Say it like this — about 30 seconds

    “srcset lists the same image at several widths, using w descriptors. sizes tells the browser how wide the image will be displayed at each breakpoint, because the choice happens before layout. The browser multiplies that width by the device pixel ratio and picks a big enough file. I use picture with source elements for modern formats like AVIF and WebP, or for art direction. I always set width and height to prevent layout shift, lazy-load below the fold, and give the LCP image fetchpriority high.”

    Stays on your device. Nothing is uploaded.
    Follow-up How do srcset and sizes work together?
    srcset offers widths; sizes states the display width per media condition; the browser picks the smallest file that covers slot × pixel density.
    Follow-up When do you use picture instead of srcset?
    For art direction (a different crop on mobile) or for format fallbacks (AVIF, then WebP, then JPEG).
    Follow-up Should the LCP image be lazy-loaded?
    Never. Lazy loading delays it; give it fetchpriority=“high” instead.

    Practice#

    Guided

    Parse a srcset and choose a file the way browsers typically do.

    Done when

    • parseSrcset returns the candidates sorted by width.
    • pick returns the smallest candidate at least slot × density wide.
    • When nothing is big enough, pick returns the largest.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    What does sizes tell the browser?

    How wide the image will be displayed, before CSS loads.

    What slot width is assumed when sizes is missing?

    100vw.

    When do you need picture instead of plain srcset?

    For art direction or format fallbacks such as AVIF and WebP.

    Why set width and height on img?

    To reserve space by aspect ratio and avoid layout shift.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round
    For fixed-size images such as a 48px avatar, density descriptors are simpler: srcset="a-48.jpg 1x, a-96.jpg 2x". Use w descriptors when the displayed size changes with the layout.
    Check yourself: When are 1x/2x density descriptors the right choice?

    For images shown at a fixed CSS size, such as a logo or avatar.

    How it works underneathSenior rounds

    The HTML spec lets the browser choose any candidate: it may reuse a larger file already in cache, or pick a smaller one to save data. Treat srcset as options, not orders .

    Check yourself: Does the browser have to pick the exact file you expect from srcset?

    No. The choice is a hint; it may use a cached larger file or save data.

    Edge cases and trapsWhere people slip

    <picture> takes the first <source> whose media and type match, else the <img>. List AVIF first, then WebP, then JPEG in the img. The img still carries alt, width and height.
    Art direction means a different crop for small screens; image format choice can halve file size.

    Check yourself: In a picture element, which source is used?

    The first source whose media and type match.

    In productionStaff-level answers
    Use loading="lazy" below the fold, decoding="async" for large images, and fetchpriority="high" on the LCP image (WEB.01.05). Image CDNs can create the widths and formats for you .
    Check yourself: What does decoding=&quot;async&quot; do?

    Lets the browser decode the image off the main path, so it does not delay other content.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • How do srcset and sizes work together?