image-renderingプロパティは、画像が拡大・縮小された際の描画方法を指定する際に使用します。
CSS指定やユーザー操作で画像が拡大・縮小表示された場合、デフォルトでは画像の見栄えが最適になるようにブラウザが自動的に処理を行います。
一般的には、ピクセルのギザギザが目立たなくなるようにアンチエイリアス処理をして拡大・縮小表示されることが多いでしょう。
image-renderingプロパティの値に crisp-edges を指定すると、アンチエイリアス処理などの平滑化やぼかしなどの処理をしないで、元画像のコントラスト・色・エッジを維持して拡大・縮小表示されます。
この値は、特にドット絵などのピクセルアートを対象としています。
image-renderingプロパティの値に pixelated を指定すると、隣接する色や平均色で拡がったピクセルを補完して拡大表示されます。
※image-renderingプロパティの値としては、
auto（ブラウザ依存）,
crisp-edges（ドット絵などのピクセルアートを対象にした値でぼかしなどの処理をしないでコントラストやエッジを保持する）,
pixelated（隣接する色や平均色でピクセルを補完して拡大表示される）
の他に、
smooth（写真を対象にした値で色などの見栄えを滑らかにする）,
high-quality（基本的には smooth と同じだが品質の高さを優先）
などが加わるかもしれません。
■値
- auto
- ブラウザに依存（初期値）
- crisp-edges
- アンチエイリアス処理などの平滑化やぼかしなどの処理をしないで、元画像のコントラスト・色・エッジを維持して拡大・縮小表示される。拡大・縮小された画像のみに有効な値。
- pixelated
- 隣接する色や平均色でピクセルを補完して拡大表示される。拡大された画像のみに有効な値
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {image-rendering: auto;}
img.sample2 {image-rendering: crisp-edges;}
img.sample3 {image-rendering: pixelated;}
HTMLソース
<p>
image-rendering: auto; を指定（初期値）<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
<p>
image-rendering: crisp-edges; を指定<br>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
<p>
image-rendering: pixelated; を指定<br>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
ブラウザ上の表示
image-rendering: auto; を指定（初期値）
image-rendering: crisp-edges; を指定
image-rendering: pixelated; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {
image-rendering: auto;
}
img.prefix_sample2 {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -ms-crisp-edges;
}
img.prefix_sample3 {
image-rendering: -moz-pixelated;
image-rendering: -webkit-pixelated;
image-rendering: -o-pixelated;
image-rendering: -ms-pixelated;
}
HTMLソース
<p>
image-rendering: auto; を指定（初期値）<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
<p>
image-rendering: crisp-edges; を指定<br>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
<p>
image-rendering: pixelated; を指定<br>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:64px;”>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif”>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” style=”width:256px;”>
</p>
ブラウザ上の表示
image-rendering: auto; を指定（初期値）
image-rendering: crisp-edges; を指定
image-rendering: pixelated; を指定