mozilla
Your Search Results

    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 コンテントの両方に適用します。

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

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