1731134 - Consider changing "image-rendering: pixelated" to use a better scaling algorithm for inexact scale factors

Status: NEW

(Core :: Graphics: WebRender, enhancement)

Description

[Daniel Holbert [:dholbert]]

As allowed/suggested in https://drafts.csswg.org/css-images-3/#valdef-image-rendering-pixelated , we should consider changing 'pixelated' to use a better scaling algorithm that allows some smoothing/blur to avoid distorting the original image's proportions too much.

Current editor's draft spec text:

pixelated
The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary.

For each axis, independently determine the integer multiple of its natural size that puts it closest to the target size and is greater than zero.

Scale it to this integer-multiple-size as for crisp-edges, then scale it the rest of the way to the target size as for smooth.

Note: At integer multiples of the natural size, this gives the same results as crisp-edges. At non-integer multiples, this usually gives better visual results, even for pixel art, but it does incur a performance penalty due to the "two-step" rendering requirement.

See also https://github.com/w3c/csswg-drafts/issues/5837 (the issue where this was discussed/resolved).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: (image file for use in testcase)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1, with bits of distortion highlighted

I think the goal here would be for the pixelated image (the middle image on each row) to avoid the sorts of distortion shown by the red arrows here, for example. (abrupt wobbles, and abrupt size changes that don't correspond to similar abrupt size changes in the original image)

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Moving this to WR since that's where the work should be. Note that as of right now crisp-edges and pixelated behave the same (see bug 1728831).