image-rendering

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2021.

CSS の image-rendering プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

試してみましょう

ユーザーエージェントは、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (または 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

構文

css

/* キーワード値 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* グローバル値 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: unset;

値

auto: 拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko はバイリニア (bilinear) 再サンプリングを使用します (high-quality)。
smooth Experimental: 画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
high-quality Experimental: smooth と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。high-quality の画像は他の値よりも優先されます。
crisp-edges: 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
pixelated: 画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。

メモ: optimizeQuality および optimizeSpeed の値は、初期の草稿で (SVG の仕様 image-rendering に似たものとして) smooth および pixelated の同義語として定義されていました。

公式定義

初期値	`auto`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

image-rendering = 
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

例

画像の拡大縮小アルゴリズムの設定

実際の使用では、 pixelated と crisp-edges のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) Canvas API は手動の画像データ操作または imageSmoothingEnabled によって pixelated の代替ソリューションを提供することができます。

<div>
  <img class="auto" alt="auto" src="blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

css

.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

結果

仕様書

Specification
CSS Images Module Level 3 # the-image-rendering

ブラウザーの互換性

BCD tables only load in the browser

メモ: 仕様書の例にあるようなピクセルアートの拡大縮小には crisp-edges を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。Firefox では、 pixelated は最近傍法として解釈されますが、 auto と crisp-edges はトリリニア法または線形で補間されます。

Chromium と Safari (WebKit) での動作については、 GetInterpolationQuality 関数と CSSPrimitiveValue::operator ImageRendering() をそれぞれ参照してください。