これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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
適用対象全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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 プロパティに近いものでしたが、現在の値は大きく異なります。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり なし3.6 なし あり あり
crisp-edges なし なし3.6 -moz- なし あり -o- あり1
pixelated41 なし なし なし26 ?
optimizeQuality なし なし3.6 なし あり あり
optimizeSpeed なし なし3.6 なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応41 ? ? ? ? ? ?
crisp-edges ? ? ? ? ? ? なし
pixelated ?41 ? ?28 ?4.0
optimizeQuality ? ? ? ? ? ? なし
optimizeSpeed ? ? ? ? ? ? なし

1. Supported as -webkit-optimize-contrast.

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

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