v134 · graphics / canvas

Thumbnail Processor

Process a source image at three imageSmoothingQuality levels — low, medium, high — and compare the output thumbnails. Adjust the scale ratio and thumbnail size to see how quality differences change with downscaling factor.

checking imageSmoothingQuality…

imageSmoothingQuality was already supported on 2D Canvas and OffscreenCanvas. Chrome 134 adds it to PaintCanvas (the CSS Houdini Paint API context). The value controls the algorithm used for image scaling: low = nearest-neighbour (fast), medium = bilinear, high = bicubic (slow, smooth). All three are now available in paint worklets for CSS background-image rendering.

Source image (procedural)

Resize settings

Thumbnail width: 64px

Thumbnail height: 64px

Output — quality comparison

Render timing

—

low (ms)

—

medium (ms)

—

high (ms)

—

high/low ratio