image-rendering：画像を拡大縮小するアルゴリズムを設定する

image-renderingプロパティの説明

image-renderingは、ブラウザが画像を拡大または縮小して表示する祭のアルゴリズムを設定します。

画像は本来の大きさで表示された場合に最も鮮明に見えますが、画面の大きさやページのレイアウトによって画像の大きさが拡大縮小されることがあります。ユーザーが自分の操作で画面の表示サイズを変更することもあります。そのような場面で、ブラウザがどのようなアルゴリズムで画像を描画するべきか、開発者側で指定することができます。

image-renderingに指定できる値

auto

画像の拡大縮小に関するアルゴリズムはブラウザの選択に任せます。ユーザーが使用しているブラウザの種類やバージョンによって表示される画像の品質が変わる場合があります。

crisp-edges

画像のコントラストとエッジを保つアルゴリズムで拡大縮小されます。ピクセルアートやGIFのように、色数や色調が少ない画像に向いています。

pixelated

画像が拡大されると、最近傍（nearest neighbor）法により大きなピクセルで構成されたように表示されます。縮小する場合はautoと同じ効果になります。

smooth（β）

画像の輪郭をなめらかに見せるアルゴリズムで拡大縮小されます。これはバイリニア補完などの色調が円滑化されるアルゴリズムで、実写のような色数の多い画像に向いています。

high-quality（β）

smoothよりも高品質な描画を目指します。システムのリソースが制約されている場合は、優先的に品質削減の候補となります。

image-renderingの使い方とサンプル

image-renderingプロパティの構文は以下の通りです。

/* キーワード値 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* グローバル値 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: unset;

image-renderingの実例

それでは実際にimage-renderingプロパティの書き方を見ていきましょう。以下の例は、50pxのアイコンが親要素の寸法に合わせて拡大された時に、アルゴリズムの違いによって見栄えに変化が起こるのを示すものです。

.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
	grid-template: 1fr / 1fr 1fr 1fr;
}
.samp_box > div {
	padding: .5rem;
	background: #fff;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box img {
	width: 100%;
	height: auto;
}
.ir_auto img {
	image-rendering: auto;
}
.ir_ce img {
	image-rendering: crisp-edges;
}
.ir_pix img {
	image-rendering: pixelated;
}

<div class="samp_box">
	<div class="ir_auto">
		<h2>auto</h2>
		<img src="../images/sample_icon50.gif">
	</div>
	<div class="ir_ce">
		<h2>crisp-edges</h2>
		<img src="../images/sample_icon50.gif">
	</div>
	<div class="ir_pix">
		<h2>pixelated</h2>
		<img src="../images/sample_icon50.gif">
	</div>
</div>