Why it matters
Every image compressor asks for a quality number, but the number means different things in different formats, and the right one depends on the picture. A sky gradient shows banding at a setting that's invisible on a busy texture. Most people pick 80 and move on, which is often twice the bytes the image needs, or occasionally visibly worse.
This explorer measures the trade-off directly. It encodes your image at ten qualities in each format your browser can write from a canvas, decodes each result and compares it with the original using SSIM (structural similarity), which tracks what people notice better than a plain pixel difference. The chart shows size against SSIM for each format; the table lists every encoding. Choose a target and it picks the smallest file that reaches it, then writes picture markup with the formats that met it. Results depend on your browser's encoders, so the same image can differ a little between Chrome, Firefox and Safari.
How to use it
- Drop an image, or use the sample photo.
- Pick a width to test at and a quality target.
- Read the chart: up and to the left is better.
- Use the pick, and copy the picture markup.
FAQ
What SSIM should I aim for?
0.95 suits most photos on the web. Use 0.98 or 0.99 for product shots or images people zoom into, and 0.90 only for thumbnails.
Why is AVIF missing?
Some browsers can't encode AVIF from a canvas, even though they can display it. Chrome can't at the moment, for example. The page tells you which formats were tested.
Is SSIM the same as what I see?
It's close, but not perfect. It looks at local structure, contrast and brightness, so it catches blur and blockiness well. Always check the pick by eye.
Is my image uploaded?
No. Encoding and measuring both happen in your browser.
Credits and licences
Sample photo: Malham limestone pavement by Paul Morris, CC0, via Wikimedia Commons.
.jpg){kind=link}