image-rendering

概要

image-rendering プロパティはユーザエージェントの画像描画方法についてのヒントを与えます。
image-rendering は拡大/縮小された画像 (およびその他の要素、下記参照) に対して適用されます。たとえば、本来のサイズが 100×100px である画像に対し、ページ製作者が 200×200px (あるいは 50×50px) の大きさを指定した場合、画像は指定されたアルゴリズムを使って新しい大きさに拡大 (ないし縮小) されます。拡大/縮小はユーザの操作によっても適用されるでしょう (ズーム)。

構文

image-rendering:  auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges 

auto
初期値で、ユーザエージェントに依存します。バージョン 1.9 (Firefox 3.0) からGecko はバイリニアbilinear)リサンプリングを使います。通常これは高品質です。
optimizeQuality
ユーザエージェントは描画速度よりも品質を重視すべきことが示唆されます。
optimizeSpeed
ユーザエージェントは高速な描画を実現するリサンプリングアルゴリズムを使うことが求められます。現在 Gecko (Firefox) は最近傍 (nearest neighbor) リサンプリングを使います。
-moz-crisp-edges
Mozilla 独自拡張。Gecko (Firefox) は常に最近傍 (nearest neighbor) リサンプリングを使います。この値は、拡大した画像のエッジがなまるのを防ぐために使ってください バグ 423756
  • 現状では auto optimizeQuality はデフォルトでは同じで、ともにバイリニアリサンプリングとなります。
  • 現状では optimizeSpeed -moz-crisp-edges は同じで、ともに最近傍リサンプリングとなります。

img  { 
       image-rendering: optimizeQuality;  /* Firefox, 将来のバージョン (Gecko 1.9.2) */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0+ */
     }
/* GIF 画像のみに適用 */

img[src$=".gif"] { 
                   image-rendering: -moz-crisp-edges;         /* Fx, (Gecko 1.9.2) */
                   -ms-interpolation-mode: nearest-neighbor;  /* IE 7+ */
                 }
/* 背景画像をふくむ、ドキュメントのすべての画像とビデオに適用 */

html  { image-rendering: -moz-crisp-edges; }
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;
}
video { image-rendering: optimizeSpeed; }

実例

image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
78%squares.gif 100%squares.gif 138%squares.gif 縮小hut.jpg 拡大blumen.jpg

image-rendering:-moz-crisp-edges; -ms-interpolation-mode:nearest-neighbor;
78%squares.gif 100%squares.gif 138%squares.gif 縮小hut.jpg 拡大blumen.jpg

注意

ブラウザ互換性

ブラウザ 最小バージョン サポート内容
Internet Explorer 7.0 -ms-interpolation-mode: bicubic | nearest-neighbor
GIF と JPEG に適用され、継承されない。
Firefox (Gecko) 3.6 (1.9.2) image-rendering
Opera --- ---
Safari (WebKit) --- ---

Microsoft MSDN -ms-interpolation-mode プロパティも参照

仕様書

image-rendering は SVG のプロパティで、いかなる CSS 標準でも定義されていません。Gecko (Firefox) は HTML と XML コンテントの両方に適用します。

添付ファイル

ファイル サイズ 日時 添付者:
blumen.jpg
2288 バイト 2009-06-05 14:19:00 Jürgen Jeka
squares.gif
232 バイト 2009-06-05 14:19:01 Jürgen Jeka
hut.jpg
18558 バイト 2009-06-05 14:20:11 Jürgen Jeka
moveDialog.png
19863 バイト 2012-02-02 15:33:20 Potappo

Document Tags and Contributors

Contributors to this page: Level, ethertank, Taken
最終更新者: ethertank,
サイドバーを隠す