I think it goes without saying that we have many talented artists and fans of pixel-art in this community, but, unfortunately, the default image scaling algorithm in browsers doesn’t suit these images well.
Would it be possible to add some CSS to Discourse and whitelist an appropriate HTML attribute?
I know there is a thread discussing pixelated image rendering where one suggestion was to upscale pixel-art images and size them back down with HTML width and height attributes, which seems to work (in my browser, at least), but this means loading images bigger than they’ll be displayed at and larger download file sizes for people viewing them.
Here’s the kind of thing I had in mind:
img[data-pixelated] {
image-rendering: pixelated;
}
Over-qualifying the selector with img means that pixelated image rendering can only be applied to images, as it’s probably not advisable to apply it to other elements.
From there, whitelisting the data-pixelated attribute in HTML in posts, signatures, etc. would allow folks to change the image scaling algorithm of certain pixel-art images:
<img src="image.png" alt="..." data-pixelated>
Attaching the CSS property with a data attribute as opposed to, say, a class would mitigate folks being able to apply unwanted classes to elements, where whitelisting the class attribute probably isn’t ideal?