We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

image-rendering CSS プロパティは、拡大/縮小された画像の描画に使用されるアルゴリズムについてのヒントをブラウザに与えます。これは、拡大/縮小された画像 (およびその他の要素、下記参照) に対して適用されます。拡大/縮小されていない画像には効果がありません。

例えば、画像本来の寸法が 100×100px であり、ページに表示する寸法を 200×200px (または 50×50px) と指定した場合、画像は、このプロパティで指定されたアルゴリズムで拡大 (または縮小) 表示されます。ユーザのズーム操作にも適用されるでしょう。

初期値auto
適用対象全要素
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

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% 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 の定義
勧告候補 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 種類の値を取ります (bicubicnearest-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' と同じになります。

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

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