Open Bug 1731134 Opened 3 years ago Updated 3 years ago

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

Categories

(Core :: Graphics: WebRender, enhancement)

enhancement

Tracking

()

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

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).

Attached image (image file for use in testcase) (deleted) —
Attached file testcase 1 (deleted) —

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)

Blocks: 1081224

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).

Component: Layout: Images, Video, and HTML Frames → Graphics: WebRender
Blocks: 1767348
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: