The CSS Propertie image-rendering

The image-rendering property hints to the UA how to interpolate images when scaled. pixelated is for pixel art; crisp-edges keeps sharp edges.

.pixel-art { image-rendering: pixelated; }

img.photo { image-rendering: high-quality; }

autoThe default value. Browser picks standard algorithm (bilinear).

smoothPrefers smoothness (bilinear, bicubic).

high-qualityMaximum quality interpolation.

crisp-edgesKeeps sharp edges (nearest-neighbor or similar).

pixelatedPixel art — nearest-neighbor; each pixel rendered as a clear square.

CSS Images Module Level 3

Editor's Draft

Show all code