image-resolutionプロパティは、画像を描画する際の解像度を指定します。
image-resolutionプロパティの指定が有効となるのは、GIF・JPEG・PNGなどのラスター画像（ビットマップ形式の画像）のみです。
SVGなどのベクター画像（座標やそれを結ぶパスで描画された画像）には固有の解像度が存在しないため、image-resolutionプロパティの指定は無効となります。
画像の解像度は、“単位長さ当たりの画素数”で定義され、以下の単位などで表すことができます。
例えば、72dpiとは1インチ当たり72個の画素（ドット）が配置されているということです。
image-resolutionプロパティの初期値は 1dppx ですが、これは1pxあたり1ドットの解像度で画像を表示するということです。
img.sample1 {image-resolution: 300dpi;}
img.sample2 {image-resolution: from-image;}
img.sample3 {image-resolution: snap;}
<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; を指定
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;
}
<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; を指定
