ウェブ デベロッパーとして、私たちは常に画像を使っています。多くの場合、ブラウザは画像をきれいに保ちながら、サイトのデザインの境界に合わせて画像を拡大縮小するという点で優れています。しかし、ブラウザによるページの画像のスケーリング方法を制御したい場合はどうすればよいでしょうか。
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 をご覧ください（詳細な値の実装については引き続き公開されています。実装を追跡するには、問題にスターを付けます）。