OneTaskBy Tim King · Updated
Responsive Image Generator
Image Path and Width to srcset, Sizes and Picture Markup With AVIF and WebP
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Responsive Image Generator works
A responsive image generator writes the srcset, sizes and <picture> markup that lets the
browser download the smallest image that still looks sharp on each screen. Enter the image path,
its original size and how wide it appears, then copy the HTML and the commands that make each file.
A single large image sent to every visitor wastes data on phones, and a small one looks blurry on wide or high-density screens. Responsive images fix this by listing several widths of the same picture and telling the browser how wide it will be drawn, so it can pick the right file before the page has even laid out.
How the responsive image generator builds srcset and sizes
srcset lists each file with its real width, such as hero-800.jpg 800w. sizes describes the
slot the image fills: 100vw for a full-bleed banner, (max-width: 1200px) 100vw, 1200px for an
image that stops growing at 1200 pixels, or a fraction of the viewport for a grid column. The
browser multiplies the slot width by the screen's pixel density and downloads the first file that
is wide enough.
AVIF, WebP and the picture element
<picture> adds <source> elements for newer formats. Browsers take the first type they support,
so AVIF comes first, then WebP, and the <img> inside holds the original JPEG or PNG for anything
older. AVIF files are often half the size of a JPEG at the same quality.
Loading and layout shift
Below-the-fold images get loading="lazy" so they only download near the viewport. The main image
at the top of the page should load eagerly with fetchpriority="high", and optionally a preload
link, because it is usually the Largest Contentful Paint. The width and height attributes let
the browser reserve the right space, which stops the page jumping as images arrive.
FAQ
Which widths should I generate?
Four to six widths from about 480 pixels up to twice the largest display width cover phones, tablets and high-density laptops. More files give closer matches but add build time and storage, and steps closer than about 300 pixels rarely save much data.
Do I need sizes if I use srcset?
Yes whenever srcset uses w descriptors. Without sizes the browser assumes the image fills the
whole viewport, so a small thumbnail in a grid would download the biggest file. The sizes value only
needs to be roughly right, not pixel exact.
Should width and height match the displayed size?
No. They should be the original file's width and height, or any pair with the same ratio. The CSS
max-width: 100% and height: auto rules still scale the image, and the browser uses the pair only
to work out the aspect ratio and reserve space.
What about density descriptors like 2x?
Use 1x and 2x only for images that always show at one fixed pixel size, such as a logo or an
avatar. For anything that changes width with the layout, width descriptors with sizes let the
browser choose far more accurately.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Image To WebP
Convert to WebP, JPEG or PNG with a quality slider.
Image Resizer
Resize to a width, height or percent with the aspect ratio locked.
Aspect Ratio
Aspect-ratio CSS plus the padding-top percentage fallback.
Image Placeholder Generator
Make sized placeholder images as SVG, PNG, data URI or CSS.
Blur-Up Image Placeholder
Make a tiny base64 LQIP and the code to blur-up images as they load.