For those unfamiliar image-rendering: pixelated is used in CSS to make pixelart images nice and crisp! Unfortunately I’ve noticed that on my computer it distorts unscaled pixels :(
I’m not sure if this is a firefox thing or a my screen thing. It seems to work as intended on the work computer with chrome. Anyways I’m making this post to see if anyone else has seen this or knows Why it happens. (Not really a help post because all I have to do is not use the property).
Heres some screenshots of the same images with it on and off.
While the pixelated versions are crisper and no longer fuzzy, the size of the pixels is inconsistent (note how thick the stem of the “d” is in “It’s Good To Share.” compared to the unpixelated button).
Now in scaled up pixelart (2X and above), pixelated rendering works perfectly:
It sharpens the pixels wonderfully for my pixelart bunny here!
It only seems to be an issue for unscaled pixelart:
Here are the same bunnies, unscaled. Notice how distorted the pixels are, especially in the eye of the bunny.
Anyways, just wondering if anyone else has noticed this and maybe what browser you use or screen resolution
It could be image-rendering: pixelated being implemented inconsistently between browsers so it doesn’t work quite right, but I think it’s more likely to be due to zoom-in. Read the comments of this stack post. Zoom-in uses nearest-neighbour scaling which thrashes pixel art. Additionally, at the OS-level, zoom-in can be defaulted to 125% as is noted there for Windows OS(Another example of terrible defaults by Microsoft).
seconding the zoom-in answer. my laptop has a small screen, so it automatically zooms in 150%, messing up a lot of pixel art. when i set the browser zoom to 67%, it takes me back to 100% and everything looks nice again.
To add on one more thing. If you really want to display pixel art on a screen in a browser, what I’d suggest is to prescale them up with integer scaling, and then let the browser downscale them how it likes, filtered or pixelated. This is how people have to post pixel art on twitter and social media sites because they have no control over the CSS(meaning it mangles the image scaling).
your screenshot includes a convenient ruler to measure by. it looks like there’s a 150% zoom. assuming the screenshot is 1:1 with how it’s displayed on your monitor, the 88x31 dimensions are scaled to 132x46:
whether it’s zoom/scale on the browser or OS I’m not sure. if firefox reports 100% zoom (ie., pressing ctrl+0 does not change the browser zoom%), then it’s gotta be a hi-DPI resolution scale setting at the OS level.
the good news is that this CSS property would work as you intended for anyone running at 100% or 200% scale. i don’t know how many people that is with >1080p monitors being so common now, though…
I have a feeling it is my os bc Firefox is at 100% (and yea it’s windows) and my laptop isn’t very large. I would have never guessed that though so thanks for the info (and calculation hermit)!
