image-rendering

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

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

構文

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

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

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

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

形式文法

auto | crisp-edges | pixelated

.auto {
  image-rendering: auto;
}

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

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

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

仕様書

仕様書 状態 備考
CSS Images Module Level 3
image-rendering の定義
勧告候補 初回定義

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

ブラウザーの互換性

BCD tables only load in the browser

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

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

関連情報