srcset & sizes generator

Build a complete responsive <img> or <picture> tag. The browser picks a source from DPR and the slot width your sizes attribute describes.

Image pattern

Base URL (use {width} placeholder)

Density descriptor mode (1x, 2x) instead of width descriptors

Widths

sizes rules

Default slot (no media query)

Attributes

alt

width

height

decoding

fetchpriority

Output as <picture> with AVIF/WebP sources

AVIF srcset

WebP srcset

How the browser picks

Example DPR

Example slot (px)

Output

srcset

sizes

Markup

About this tool

The srcset attribute lists image candidates with width or density descriptors. The sizes attribute tells the browser how wide the image will render at each viewport — it multiplies that slot width by device pixel ratio to choose the best file.

Always set width and height on above-the-fold images to prevent layout shift (CLS).

Related tools

Free books, courses, and software

Get my programming books, course editions, and complete software.

Get the download library →