Image compression and conversion are handled entirely by the Canvas API, which is built into every modern browser. While Canvas is primarily designed for drawing graphics with JavaScript, it can also be used to read an image and re-export it in a different format or at a different quality.
Here's how it works: the selected image is loaded into an <img> element, then drawn onto a <canvas>. If resizing is requested, the canvas dimensions are set to the new size before drawing — the browser handles the scaling automatically. When "keep ratio" is on, the height is computed from the width and original aspect ratio.
Once drawn, calling canvas.toBlob(callback, 'image/webp', 0.8) produces image data encoded in the specified format at the given quality level. Formats like WebP and AVIF typically produce smaller files than JPEG at equivalent visual quality.
Everything runs locally in your browser. Your image is never uploaded to a server, so there are no privacy concerns.