3 ms·

I'm saying it because I've actually read the spec. The spec https://drafts.csswg.org/css-images/#the-image-rendering https://drafts.csswg.org/css-images/#the-i

I'm saying it because I've actually read the spec. The spec https://drafts.csswg.org/css-images/#the-image-rendering https://drafts.csswg.org/css-images/#the-image-rendering says > 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. The spec does not say "use nearest neighbor". In fact in specifically allows not using nearest neighbor (end of first sentence). And further, it doesn't specify the algorithm used. So there is no true definition of what you'll get. There is only a general definition of the intent.

kixiQu 4y ago
It explicitly says in the crisp-edges section: > The image must be scaled with the "nearest neighbor" algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image. and then it explicitly says in the pixelated section, right after the summarizing sentence you excerpted: > 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. The first sentence is descriptive; what is prescribed follows directly after it. I'm not sure how it could do more than that to define "what you'll get".
- greggman3 4y ago
  you're right, the spec changed Feb 2021 https://github.com/w3c/csswg-drafts/issues/6038 https://github.com/w3c/csswg-drafts/issues/6038 That said, my main point stands, Nearest Neighbor looks horrible when you have a non-integer devicePixelRatio which is relatively common. You'll get better results upscaling the image offline and then downscaling in the browser, rather than upscaling in the browser.

kixiQu 4y ago

It explicitly says in the crisp-edges section: > The image must be scaled with the "nearest neighbor" algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image. and then it explicitly says in the pixelated section, right after the summarizing sentence you excerpted: > 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. The first sentence is descriptive; what is prescribed follows directly after it. I'm not sure how it could do more than that to define "what you'll get".

greggman3 4y ago
you're right, the spec changed Feb 2021 https://github.com/w3c/csswg-drafts/issues/6038 https://github.com/w3c/csswg-drafts/issues/6038 That said, my main point stands, Nearest Neighbor looks horrible when you have a non-integer devicePixelRatio which is relatively common. You'll get better results upscaling the image offline and then downscaling in the browser, rather than upscaling in the browser.