ウェブ デベロッパーは常に画像を扱っていますが、ほとんどの場合、ブラウザは画像の美しさはそのままに、サイトのデザインの境界に合わせて画像をスケーリングします。では、ブラウザがページ上の画像をどのように拡大縮小するかを制御したい場合はどうすればよいでしょうか。
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 プロパティが導入される前は、ブラウザはキャンバスを補間してぼやけたように表示していました（下記を参照）。
航空会社のチケット販売ツールや QR コードを表示するアプリを作成する場合、ユーザーはスキャンしやすいように画面全体に表示したいと考えることがよくあります。そのため、画像のレンダリングを制御することが重要です。
実装を確認したい場合は、Issue 317991 をご覧ください（この問題は、crisp-edges 値の実装のために未解決のままです）。実装状況を追跡するために問題にスターを付けます）。