Comparison conditions and reproduction methods
In the example run, choose a composite image with text and a solid center or texture. The two materials are not photo shoots, but 1600×900 test images drawn by the site. Create the original PNG first, keep the pixel size the same, and save it as JPEG, WebP quality 75, 85, and 95, respectively. You can also download the output file directly.
The number of bytes in the table is the Blob.size of the actual generated file. The quality number is an encoder setting and does not mean that any percentage of the original information will be retained. If your browser doesn't support the format, it will fake the results with a different extension and not save them and display an execution error.
Try running it directly without a file
Runs the actual tool's processing code with example material created by the site. Results are currently computed in the browser and no input data is uploaded to the server.
button displays results and example files.
Examples are not actual visitor data or performance. File size and font shape may vary depending on browser, device, and font.
2026-10-01 Ground truth example in a single browser environment
The values below were measured using two identical composite images from the running example above. It may vary depending on the browser, and is not intended to generalize the expected file size of actual photos or the superiority or inferiority of each format. The pixel size is 1600×900 in every row.
| Input Type | Output Format | Quality | Actual bytes |
|---|---|---|---|
| Monochrome | PNG | — | 57379 |
| Monochrome | JPEG | 75 | 30914 |
| Monochrome | JPEG | 85 | 36131 |
| Monochrome | JPEG | 95 | 48342 |
| Monochrome | WebP | 75 | 10872 |
| Monochrome | WebP | 85 | 13114 |
| Monochrome | WebP | 95 | 18858 |
| Texture | PNG | — | 941654 |
| Texture | JPEG | 75 | 263962 |
| Texture | JPEG | 85 | 321468 |
| Texture | JPEG | 95 | 449142 |
| Texture | WebP | 75 | 213200 |
| Texture | WebP | 85 | 267302 |
| Texture | WebP | 95 | 363228 |
| Texture / 200KB target | JPEG | 55 | 197656 |
| Texture / 200KB target | WebP | 65 | 198788 |
What is the difference between the 200KB target results?
A separate 200KB row uses the navigation function of reducing the actual image size. The starting quality is 85, the minimum quality is 50, the maximum long side is 2048px, and further reduction is allowed. 200KB is less than 200,000 bytes. Change the quality first and reduce the pixel size if it exceeds the target, so check the width and height of the result together.
The 75·85·95 comparison row is not an experiment to meet the target capacity. This is the result of changing the quality settings at the same size. If you determine that the compression rate is better by mixing it with the target row, the comparison conditions will be different.
Quality and confirmation order to apply to my files
- Photos start at quality 85 and zoom in to check letters and outlines.
- If the file size is small enough, compare it to the 95 result to determine if any differences in detail are necessary.
- If the size is too large, compare 75, but also check the minimum pixel size required by the submission source.
- If small text, diagrams, or logos are important, compare the PNG original with the JPEG/WebP results.
- I don't use the file size from the example as the expected size for my photo.
Canvas toBlob format/quality processing documentdescribes differences in quality settings and handling of unsupported formats.
Frequently Asked Questions
If the quality is the same, are all photos the same size?
No. It depends on pixel size, image content, output format and browser encoder.
If I increase it from 85 to 95, will the picture quality improve by 10%?
It cannot be interpreted that way. It does not refer to a ratio of image quality compared to the original or a linear amount of improvement.