image-rendering "<img />"

img要素に対するimage-renderingのテスト

HTML

<figure>
    <figcaption>normal /resize /resize with crisp-edges</figcaption>
    <img src="http://placekitten.com/160/160" />
    <img src="http://placekitten.com/160/160" width="120" height="120" />
    <img class="ce" src="http://placekitten.com/160/160" width="120" height="120" />
</figure>

CSS

body { background: #000; color: #fff; padding: 10px; margin: 0; }
figure, figcaption{ display: block; }
figure { margin: 1em 10px; }
.ce {
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}