How to Compress Images in the Browser Without Uploading Them

A screenshot can be 4000 pixels wide even when a page renders it at 900
pixels. Lowering the quality slider may help, but the better first question is:

What is the largest size at which this image will actually be displayed?

Resize first

If an image never renders wider than 1200 pixels, shipping a 4000-pixel source
wastes download bytes and browser memory. Resize to the largest useful display
width, preserve the aspect ratio, and do not upscale a smaller source.

For a one-off asset, the whole process can stay in the browser:

1. Decode the selected file locally.
2. Scale it to a maximum width.
3. Draw it to a Canvas.
4. Export with the browser's WebP, JPEG, or PNG encoder.
5. Compare dimensions and file size, then inspect the preview.

This is how the MonoTools Image Optimizer works. The selected file remains in
the current tab instead of being sent to an image-processing service.

Choose a format for the content

WebP is a useful default for screenshots and mixed-content images. It supports
transparency and often produces smaller files than JPEG or PNG.

JPEG suits photographs when transparency is unnecessary. Reduce quality
carefully around faces, text overlays, sharp UI edges, and gradients.

PNG remains appropriate for lossless graphics and transparency. A browser's
quality setting does not make PNG behave like lossy JPEG, so moving the slider
may have little effect.

Conversion alone is not optimization. Compare the actual output and view it
near its intended page size. Small text, one-pixel borders, shadows, and logo
edges tend to reveal damage first.

Know the limits

Local processing avoids an upload, but decoded images can consume far more
memory than their compressed files. Very large sources may slow the tab or
make Canvas export fail. Reduce the target width or process one image at a
time when that happens.

Browser encoders can also produce slightly different output. This workflow is
good for individual assets and visual review; a versioned build dependency is
better for large batches or reproducible production output.

Use srcset or picture when a page needs several responsive sizes. Also
inspect GPS, camera, or timestamp metadata separately: resizing an image does
not guarantee that private metadata is removed.

I maintain MonoTools and wrote a fuller guide for its browser-local Image
Optimizer:

https://monoware.app/guides/compress-images-locally?utm_source=devto&utm_medium=content&utm_campaign=local_image_compression

Disclosure: MonoTools is my project.