The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →No, the HTML Standard does not limit canvas JPEG quality to 101 steps. But one reported Chromium 149 test found that quality values from 0.955 through 0.964 all produced a 362,299-byte JPEG, so those values looked like the same file. The 101-step explanation is the test author’s inference, not a documented browser rule.
What the standard actually promises
The WHATWG HTML Standard defines canvas.toDataURL([type [, quality]]). The first argument selects the image format and defaults to PNG. If the requested type is unsupported, the browser falls back to PNG, so a developer should check which format was actually returned. For formats that support variable quality, such as JPEG, the second argument is a number in the range 0.0 to 1.0 inclusive. The standard describes toBlob() as accepting the same optional quality parameter for those formats.
As an Amazon Associate I earn from qualifying purchases.
“The second argument applies if the type is an image format that supports variable quality (such as “image/jpeg”), and is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.”
— WHATWG, HTML Standard, Canvas section (Edition for Web Developers)Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
The standard fixes the accepted input range and the intended meaning of the value. It does not prescribe how an encoder maps that number to its internal quantization settings, and it does not say that distinct inputs must produce distinct bytes. That gap is why a 101-step claim cannot be settled from the specification alone.
#1 Best Overall
The Mozilla Developer Network documentation for HTMLCanvasElement.toDataURL() (last modified 2025-09-11) describes quality as a Number from 0 to 1 for lossy formats such as JPEG and WebP. If the value is omitted or falls outside the allowed range, the browser uses its default quality. MDN also notes that toDataURL() builds the entire image as an in-memory string, and it recommends toBlob() with URL.createObjectURL() for larger images because of performance and URL-length concerns.
What the reported test measured
The observation comes from a September 30, 2026 DEV Community post by yue xing. The setup was narrow:
- An Apple M4 computer with 16 GB of RAM
- An open-source Chromium 149 build
- One 1440×2400 screenshot of a help page containing text and flat UI
The author reported the following JPEG sizes for the values they tried:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors| Quality value tried | Reported JPEG size | What it shows |
|---|---|---|
| 0.950 and 0.951 | 336,289 bytes | Identical size for both values |
| 0.955 through 0.964 (each value tried, including 0.955 and 0.964) | 362,299 bytes | Identical size across the whole tested run |
| 0.965, 0.969 and 0.970 | 393,304 bytes | Identical size for these three values |
The equal byte counts are the observed result. The author describes the 0.955 and 0.964 outputs as the same file. These figures come from one author’s run on one machine with one image, and no independent byte-for-byte reproduction is published.
Why “101 steps” is a hypothesis, not a fact
The number 101 has a simple origin. If a 0–1 quality value is rounded to a whole percent, the possible results are 0 through 100, which is 101 distinct values. The author’s reported plateau is consistent with that rounding. However, the author states that they did not find or confirm the relevant Chromium code path, so the whole-percent explanation remains an interpretation of the observed sizes.
Other explanations are also possible. An encoder may map the input onto its own integer quality or quantization settings in a way that produces flat regions between certain values. The reported test cannot separate these explanations, so the accurate claim is narrower: in this Chromium build, on this image, several adjacent inputs produced the same output size.
Rank #4
Using the plateau when you target a file size
Developers who search quality values to meet a byte budget can use repeated sizes as a signal. If two adjacent tested values return the same byte count, refining the search between them is unlikely to change that output in the same environment. A practical workflow:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Encode the canvas with
toBlob()at a coarse set of quality values, such as 0.5, 0.7, and 0.9, and recordblob.sizefor each. - Narrow the search only where the byte size changes, and stop refining across any interval where the size is unchanged.
- Check
blob.typebefore measuring. If the browser returnedimage/pnginstead ofimage/jpeg, the size comparison is meaningless. - Repeat the measurement in each target browser and on representative images. Do not assume the same plateau appears elsewhere.
function encodeJpeg(canvas, quality) {
return new Promise((resolve) => {
canvas.toBlob((blob) => resolve(blob), "image/jpeg", quality);
});
}
const blob = await encodeJpeg(canvas, 0.955);
console.log(blob.type, blob.size);
The same author compared two search methods on the screenshot. A float search used 8 encodes and took 72 ms. An integer search used 6 encodes and took 49 ms. Both found the same file, at 99.1% of the stated byte budget. These timings come from that one machine and should not be treated as general performance expectations.
Where the evidence stops
- The test covers one Chromium 149 build. Firefox, Safari, and other Chromium releases were not tested in the report.
- The test uses one screenshot with text and flat UI. Photographs and other content may behave differently.
- The 101-step rounding explanation is the author’s inference and has not been confirmed from Chromium source code.
- The standard sets the input range but does not define the mapping from input to output, so browser-specific behavior should be verified rather than assumed.
For code that must produce a specific byte count, measure the output in each browser you support instead of relying on a shared quality table.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
