image-rendering

概要

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

• 初期値: auto
• 適用対象:
  • 画像
  • あらゆる要素の background-image
  • HTML5 <video> 要素
  • HTML5 <canvas> 要素
• 継承: される
• メディア: visual
• 計算値: 規定通り

構文

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。

例

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% 100% 138% 縮小 拡大

image-rendering:-moz-crisp-edges; -ms-interpolation-mode:nearest-neighbor;
78% 100% 138% 縮小 拡大

注意

• バグ 486918 (Awful image quality in downscaling)

ブラウザ互換性

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

仕様書

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

• SVG 1.1 Painting #image-rendering (訳注: 日本語訳)