Publishing pixel art on the web? Don’t let it get blurred and smushed.

Apply image-rendering: crisp-edges to the image with CSS. Alternatively, export your pixel art at a higher resolution, so each visual pixel is made of many pixels, minimising impact from scaling and compression.

Remember to also use a good file format. Formats like JPEG are optimised for photos, not pixel art, and can introduce artefacts. PNG and GIF are good choices.

A collection of 88x31 buttons. One set is blurry and rendered with image-rendering: smooth. The other is sharp, and each individual pixel can be seen. It is rendered with image-rendering: crisp-edges.

  • #design
  • #CSS