[csswg-drafts] [css-images-3] image-rendering:pixelated should not force "nearest neighbor" (or similar) when the scale factor is far from an interger (e.g. 150%) (#5837)

bbbbbbbbba has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images-3] image-rendering:pixelated should not force "nearest neighbor" (or similar) when the scale factor is far from an interger (e.g. 150%) ==
[The specification for image-rendering:pixelated](https://drafts.csswg.org/css-images-3/#valdef-image-rendering-pixelated) reads:
> The image must be scaled with the "nearest neighbor" or similar algorithm, to preserve a "pixelated" look as the image changes in size.

This feature is useful when zooming images such as pixel art to an integer multiple (300%, 400%, etc.). However, when the scale factor is non-integer, it can cause image distortion:
![pixelated](https://user-images.githubusercontent.com/6083021/103712967-f9739d80-4f6f-11eb-9f5c-cc1c56f2cae7.png)
 The larger the *relative* error between the scaling factor and the nearest integer, the worse the distortion. For example, 150% (like above) is really bad, while 1050% would probably be OK. I don't even think the above result successfully preserves a "pixelated" look, at least not in a good way.

Meanwhile, scaling the same image to 150% with a "smooth" algorithm might look like this:
![smooth](https://user-images.githubusercontent.com/6083021/103713395-1197ec80-4f71-11eb-94bd-421ef391544b.png)
It might be a little blurry, but I think it's overall easier to tell where the pixels are in this rendering of the image, and it is also not distorted.

The bottom line is that "pixelated" should mean that each pixel occupies a square-shaped area on the screen, and we should avoid blending those squares together as much as possible. However, when the boundaries of the squares do not coincide with physical pixels, it is impossible to avoid blending at all, so we should try to do the blending fairly instead of with a "nearest neighbor takes all" algorithm, while limiting the blending to the outermost physical pixels of each square.

One potential way to do this is to first scale the image to an integer multiple with the "nearest neighbor" algorithm, then scale to the target size with a "smooth" algorithm. For example, to scale a pixel art to 250%, first scale it to 300% with the "nearest neighbor" algorithm to get a pixelated look, then rescale that to 250%. I haven't experimented much to see if this approach gives the best results, though.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5837 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 6 January 2021 00:34:24 UTC