Photographic visual for Canvas Encoder Record

Canvas Encoder Record

What a browser's canvas JPEG encoder writes

A page can hand the browser a picture and a quality number. What comes back is the browser's choice. This is a dated record of those choices, read out of the bytes.

Convert a PNG

How it was measured

The test picture from the quality-and-chroma note (800 × 400 px: a red heading, grey text and a grainy colour gradient) was drawn onto a canvas and written with the standard convertToBlob({ type: "image/jpeg", quality }) call at ten settings. Each file's headers were then read: the frame header for the colour sampling and frame type, and the APP2 segments for an ICC colour profile.

Chromium 153 on Linux — 31 October 2026

QualitySizeColour sampling
5012.0 KB4:2:0
6014.0 KB4:2:0
7519.7 KB4:2:0
8023.2 KB4:2:0
8629.9 KB4:2:0
9037.5 KB4:2:0
9243.2 KB4:2:0
9561.8 KB4:2:0
9898.1 KB4:2:0
100259.1 KB4:4:4
  • Every file was baseline (not progressive) and carried an sRGB ICC colour profile.
  • Colour was halved (4:2:0) at every setting below 100, and kept at full resolution (4:4:4) only at 100.
  • Browser build 153.0.8010.12, headless, as run by an automated test; desktop Chrome on Linux is built from the same encoder code, but other platforms have not been measured here.

1 KB is 1,024 bytes.

Other browsers

Not measured yet, so not listed. Rows are added with their own date when they are. Until then, the converter's Output tab tells you what your own browser wrote: the receipt reads the sampling, the frame type and the colour profile back out of the file you are about to save.

Questions

Why keep a record at all?
Because a web page cannot ask the browser's encoder for anything except a quality number. Everything else — the colour sampling, whether a colour profile is added, baseline or progressive — is the browser's decision, and it is not documented. The only way to know is to write files and read them back.
Why is only one browser listed?
Only rows that were actually measured are published. Other browsers are added when they have been run through the same test, with their own date. The converter itself never relies on this table: it reads the sampling and the profile out of every file it writes and prints what it found.
Can I get 4:4:4 from the browser's encoder?
In the browser measured here, only at quality 100, where the file was 259.1 KB — nearly the size of the PNG. This site's precision encoder writes 4:4:4 at any quality.