This article is incomplete, css image-rendering: pixelated will not do that the article claims

[greggman]

MDN URL

https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

What specific section or headline is this issue about?

The entire thing

What information was incorrect, unhelpful, or incomplete?

The article ignores that devicePixelRatio might be a non-integer value making this solution look extremely poor.

What did you expect to see?

It should mention this issue so the effect you want your users to see is what they get.

Given a 100x100 pixel image

If the user's device has a non-integer DPR (mine is 1.25) it will look like this

Unless you have a device set up with with a non-integer DPR it's unlikely you'll see this issue. Note that you can change the DPR in windows by setting the "Scale". Another way to see the issue is to zoom in or out which changes the DPR to non-integer values on Firefox and Chrome

This is unlikely what users want but the article doesn't mention the issue

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/games/techniques/crisp_pixel_art_look
• MDN URL: https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/games/techniques/crisp_pixel_art_look/index.md
• Last commit: b0d4232
• Document last modified: 2024-07-23T11:48:42.000Z