Srcset / Sizes Helper

Generate responsive <img> markup in three steps: image variants, layout, then optional attributes. Copy the result from the top and tweak the fields below.

Generated markup

Updates live as you edit the steps below.

Show srcset and sizes separately

Image variants

Builds the srcset attribute — one URL per file width on your server or CDN.

Include {width} where each variant’s pixel width goes.

Comma-separated. Sorted smallest to largest in the output.

Advanced: validate against original width

Layout

Builds the sizes attribute — how wide the image renders in your page layout.

px and below → image is full viewport width
Optional <img> attributes

Describe the image for screen readers and when it fails to load.

Width and height help prevent layout shift (CLS).

Which file might the browser pick?

Simplified estimate for learning — real browsers use additional heuristics.

Device pixel ratio

Slot: ~390px

Preview of the image variant the browser may download

Instructions

  1. Enter a URL pattern with {width} where each variant’s pixel width belongs.
  2. List the pixel widths of each image variant you have on the server or CDN.
  3. Choose a layout preset so the sizes attribute matches how wide the image renders in your layout.
  4. Copy the generated srcset, sizes, or full <img> markup.

w vs x descriptors

This tool generates w descriptors (e.g. 800w) for images whose display size changes with the layout. Use x descriptors (e.g. 2x) only when the image renders at a fixed CSS size and you are offering retina alternatives — icons and logos are the usual case.

Why sizes matters

With w descriptors, the browser does not know how wide the image will appear on screen unless you tell it via sizes. If sizes is missing or wrong, the browser assumes 100vw and may download a much larger file than needed.

Common mistakes

  • Using sizes="100vw" when the image only occupies a sidebar or article column.
  • Omitting width and height on the tag, which hurts layout stability (CLS).
  • Listing the same file URL for every w value instead of real width variants.

<picture>

Art direction (different crops per breakpoint) needs <picture> and <source media="…"> — not covered here.