CSS-Tricks Icon CSS-Tricks

Keep pixelated images pixelated as they scale

Chris Coyier:

We're quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it's the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let's say you'd really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling.

You can do it!

File this one in the “I had no idea this existed” category. Really simple CSS trick, but definitely a useful one.

0:00 / 0:00