CSS3

プロパティ

image-rendering

→●、mdn

画像の拡縮時の補正。

image-rendering プロパティは、［画像のどの側面が最も重要であり、ユーザー エージェントが画像を拡縮するにあたり、保全されるべきか］についてのヒントを供する ― ユーザー エージェントは、それを加味した上で適切な拡縮アルゴリズムを選ぶことになる。要素に指定されたときは、要素の他のプロパティにより与えられている［背景画像、list-style 画像、置換要素の内容］などの、画像を表現し拡縮も要する、すべての画像に適用される。

auto

拡縮アルゴリズムはユーザー エージェントに依存する。

<IMG src="Com/DotPicture.gif" style="width:100px;
">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-rendering:auto;
">

そのまま拡大とauto

smooth

画像は、最も外観が近くなるアルゴリズムで拡縮されるべきである。特に、双線形 補間などの、色を“滑らか”にする拡縮アルゴリズムも受容される。これは、写真などの画像用に意図されている。

<IMG src="Com/DotPicture.gif" style="width:100px;
">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-rendering:smooth;
">

そのまま拡大とsmooth

high-quality

高品質な拡縮が選好されることを除いて smooth に同じになる。システム リソースが拘束されている下で、どの画像の品質をどの程度落とすか考慮する際には、high-quality を伴う画像の品質が、他の値を伴うものより優先されるべきである。

注記： この値は、システムリソースが拘束されている下でも、画像の品質を落とさないようにするものではない。それは単に、これらの画像が auto による画像に比して、拡縮するリソースを余分にあてがうべきとする選好を表出するものに過ぎない。ページ上の画像すべてに high-quality を適用することは、すべてに auto を適用するに等しくなる ― すべては同じに扱われるので。

注記： high-quality の価値を引き出すには、ページ上の重要な画像に限り適用すること。

<IMG src="Com/DotPicture.gif" style="width:100px;
">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-rendering:high-quality;
">

そのまま拡大とhigh-quality

pixelated

画像は［元の pixelated な【“ドットが目立つ”】資質を可能な限り保全する仕方］で拡縮されるが、必要とされるときは、ぶかっこうな歪みや少しの滑らか化も許容する：

• 各軸に対し独立に、画像の生来なサイズの正な整数倍を［ターゲットサイズに最も近くなる］ように決定する。
• 画像を、この整数倍サイズに crisp-edges のときと同じように拡縮してから、さらに smooth と同じ仕方でターゲットサイズまで拡縮する。

注記： これは、生来なサイズの整数倍においては crisp-edges と同じ結果を与える。整数倍でない場合、通例的に ― pixel art に対しても ― より良い視覚的な結果を与えるが、“二段階の”描画要件に因り、処理能に代償を被る。

<IMG src="Com/DotPicture.gif" style="width:100px;
">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-rendering:pixelated;
">

そのまま拡大とpixelated

crisp-edges

画像は［そのコントラストと輪郭を保全するアルゴリズム］で拡縮される ― 画像の色を滑らかにしたりぼかすような処理を導入することなく。

画像は、“最近傍（nearest neighbor）”アルゴリズムで拡縮するものとする：

元の画像の画素格子を、そのまま矩形格子として扱う下で、欲されるサイズに拡縮してから、最終画像の各画素の色を もっぱら拡縮された元の画像において最も近い画素からとるように。【最終画像の画素の中心に対応するような、元の画素格子内の点を見出して、その点が属する画素から色をとる。】

注記： 新たなサイズが元のサイズの整数倍でない場合、最近傍アルゴリズムは有意な“aliasing ”を導入し得る ― 元の画像において太さが同じ線は、拡縮された画像においては、どこに現れるかに依存して（線を成す）画素が他より細く／太くなるかもしれない、等々。

<IMG src="Com/DotPicture.gif" style="width:100px;
">
<IMG src="Com/DotPicture.gif" style="width:100px;
 image-rendering:crisp-edges;
">

そのまま拡大とcrisp-edges

このプロパティは、［crisp-edges、［pixelated において crisp-edges の様に動作する所］］以外においては、ある特定の拡縮アルゴリズムの利用を規定するものではない。例えば、image-rendering: auto に対しては、ユーザー エージェントは、既定では双線形 補間により拡縮する画像を［高負荷な状況では最近傍 補間／静的画像に対しては Lanczos 補間の様な高品質な拡縮アルゴリズム］に切り替えることがある。

¶例を省く

このプロパティは、以前は値［optimizeSpeed、optimizeQuality］を受容していたが、今や非推奨にされた ― ユーザー エージェントは、これらを妥当な値として受容するものとするが、順に［crisp-edges、smooth］と同じふるまいになるよう扱うものとする。また、作者は、これらを利用してはならない。

テスト