CSS の image-rendering
プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。
ユーザーエージェントは、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px
であって、実際の寸法が 200×200px
(または 50×50px
) であるとき、画像は image-rendering
で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。
構文
/* キーワード値 */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* グローバル値 */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;
値
auto
- 拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko はバイリニア再サンプリングを使用します (high-quality)。
smooth
- 画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
high-quality
smooth
と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。high-quality
の画像は他の値よりも優先されます。crisp-edges
- 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍</rb>法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
pixelated
- 画像を拡大する時は、最近傍</rb>法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は
auto
と同じになります。
メモ: optimizeQuality
および optimizeSpeed
の値は、初期の草稿で (SVG の仕様に似たものとして) smooth
および pixelated
の同義語として定義されていました。
形式文法
auto | crisp-edges | pixelated
例
<div> <img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> <img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> </div>
img { height: 200px; }
.auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
メモ: 実際の仕様では、 pixelated
と crisp-edges
の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) Canvas API は手動の画像データ操作または imageSmoothingEnabled
によって pixelated
の代替ソリューション を提供することができます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Images Module Level 3 image-rendering の定義 |
勧告候補 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | あり |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
メモ: 初めは SVG の image-rendering
プロパティに近いものでしたが、現在の値は大きく異なります。
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
image-rendering | Chrome 完全対応 13 | Edge 未対応 なし | Firefox 完全対応 3.6 | IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 6 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 14 | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 1.0 |
crisp-edges | Chrome
完全対応
13
| Edge 未対応 なし | Firefox
完全対応
65
| IE 未対応 なし | Opera
完全対応
15
| Safari
完全対応
6
| WebView Android
完全対応
≤37
| Chrome Android
完全対応
18
| Firefox Android
完全対応
65
| Opera Android
完全対応
14
| Safari iOS
完全対応
6
| Samsung Internet Android
完全対応
1.0
|
optimizeQuality | Chrome 完全対応 28 | Edge 未対応 なし | Firefox 完全対応 3.6 | IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 6.1 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 28 | Firefox Android 完全対応 4 | Opera Android 完全対応 14 | Safari iOS 完全対応 7 | Samsung Internet Android 完全対応 1.5 |
optimizeSpeed | Chrome 完全対応 28 | Edge 未対応 なし | Firefox 完全対応 3.6 | IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 6.1 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 28 | Firefox Android 完全対応 4 | Opera Android 完全対応 14 | Safari iOS 完全対応 7 | Samsung Internet Android 完全対応 1.5 |
pixelated | Chrome 完全対応 41 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 26 | Safari 完全対応 10 | WebView Android 完全対応 41 | Chrome Android 完全対応 41 | Firefox Android 未対応 なし | Opera Android 完全対応 26 | Safari iOS 完全対応 10 | Samsung Internet Android 完全対応 4.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。