Documentation CSS

概要

image-resolutionプロパティは、CSSで画像の固有解像度（intrinsic resolution）を指定するためのプロパティです。このプロパティを使用することで、画像のDPI（dots per inch）を明示的に設定し、高解像度ディスプレイや印刷用途での表示を制御できます。

DPI（dots per inch）とは

DPI（dots per inch）は、1インチあたりのドット（ピクセル）数を表す単位です。値が大きいほど高解像度で、より細かく鮮明な表示が可能になります。

  • 72dpi: 従来のWebディスプレイ標準
  • 96dpi: Windows標準のディスプレイ解像度
  • 150dpi: 印刷用の低解像度
  • 300dpi: 印刷用の標準解像度
  • Retina（2x）: 192dpi相当（2dppx）

このプロパティが必要な理由

高解像度ディスプレイ（Retina、4Kなど）が普及した現在、画像の解像度管理は重要です。image-resolutionを使用することで、画像ファイル自体のメタデータに依存せずに表示解像度を制御できます。

構文と基本的な使い方

image-resolution: from-image | <resolution>;

パラメータ詳細

from-image

画像ファイル自体に埋め込まれた解像度メタデータ（EXIF情報など）を使用します。

img {
    /* 画像ファイルのメタデータから解像度を取得 */
    image-resolution: from-image;
}

<resolution>値

明示的に解像度を指定します。以下の単位が使用できます。

単位説明例
dpidots per inch（1インチあたりのドット数）300dpi
dpcmdots per centimeter（1cmあたりのドット数）118dpcm
dppxdots per pixel（1ピクセルあたりのドット数）2dppx
xdppxの省略形2x
/* 300dpiで表示 */
.print-quality {
    image-resolution: 300dpi;
}

/* Retina（2倍解像度）で表示 */
.retina-image {
    image-resolution: 2dppx;
}

/* 2dppxと同じ意味 */
.retina-image-alt {
    image-resolution: 2x;
}

snap値

snapキーワードを追加すると、指定した解像度に最も近い値に丸められます。

img {
    /* 指定解像度に近い整数値にスナップ */
    image-resolution: 300dpi snap;
}

実践的な使用例

高解像度ディスプレイ対応

Retinaディスプレイなど、高解像度ディスプレイ向けの設定です。

<div class="hero-section">
  <img src="hero-image@2x.png" alt="ヒーロー画像" class="retina-ready">
</div>
/* 2倍解像度の画像を適切なサイズで表示 */
.retina-ready {
    image-resolution: 2dppx;
    max-width: 100%;
    height: auto;
}

この設定により、2倍の解像度で作成された画像（例: 800x600pxの画像を400x300pxで表示）が適切なサイズで表示されます。

印刷用スタイルシート

印刷時に高解像度で出力するための設定です。

/* 画面表示用 */
.document-image {
    image-resolution: 96dpi;
    max-width: 100%;
}

/* 印刷用 */
@media print {
    .document-image {
        image-resolution: 300dpi;
    }
}

異なる解像度の画像を統一

様々なソースからの画像を統一した解像度で表示する場合の設定です。

<div class="image-gallery">
  <img src="photo-low-res.jpg" alt="低解像度画像" class="normalize-resolution">
  <img src="photo-high-res.jpg" alt="高解像度画像" class="normalize-resolution">
</div>
.normalize-resolution {
    /* すべての画像を1dppx（96dpi）で表示 */
    image-resolution: 1dppx;
    width: 300px;
    height: auto;
}

画像メタデータの活用

画像ファイルに埋め込まれた解像度情報を活用する場合の設定です。

/* 画像のEXIF情報から解像度を取得 */
.auto-resolution {
    image-resolution: from-image;
}

/* フォールバック: メタデータがない場合は96dpi */
.auto-resolution-fallback {
    image-resolution: from-image;
    /* ブラウザがサポートしていない場合のフォールバック */
}

レスポンシブデザインとの組み合わせ

/* モバイル向け: 標準解像度 */
.responsive-image {
    image-resolution: 1dppx;
    max-width: 100%;
    height: auto;
}

/* 高解像度ディスプレイ向け */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    .responsive-image {
        image-resolution: 2dppx;
    }
}

/* 超高解像度ディスプレイ向け */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi),
       (min-resolution: 3dppx) {
    .responsive-image {
        image-resolution: 3dppx;
    }
}

解像度単位の変換

異なる解像度単位間の変換方法です。

dpiとdppxの関係

/* 1dppx = 96dpi（標準的なWebディスプレイ） */
.standard {
    image-resolution: 1dppx;  /* = 96dpi */
}

/* 2dppx = 192dpi（Retinaディスプレイ） */
.retina {
    image-resolution: 2dppx;  /* = 192dpi */
}

/* 3dppx = 288dpi（超高解像度） */
.super-retina {
    image-resolution: 3dppx;  /* = 288dpi */
}

変換表

dppxdpi用途
1dppx96dpi標準ディスプレイ
1.5dppx144dpi一部のAndroid端末
2dppx192dpiRetina（iPhone、Mac）
3dppx288dpiiPhone Plus、高解像度Android
4dppx384dpi4K/5Kディスプレイ

Before/After比較

高解像度画像の表示サイズ制御

/* Before: 解像度指定なし（画像が大きく表示される） */
.hero-image-before {
    /* 800x600pxの2倍解像度画像がそのまま800x600pxで表示 */
    max-width: 100%;
}

/* After: 2dppx指定（適切なサイズで表示） */
.hero-image-after {
    image-resolution: 2dppx;
    /* 800x600pxの2倍解像度画像が400x300pxで表示 */
    max-width: 100%;
}

印刷品質の向上

/* Before: 画面表示と同じ解像度で印刷 */
.print-image-before {
    /* 画面では問題ないが、印刷時に粗く見える */
}

/* After: 印刷時に高解像度を指定 */
@media print {
    .print-image-after {
        image-resolution: 300dpi;
        /* 印刷時に鮮明な出力 */
    }
}

ブラウザサポート状況

image-resolutionプロパティのサポート状況は限定的です。

ブラウザサポート状況
Chrome未サポート
Firefoxバージョン32以降で部分サポート（-moz-プレフィックス）
Safari未サポート
Edge未サポート

代替手法

現時点でブラウザサポートが限定的なため、以下の代替手法を検討してください。

1. srcset属性を使用

<img src="image.jpg"
     srcset="image.jpg 1x,
             image@2x.jpg 2x,
             image@3x.jpg 3x"
     alt="レスポンシブ画像">

2. picture要素を使用

<picture>
  <source media="(min-resolution: 2dppx)" srcset="image@2x.jpg">
  <source media="(min-resolution: 3dppx)" srcset="image@3x.jpg">
  <img src="image.jpg" alt="高解像度対応画像">
</picture>

3. background-imageとメディアクエリ

.hero-background {
    background-image: url('hero.jpg');
    background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .hero-background {
        background-image: url('hero@2x.jpg');
    }
}

4. image-setを使用（CSS）

.responsive-bg {
    background-image: image-set(
        url('image.jpg') 1x,
        url('image@2x.jpg') 2x,
        url('image@3x.jpg') 3x
    );
}

注意点と制限事項

1. ブラウザサポートの制限

現時点で主要ブラウザでの完全なサポートがないため、本番環境での使用は慎重に検討してください。

/* フォールバックを含む安全な記述 */
.image-container img {
    /* 標準的なスタイル */
    max-width: 100%;
    height: auto;

    /* プログレッシブエンハンスメント */
    image-resolution: from-image;
}

2. 画像形式による制限

すべての画像形式がEXIF解像度情報をサポートしているわけではありません。

形式解像度メタデータ
JPEGサポート（EXIF）
PNG一部サポート（pHYs chunk）
GIF非サポート
WebPサポート
SVGベクター形式のため不要

3. パフォーマンスへの考慮

高解像度画像はファイルサイズが大きくなるため、適切な最適化が必要です。

<!-- 遅延読み込みとの併用 -->
<img src="image@2x.jpg"
     loading="lazy"
     decoding="async"
     alt="最適化された画像">

まとめ

image-resolutionプロパティは、画像の固有解像度を制御するための強力なツールです。

ポイント

  • DPI指定: dpi、dpcm、dppx（またはx）単位で解像度を指定可能
  • from-image: 画像メタデータから解像度を取得
  • snap: 指定解像度に近い整数値に丸める
  • 印刷対応: @media printと組み合わせて印刷品質を向上

現時点での推奨

ブラウザサポートが限定的なため、以下の代替手法を優先的に使用することを推奨します。

  1. srcset属性によるレスポンシブ画像
  2. picture要素による条件分岐
  3. image-setによるCSS背景画像
  4. メディアクエリによる解像度別スタイル

将来的にブラウザサポートが拡大すれば、image-resolutionはよりシンプルな解像度管理を実現できるプロパティとして活用できるでしょう。

参考文献

円