Images

What a browser can do to an image, and what it cannot

Everything here uses the canvas and Blob APIs, which means the work happens on your machine: the file is decoded, redrawn at a new size or a new quality setting, and re-encoded. That covers resizing and lossy compression well. What it does not cover is lossless optimisation — removing metadata bytes, recompressing PNG palettes, choosing optimal Huffman tables. For those, a command-line tool such as pngquant or jpegoptim will always beat a browser.

Choosing a format

Photographs want JPEG or WebP. Screenshots, diagrams and anything with text or sharp edges want PNG or WebP lossless — JPEG puts visible rings around letterforms at any quality low enough to be worth using. Icons under a few kilobytes are often better inlined as SVG or Base64 than served as a separate request.

The order that saves the most bytes

Crop, then resize, then compress, then strip metadata. Doing it in the other order means compressing pixels you are about to throw away.