Keeping Pixely Images Pixely (and Performant!)

Chris CoyierSeptember 23, 2024About 2 min

Keeping Pixely Images Pixely (and Performant!) 관련

With CSS' `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.

After Marc chimed in with technique he needed to pull off as part of this years big promotion last week, it reminded me of another thing that ended up being relevant to the design aesthetic at play.

A horizontal slice of that background image was used here on this blog and the image size was quite tolerably small thanks to this CSS property.

See how everything has that 8-bit-ish pixely look to it? There is a CSS property that you can apply to images (<img> elements) that will affect how they look when they scale. Like if you’ve got an image like this:

You’re probably going to want to do this no matter what:

.castle-landscape-image {
  image-rendering: pixelated;
}

If there is any resizing at all any direction, it’s just going to look better. There is also image-rendering: crisp-edges; which is apparently specifically for pixel art, but I don’t see much of a difference.

Another cool thing we can do here is ensure the original art is as small as it can reasonably be (probably whatever size it was originally created at) and served like that, so any scaling beyond that doesn’t cause any anti-aliasing stuff (blurred edges) at all. In the case of the example above where I didn’t really have the original just a high-res version, I can scale it down and down trying to find the best place where it still looks fine but I’m saving lots of image space:

See the Pen Pixelated Landscape by 1Marc on CodePen.

Another use-case here is something like a QR code. This QR code is 393 bytes (super small!). I’ll render it huge here and see how perfect it looks:

See the Pen Super Tiny QR code rendered big by 1Marc on CodePen.

I have an SVG version of this same QR code that is 33 KB. This is a (very rare) case where a simple vector-looking graphic is actually better served from a binary image that the natively vector SVG.

Even a bit more extreme, here’s a 78 byte GIF (I hand-pixeled drew in Photoshop, and exported without metadata to get that small). It can scale up huge. Here’s the tiny natural one on top and the big one below:

See the Pen 78 byte image pixelated by 1Marc on CodePen.

Note that if you try the crisp-edges value on the above, it seems to bail out, so I guess there must be some kind of difference between the values.

Point of the story: if you’ve got a pixely <img>, chuck image-rendering: pixelated; and go as small as you can to save on size.

Keeping Pixely Images Pixely (and Performant!)

With CSS' `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.