Responsive Image srcset and sizes Generator

Describe how wide an image is on phones, tablets and desktops: the generator writes the sizes attribute, suggests a small set of image widths from 54 real device screens, and gives you the <img> or <picture> markup.

(min-width: 1232px) 384px, (min-width: 1024px) calc((100vw - 80px) / 3), (min-width: 600px) calc((100vw - 56px) / 2), calc(100vw - 32px)

<img
  src="/img/photo-820.jpg"
  srcset="/img/photo-390.jpg 390w,
          /img/photo-560.jpg 560w,
          /img/photo-690.jpg 690w,
          /img/photo-760.jpg 760w,
          /img/photo-820.jpg 820w"
  sizes="(min-width: 1232px) 384px, (min-width: 1024px) calc((100vw - 80px) / 3), (min-width: 600px) calc((100vw - 56px) / 2), calc(100vw - 32px)"
  width="820" height="547"
  alt="Describe the image"
  loading="lazy" decoding="async">

How srcset and sizes work together

srcset lists the files you have and their real pixel widths (800w). sizes tells the browser how wide the image will be drawn, before the CSS has loaded. The browser multiplies that width by the screen's pixel ratio and picks a file at least that wide — a 358 px wide image on a 3× iPhone needs about 1074 pixels, on a 2.625× Pixel about 940 (MDN: Responsive images).

The rules for sizes (HTML standard):

• Entries are separated by commas; each is a media condition followed by a length: (min-width: 1024px) 384px.
• The browser uses the first entry whose condition matches, so list min-width conditions from the widest down.
• The last entry has no media condition: it is the size for everything else, here the phones.
• Lengths can be px, vw or calc(), but not percentages.
• Without sizes, a srcset with w widths is treated as 100vw — a half-width image then downloads twice as many pixels as it needs.

How the widths are chosen

For each device the tool works out the image's display width from your layout and multiplies it by the pixel ratio, capped at the density you choose. It then groups the needs from the smallest up: a group takes every need within a tolerance of its smallest, and its file is the group's largest need rounded up to 10 px. The tolerance starts at 10% and grows until there are no more widths than you allow. Few files, each only a little larger than the devices it serves.

Why cap at 2×? Most iPhones are 3× and many Android phones around 2.6×. For photos, the extra pixels of a 3× file are hard to see at arm's length, but the file can be more than twice the size of a 2× one. The cap only limits the widths the tool suggests: a 3× phone will still take a larger file if one exists for a bigger layout, as the "Downloads" column shows. Keep 3× for logos, screenshots with text and line art — or use SVG for those.

Formats, loading and layout shift

• AVIF and WebP are usually much smaller than JPEG at similar quality. With <picture>, the browser takes the first <source> whose type it supports and falls back to the <img>; each source needs its own srcset and sizes.
• width and height let the browser reserve the image's space before it loads, which prevents layout shift. Give the original's proportions; the CSS line under the markup keeps the image responsive.
• loading="lazy" delays images below the first screen. Never on the main image at the top: that one gets fetchpriority="high", as the Largest Contentful Paint guide explains.
• decoding="async" lets the browser decode the image off the main path; it's a hint and harmless on images further down.

On iPhone vs Android

The same page can weigh more on an iPhone: with the same layout, an iPhone at 3× asks for a wider file than a Pixel or Galaxy A phone at 2.625×, so it often takes the next width up. The table above shows the difference per device. Android's Data Saver and slow connections can make Chrome pick a smaller file than the screen would need — the HTML standard leaves that choice to the browser — so treat "Downloads" as the typical case.

Checking the result

In Chrome DevTools, emulate a phone, reload, and look at the image's currentSrc in the Console or at the Network panel to see which file was taken. Compare per-device page weight in a MobileCheck report — the page weight guide covers what else adds up — and see the mobile viewport sizes list for every device's width and pixel ratio.

More free tools: color contrast checker · tap target size checker · mobile font size calculator · css media query generator · device mockup generator · viewport units visualizer · safe area inset preview · link preview checker · ai crawler access checker · image alt text checker · all tools