image-resolutionプロパティは、画像を描画する際の解像度を指定します。
image-resolutionプロパティの指定が有効となるのは、GIF・JPEG・PNGなどのラスター画像（ビットマップ形式の画像）のみです。
SVGなどのベクター画像（座標やそれを結ぶパスで描画された画像）には固有の解像度が存在しないため、image-resolutionプロパティの指定は無効となります。
■値
- 解像度
- 数値に単位をつけて解像度を指定（初期値は1dppx）
- from-image
- 画像ファイル自体が解像度情報を保有している場合には、その解像度が使用される。保有していない場合には、初期値の 1dppx となる。
- snap
- デバイスの解像度に合うようにまるめられた数値の解像度となる
■初期値・適用対象・値の継承
- 初期値
- 1dppx
- 適用対象
- すべての要素
- 値の継承
- する
画像の解像度は、“単位長さ当たりの画素数”で定義され、以下の単位などで表すことができます。
dpcm … dots per centimeter
dppx … dots per px
例えば、72dpiとは1インチ当たり72個の画素（ドット）が配置されているということです。
image-resolutionプロパティの初期値は 1dppx ですが、これは1pxあたり1ドットの解像度で画像を表示するということです。
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {image-resolution: 300dpi;}
img.sample2 {image-resolution: from-image;}
img.sample3 {image-resolution: snap;}
HTMLソース
<p>
image-resolutionプロパティの指定なし<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: 300dpi; を指定<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: from-image; を指定<br>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: snap; を指定<br>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
ブラウザ上の表示
image-resolutionプロパティの指定なし
image-resolution: 300dpi; を指定
image-resolution: from-image; を指定
image-resolution: snap; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {
-moz-image-resolution: 300dpi;
-webkit-image-resolution: 300dpi;
-o-image-resolution: 300dpi;
-ms-image-resolution: 300dpi;
}
img.prefix_sample2 {
-moz-image-resolution: from-image;
-webkit-image-resolution: from-image;
-o-image-resolution: from-image;
-ms-image-resolution: from-image;
}
img.prefix_sample3 {
-moz-image-resolution: snap;
-webkit-image-resolution: snap;
-o-image-resolution: snap;
-ms-image-resolution: snap;
}
HTMLソース
<p>
image-resolutionプロパティの指定なし<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: 300dpi; を指定<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: from-image; を指定<br>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
<p>
image-resolution: snap; を指定<br>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/neko.jpg”>
</p>
ブラウザ上の表示
image-resolutionプロパティの指定なし
image-resolution: 300dpi; を指定
image-resolution: from-image; を指定
image-resolution: snap; を指定