The quantizer lab
Every lossy encoder has one knob underneath all the others: the quantizer, which decides how much detail to throw away. This page lets you turn that knob directly, on your own video, and watch what happens.
The grey line is the original signal; the yellow one is what survives after every value is rounded to the nearest allowed level. A bigger step means fewer levels, less data, and less fidelity. That rounding is quantization, and the step size is what a video encoder's quantizer parameter controls, applied to blocks of frequency data instead of a wave.
Now do it to a real frame: drop a video, or
One frame is pulled out and re-encoded on your machine. Nothing uploads.
What the quantizer actually is
An encoder does not store pixels; it transforms each block of the image into frequency coefficients, then divides every coefficient by a step size and rounds to the nearest whole number. That rounding is quantization, and it is the only step in the whole pipeline that destroys information; everything else is reversible bookkeeping. The quantizer parameter (QP) sets the step size: small steps keep fine detail at a high byte cost, big steps round detail away and the bytes with it.
The scales are codec-native, which trips people up: H.264 and H.265 run 0 to 51, VP9 runs 0 to 63, and AV1 runs 0 to 255. A "26" means a different thing in each. Lower is always higher quality.
Quantizer, bitrate, CRF: the three rate controls
Fixing the bitrate means the file size is predictable and the quality floats: easy scenes look great, hard scenes fall apart. Fixing the quantizer is the opposite: quality stays constant and the size floats. CRF is the refined version of constant-quantizer that encoders like x264 made famous, letting the QP drift a little where your eye will not notice. Streaming services buy predictability; archives and quality-first encodes buy constant quality. There is no right answer, only a right answer for a use case.
What this page runs on
The lab uses Mediabunny's quantizer support over WebCodecs, which passes your exact QP to the hardware or system encoder:
new VideoSampleSource({
codec: 'avc',
quality: new Quality({ quantizer: 26 }),
});Because the encoder is whatever your machine provides, two computers can produce different bytes for the same QP, and a codec whose quantizer mode your browser lacks shows up struck through rather than silently falling back to bitrate mode. The frame size shown is the encoded packet itself, not the file around it.