これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。
概要
image-rendering CSS プロパティは、拡大/縮小された画像の描画に使用されるアルゴリズムについてのヒントをブラウザに与えます。これは、拡大/縮小された画像 (およびその他の要素、下記参照) に対して適用されます。拡大/縮小されていない画像には効果がありません。
例えば、画像本来の寸法が 100×100px であり、ページに表示する寸法を 200×200px (または 50×50px) と指定した場合、画像は、このプロパティで指定されたアルゴリズムで拡大 (または縮小) 表示されます。ユーザのズーム操作にも適用されるでしょう。
| 初期値 | auto |
|---|---|
| 適用対象 | 全要素 |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定値 |
| Animation type | discrete |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* グローバル値 */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;
値
optimizeQuality 値および optimizeSpeed 値は、(SVG の仕様に似たものとして) 初期のドラフト仕様で auto の同義語として策定されていました。正式な構文
auto | crisp-edges | pixelated
例
/* GIF と PNG 画像に適用される。エッジにぼかし効果が現れない */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (非標準プロパティ) */
}
div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (非標準プロパティ) */
}
実例
image-rendering: auto;
78% 
100% 138% 縮小 
拡大 
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)
78% 100% 138% 縮小 拡大
image-rendering: crisp-edges; (-webkit-optimize-contrast)
78% 100% 138% 縮小 拡大
仕様書
| 仕様 | 状況 | コメント |
|---|---|---|
| CSS Images Module Level 3 image-rendering の定義 |
勧告候補 | Initial definition |
初めは SVG image-rendering プロパティに近いものでしたが、現在の値は大きく異なります。
ブラウザ実装状況
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
基本サポート (auto) |
(有) | 3.6 (1.9.2) | 未サポート[1] | 11.60 | (有) |
crisp-edges |
未サポート | 3.6 (1.9.2)-moz | 未サポート | 11.60-o | (有) [2] |
pixelated |
41.0 | 未サポート (bug 856337) | 未サポート | 26.0 | (有) [3] |
optimizeQuality, optimizeSpeed |
未サポート | 3.6 (1.9.2) | 未サポート | 11.60 | (有) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 41.0 | ? | ? | ? | ? |
補足
[1] Internet Explorer 7 および 8 は非標準の -ms-interpolation-mode プロパティ をサポートしており、2 種類の値を取ります (bicubic と nearest-neighbor):
- 画像にのみ適用されます (JPG, GIF, PNG, ...)
- IE7 では透過の無い画像にのみ適用されます
- 継承しません
- IE7 のデフォルト値:
nearest-neighbor(低品質) - IE8 のデフォルト値:
bicubic(高品質) - IE9 では廃止
[2] 非標準の名前でサポートしています: -webkit-optimize-contrast
[3] WebKit Nightly でサポートしています。WebKit のバグ 146771 を参照。
Canvas は、手動の imageData 操作を通じて crisp-edge/optimize-contrast のフォールバックソリューション を提供できます。
auto- デフォルト値です。画像を高品質で表示するアルゴリズムにより拡大/縮小されます。具体的には、バイリニア補完などの「滑らかな」色が許容されるアルゴリズムで拡大/縮小されます。これは、写真を想定しています。バージョン 1.9 (Firefox 3.0) から、Gecko は高品質な バイリニア (bilinear) リサンプリングを使用します。
crisp-edges- 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大/縮小されます。これは、画像の処理過程で滑らかな色やぼかし効果が現れません。これは、ピクセルアートなどの画像を想定しています。
pixelated- 画像を拡大する時は、「最近傍 (nearest neighbor)」または類似のアルゴリズムが使用され、画像が大きなピクセルで構成されたように表示されます。縮小する時は、'
auto' と同じになります。