ウェブ デベロッパーは常に画像を扱っていますが、ほとんどの場合、ブラウザは画像の美しさはそのままに、サイトのデザインの境界に合わせて画像をスケーリングします。では、ブラウザがページ上の画像をどのように拡大縮小するかを制御したい場合はどうすればよいでしょうか。
Chrome 41（2015 年 1 月のベータ版）では、新しい CSS プロパティ image-rendering: pixelated（仕様）が導入されます。これにより、ブラウザが拡大した画像をレンダリングする方法をより細かく制御できるようになります。
CSS プロパティ image-rendering と値 pixelated は、画像のサイズ変更時にブラウザの標準の滑らかなスケーリング（通常はバイリニア補間）をオフにして、別のスケーリング アルゴリズム（ほとんどの場合、最近接点法）に置き換えるため、興味深いものです。
2×2 ピクセルの画像を 100×100 ピクセルに拡大したとします。ブラウザは、画像がブロック状に見えないようにレンダリングします。例:
多くの場合、このスムージング動作は望ましくなく、代わりに画像をより正確に表現する方法を使用します。
この効果を得るには、次のように画像に image-rendering: pixelated; を適用します。
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
デモを試す。ご覧のとおり、このプロパティの適用は画像のレンダリング方法に大きな影響を与えます。
このプロパティは多くの場所に適用できます。
<img>要素<canvas style="image-rendering: pixelated">要素background-imageプロパティを持つ任意の要素
聞き取れませんでした。使用方法
サイトに写真を表示するだけの場合は、この設定は必要ありません。
ゲームは、画面サイズに正しく収まるようにキャンバスをスケールアップする必要があるため、この機能が適しています。この CSS プロパティ以前は、ブラウザが不鮮明に見えるようにキャンバスを補間していました（以下の [sic]を参照）。
航空券発券ツールや、QR コードを表示するアプリを作成する場合、スキャンしやすいように全画面表示したいとユーザーが感じることが多いため、画像レンダリングを制御することが重要です。
実装を確認したい場合は、Issue 317991 をご覧ください（この問題は、crisp-edges 値の実装のために未解決のままです）。問題にスターを付けて実装をトラッキングする）。