Lossy vs lossless image compression in the browser

Browser image tools almost always mean canvas: decode pixels, optionally scale, then encode again. That pipeline is local and honest — and it is not the same as a specialized compressor.

Lossy: JPEG and WebP

A quality slider asks the encoder how much detail it may throw away. Photos usually survive 0.7–0.85 well. Screenshots with text suffer sooner: edges ring and type looks dirty. WebP often beats JPEG at the same visual quality, but support in email clients still lags.

Lossless: PNG is not magic here

Canvas PNG is a standard re-encode. It does not run pngquant, oxipng, or zopflipng. A photo saved as PNG may stay large. A screenshot with few colors might stay similar in size. If the file grows, pick JPEG or WebP instead of assuming “lossless means smaller.”

• Resize first if the pixel box is larger than you need
• Expect EXIF (including GPS) to be stripped when drawing to canvas
• Animated GIFs become the first frame
• SVG is vector — rasterize it in an editor before this kind of tool

Alphzen’s Image Compressor and Image Resizer run in the tab. They are for a one-off export, not a CDN pipeline.