pixel-art

This article is a stub. You can help the IndieWeb wiki by expanding it.

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.

Rendering Pixel Art

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

.u-pixel-art {
    image-rendering: pixelated;  /* Chrome */

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

    image-rendering: -webkit-optimize-contrast;  /* Safari */
}

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

IndieWeb Examples

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

Pixel Huh is Octavi Navarro's personal pixel art gallery.

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 posts pixel art to his personal blog (uses WordPress for hosting).

Kevin Marks has posted pixel art as SVG

Rendering Pixel Art

IndieWeb Examples

See Also