【CSS Modules】image-resolutionプロパティの使い方
image-resolutionプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
image-resolutionプロパティは、CSSにおいて、画像が持つ「解像度」の情報をどのように扱うかを定義し、その表示品質を制御するプロパティです。このプロパティの主な役割は、ビットマップ画像ファイル（JPEGやPNGなど、ピクセルで構成される画像）に埋め込まれている解像度情報（例えば、DPIやPPIという単位で表される物理的なドットの密度）と、ウェブページ上でCSSによって指定された画像の表示サイズが異なる場合に、ブラウザが画像をどのようにレンダリングするかを決定することにあります。
具体的には、画像が本来持っている物理的な解像度をウェブページのレイアウトに反映させるか、あるいは特定の表示密度で強制的に描画するかを制御します。これにより、予期せぬ画像の拡大縮小を防ぎ、意図した通りの見た目を実現できます。
設定できる値には、画像ファイルに記述された解像度情報をそのまま使用するfrom-imageや、CSSのピクセル単位とデバイスのピクセル単位の比率を指定するdppx（dots per pixel unit）、そして物理的なインチやセンチメートルあたりのドット数を指定するdpi（dots per inch）やdpcm（dots per centimeter）などがあります。
このプロパティは、主に印刷用のスタイルシートを作成する際や、スマートフォンや高精細なディスプレイ（Retinaディスプレイなど）で画像をより鮮明に、かつ意図した通りに表示させたい場合に役立ちます。画像を構成するピクセル密度を正確に指定することで、異なる表示環境においても一貫した高品質な画像表示を実現することが可能です。
構文(syntax)
1image-resolution: 300dpi;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません