Ensuring Pixelated Images Stay Pixelated in our High-DPI World

This is the before look:

This is the after look:

The CSS technique to pull this off was the following:

img.emoji-custom {
    image-rendering: pixelated;
}

By setting the image-rendering property to pixelated on these images, we can ensure the resizing maintains the pixelated behavior.

One of my minor irritations about the old smiley set has now been addressed, and I get to share a CSS technique that hopefully all find interesting and new! :stuck_out_tongue:

Cheers,
Kirupa

2 Likes