image-rendering

CSS の image-rendering プロパティは、画像を拡大縮小する時に使用するアルゴリズムを示します。要素に対して適用されると、プロパティは要素自身、他のプロパティで提供されるあらゆる画像、子孫要素に適用されます。

/* キーワード値 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* グローバル値 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

ユーザーエージェントは、ページの作者が自然な寸法とは別の寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって起こることもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (又は 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (又は縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

構文

値

auto

画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。バージョン 1.9 (Firefox 3.0) から、Gecko は高品質なバイリニア (bilinear) 再サンプリングを使用します。

crisp-edges

画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、その他のスムーズ化が行われない 2×SaI や hqx-family のような拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。

pixelated

画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。

形式文法

auto | crisp-edges | pixelated

例

/* GIF と PNG 画像に適用される。エッジにぼかし効果が現れない */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: crisp-edges;
}

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

ライブ例

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

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。