pixel-art

From IndieWeb

pixel art are images that are intentionally low-resolution, sometimes used as icons on indieweb sites. These pixel art images should be scaled up using nearest neighbor scaling.

How

How to create

How to render

Use the image-rendering: pixelated CSS property so that pixel art scales as intended. MDN documentation

.pixelated {
    image-rendering: pixelated;  /* Chrome */

    /* Firefox */
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;

    image-rendering: -webkit-optimize-contrast;  /* Safari */
}
  • Note: this example CSS selector was previously .u-pixel-art which may be useful for a microformats parser, although we are not currently aware of a consuming use-case for it currently.

See lospec's guide (archived) on all the pixel art scaling options.

IndieWeb Examples

Tim Swast

Tim Swast uses u-pixel-art u-photo to markup pixel art images on his personal blog. (example post)

Kevin Marks

Kevin Marks has posted pixel art as SVG

Skaterfish

Skaterfish Posts on personal blog about game dev and pixel art for games Me page

Mike Kupietz

Mike Kupietz doesn't make pixel art, but nonetheless has a blanket img, div {image-rendering: pixelated;} CSS rule to cover all foreground and background images on michaelkupietz.com, because he simply prefers it visually over most default browser antialiasing.

Add yourself

Add yourself here… (see this for more details)

Other Examples

Matej Jan

Matej 'Retro' Jan posts his own pixel art as well as coverage of other pixel artists to his personal domain (uses Tumblr for hosting).

Trasevol Dog

TRASEVOL_DOG posts pixel art to his personal blog (uses WordPress for hosting).

Octavi Navarro

https://octavinavarro.com/ Octavi Navarro, pixel artist and game developer.

Archived example of previous personal pixel art gallery.

  • As of 2026-03-05, the domain is redirecting to a Twitter account which is suspended.

See Also