Resize images for website use

There is no single size: a phone needs about 480–800 px across, a laptop 1080–1600, a large retina screen up to 2400. The answer is a set — the browser picks the smallest file that fills the space it has. This page makes that set from one photo and writes the srcset markup that lets the browser choose.

480, 768, 1080, 1600, 2400 px by default; tap any width to add or remove it. Widths larger than your photo are skipped and listed, because a responsive set should never contain an enlarged file.

WebP files are usually noticeably smaller at the same look, and every current browser reads them. The JPEG copies are the fallback inside the <img> tag. The markup uses <picture> so each browser takes the format it supports; switch either format off if you only need one.

How wide the image is shown, so the browser can pick before it lays out the page. “(max-width: 768px) 100vw, 768px” means full width on phones and 768 px wide otherwise. Edit it to match your layout; the markup updates as you type.

Yes: they are the real pixel size of the fallback file, computed from your photo's own proportions, so the browser reserves the right space and the page does not jump while images load.