Sep. 10th,2021
プロパティについて
＃
概要
“image-rendering”プロパティは要素の画像を拡大、もしくは縮小する際の画像処理の方法を指定するプロパティです。
“image-rendering”プロパティはユーザー・エージェントに画像を拡大・縮小する際にどの特徴を優先するべきかのヒントを示し、ユーザー・エージェントはそれに合わせた画像処理の方法を選択することが期待されます。
“image-rendering”プロパティは置換要素のコンテンツ(“img”要素の“src”属性で指定された画像など)だけでなく、要素に適用された“background-image”プロパティや“list-style-image”プロパティなどによって読み込まれる画像の拡大・縮小にも反映されます。
“image-rendering”プロパティは画像処理の方法を一つの方法に制約するものではなく、ユーザー・エージェントはシステム・リソースの使用率や画像の種類などに応じて画像処理の方法を選択できます。
サンプルコード
img { image-rendering: pixelated;}
＃
値
| 値 | 説明 |
|---|---|
| auto | 拡大・縮小の方法はユーザー・エージェントに依ります (ユーザー・エージェントはシステム・リソースの使用率などに応じて画像処理の方法を変える場合があります。) |
| smooth | 画像の見栄えを優先した方法で拡大・縮小します (色の境目がなめらかになるバイリニア補間法などの方法で画像処理します。写真に適しています。) |
| high-quality | “smooth”と同じですが、より高い品質を求めます (システム・リソースに制約がある時、“high-quality”が指定された画像の処理に優先してリソースが割り当てられます。優先度を変更するだけであり、すべての画像に“high-quality”を指定すると“auto”と変わりません。) |
| crisp-edges | コントラストやエッジの保持を優先した方法で拡大・縮小します (色の境目をなめらかにしたり、ぼかしたりしない方法で画像処理します。ドット絵や線画に適しています。) |
| pixelated | ドット絵のような表現の保持を優先し、最近傍補間法や類似の方法で拡大・縮小します |
| 共通キーワード |
“image-rendering”プロパティは過去には値として“optimizeSpeed”と“optimizeQuality”を受け付けましたが、これらの値は非推奨になりました。“optimizeSpeed”は“pixelated”、“optimizeQuality”は“smooth”として扱われますが、これらの値は新たに使用されるべきではありません。
＃
使用例
＃
＃
拡大・縮小の方法を指定する
div {
image-rendering: smooth;
background-size: cover;
background-image: url(sample.png);
}
image-rendering: smooth;
image-rendering: smooth;
div {
image-rendering: high-quality;
background-size: cover;
background-image: url(sample.png);
}
image-rendering: high-quality;
image-rendering: high-quality;
div {
image-rendering: crisp-edges;
background-size: cover;
background-image: url(sample.png);
}
image-rendering: crisp-edges;
image-rendering: crisp-edges;
div {
image-rendering: pixelated;
background-size: cover;
background-image: url(sample.png);
}
