A small "guide" to pixel art for your website

when you use pixelated fonts or images, your browser WILL use ANTI-ALIASING for EVERYTHING!!! so it kinda looks like the browser applied vaseline to ur stuff.
in reality this isn't that bad, it just renders all of your images in a smoothier way, but it becomes a problem when you deal with a lot of pixelated media

here's some fixes that you should apply:

FOR IMAGES.

let's say you have a pixelated sprite here, like this one:

notice how its all blurry and messy? well thats because the fuckass antialiasing is in effect, ruining everything. if its not blurry for you, youre probably using like a weird browser or you're on phone

anyways, to fix this, simply set the image's property to image-rendering: pixelated;, and your retro pixelated mess won't be affected by the anti aliasing. Do be in mind that it might have mixels or uneven pixels because of scaling issues depending on the content, so you might have to tweak and resize your image

WITH image-rendering: pixelated;

without image-rendering: pixelated;

the same can be done with backgrounds too.

WITH image-rendering: pixelated;

without image-rendering: pixelated;

FOR FONTS.

while there isn't a CSS fix for text just like for with images, there is one method i found to work on a few pixel fonts.

notice: this only seems to work on firefox only

Hover over this box to disable the anti-aliasing patch so you can see the difference. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

this is a fix that i randomly found while working on a project, all you gotta do is apply opacity: 0.98; onto the element you want, and it suddenly works. Due to scaling issues, it's not always perfect, but you can still check it out. you can also try to find workarounds so that the opacity doesn't affect your project.
do be in mind that this can be different in other browser engines and even platforms, but it's always good to try.