Pixel Art: Pixelation on the Web and More! 👾
Visuals and text are anti-aliased by default on the web, so let's explore how to override that to ensure Pixel Art looks sharp and...awesome! 😅
Hi everybody - if you’ve ever tried to work with pixel art on the web, you would have quickly realized that your pixelated creation looks blurry. This is especially true when your creation needs to be scaled or viewed on devices with high DPIs.
Take a look at the following example:
The original pixelated image is on the left, and the same image as processed by our modern browsers is on the right.
The reasons for this behavior are core to how browsers optimize visuals. By default, images and text are anti-aliased to create a smooth effect. This is the behavior we’ll want 99% of the time, for anti-aliased content looks more pleasant and is more readable:
The only time this doesn’t make sense is when we are working with pixel art, where jagged edges and sharp corners are a desirable feature. We don’t want the browser to do any extra processing here.
Fortunately, we can override the default browser behavior. With a few HTML and CSS tweaks, we can ensure our visuals and text render in a pixelated way without any anti-aliasing in sight. My latest tutorial on the site, Preserving the Pixel Art Look in Web Content, walks through the ins and outs of needs to be done here:
If for some bizarre reason the article doesn’t help, feel free to just inspect the CSS on the main KIRUPA site. All of the techniques I outlined are ones I used to get the pixel art-inspired look that you can see.
Geeking Out on Pixel Art
Over the years, I’ve had the opportunity to chat with some very talented designers who are pixel art experts and probably even bigger pixel art fans than I am. Some highlights are…
My chat with Helena Zhang, who created the excellent Departure Mono font, is a must-watch because of how deep we go into exploring pixel art examples across games, TV shows, movies, websites, and other parts of modern culture:
Next, as his name hints strongly at, my chat with Pascal Pixel goes deep into pixel art territory:
You don’t want to miss this chat either. We talk a lot about his design career and his unique take on how designers can be successful.
Lastly, if you watch my videos regularly, you’ll see the one-and-only Pixel make an appearance in most of them:
So, to see more of him and all his antics, be sure to subscribe to my YouTube channel if you haven’t done so already.
Till Next Time
I hope you found this quick overview of pixel art and related content enjoyable and informative.
As always, I like to hear from you on what you like, don’t like, and/or want from Santa. To discuss this further or to contact me, feel free to continue the conversation on my Twitter / X post on this or on the forums.
Cheers,
Kirupa 😀