CSS Click Chart

common stuff
cutting-edge

Image Rendering

Provides a hint to the browser about what aspects of an image are most important to preserve when the image is scaled, to help the browser optimize its scaling algorithm.

Specification

Image Processing on W3C

Example Code

.img-1 {
  image-rendering: crisp-edges;
}

.img-2 {
  image-rendering: pixelated;
}

.img-3 {
  image-rendering: smooth;
}

Live Demonstration

Original image, scaled-up pixelated, and crisp edges.

Browser Support

Can I Use css-crisp-edges? Data on support for the image-rendering feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

image-rendering: pixelated
Pixels please: scaling images in CSS