How the compression works
Your browser already contains a complete image pipeline, and this page uses it. When you pick a file, a FileReader loads the bytes from disk into memory, an Image object decodes them, the picture is drawn onto an HTML canvas at the output size, and canvas.toDataURL() re-encodes the canvas as a new JPEG, WebP or PNG. The result is turned into a download link. At no point is there a network request - nothing is uploaded, nothing is stored on a server, which is the main reason to compress this way rather than through an online service when the photo contains people, documents or anything confidential.
Two settings control the final size. Maximum width resizes the image if it is wider, keeping the aspect ratio exactly; because file size scales roughly with the pixel count, halving the width cuts the pixels - and usually the bytes - by about four. Quality controls how aggressively JPEG and WebP discard detail. It runs from 0.1 to 1; 0.7 to 0.8 is the sweet spot for photos on the web, 0.85 and up for images that will be printed or cropped later, and below 0.5 the blocky artifacts around edges and text become visible.
Choosing a format and a target size
JPEG is the safe choice for photographs; it is lossy, has no transparency, and every device opens it. WebP typically produces files 25-35% smaller than JPEG at the same visual quality and supports transparency; it is supported by Chrome, Edge, Firefox and Safari 14 or later, and this page will tell you if your browser cannot write it. PNG is lossless, so the quality slider does nothing - it is right for screenshots, logos, charts and anything with flat colors or sharp text, and wrong for photos, where it is often larger than the original.
Useful targets: a full-width hero image on a web page at 1,600-1,920 pixels wide and under 300 KB; an in-article photo at 1,200 pixels and 100-200 KB; a product thumbnail at 400 pixels and about 30 KB; an email attachment under 5 MB, or under 25 MB total for Gmail. Note that transparency is flattened onto a white background when you export a transparent PNG as JPEG, and that an animated GIF becomes a single still frame.
Limits worth knowing
Re-compressing an already-compressed JPEG always loses a little more detail, so start from the original whenever you can and never run a file through twice. Very large images - roughly above 50 megapixels, or on iPhones with limited memory - may fail to draw on a canvas; resizing to a smaller maximum width usually solves it. Camera metadata (EXIF) including GPS coordinates is dropped during re-encoding, which is a privacy benefit but also means orientation flags disappear, so check that portrait photos are still upright. Finally, browsers can decode HEIC files from an iPhone only if the operating system supports it; if your HEIC fails, convert it to JPEG first.