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

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

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

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

メモ: Canvas API は手動の画像データ操作を通じて crisp-edges のフォールバックソリューションを提供することができます。

初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

auto
画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。バージョン 1.9 (Firefox 3.0) から、Gecko は高品質なバイリニア (bilinear) 再サンプリングを使用します。
crisp-edges
画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、その他のスムーズ化が行われない 2×SaI や hqx-family のような拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
pixelated
画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。
メモ: optimizeQuality 及び optimizeSpeed の値は、初期の草稿で (SVG の仕様に似たものとして) auto の同義語として定義されていました。

形式文法

auto | crisp-edges | pixelated

/* GIF と PNG 画像に適用される。エッジにぼかし効果が現れない */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: crisp-edges;
}
div {
  background: url(chessboard.gif) no-repeat 50% 50%;
  image-rendering: crisp-edges;
}

ライブ例

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif 縮小 hut.jpg 拡大 blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif 縮小 hut.jpg 拡大 blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif 縮小 hut.jpg 拡大 blumen.jpg

仕様書

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

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

ブラウザーの対応

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

凡例

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, hamasaki, Marsf, ethertank, Level, Taken
最終更新者: mfuji09,