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

メモ: optimizeQuality および optimizeSpeed の値は、初期の草稿で (SVG の仕様に似たものとして) 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
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

メモ: 初めは SVG の image-rendering プロパティに近いものでしたが、現在の値は大きく異なります。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
image-rendering
実験的
Chrome 完全対応 13Edge 未対応 なしFirefox 完全対応 3.6IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.0
crisp-edges
実験的
Chrome 完全対応 13
代替名
完全対応 13
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
Edge 未対応 なしFirefox 完全対応 65
完全対応 65
完全対応 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
未対応 ? — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
WebView Android 完全対応 ≤37
代替名
完全対応 ≤37
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
Chrome Android 完全対応 18
代替名
完全対応 18
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
Firefox Android 完全対応 65
完全対応 65
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 14
代替名
完全対応 14
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
未対応 ? — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
Samsung Internet Android 完全対応 1.0
代替名
完全対応 1.0
代替名
代替名 非標準の名前 -webkit-optimize-contrast を使用しています。
optimizeQuality
非推奨非標準
Chrome 完全対応 28Edge 未対応 なしFirefox 完全対応 3.6IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 28Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
optimizeSpeed
非推奨非標準
Chrome 完全対応 28Edge 未対応 なしFirefox 完全対応 3.6IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 28Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
pixelated
実験的
Chrome 完全対応 41Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 26Safari 完全対応 10WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 未対応 なしOpera Android 完全対応 26Safari iOS 完全対応 10Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。