PixelArtと画像レンダリングパラドックス

CSSはNiftyプロパティを提供しますimage-rendering どのようにイメージのスケールに影響を与えることができます.通常、あなたが小さなイメージをとって、それをより大きくするとき、イメージはぼやけています.それは写真のためのちょっとokです、しかし、pixelartのために、影響はそうです...むしろ壊滅的.

信用:Lea、ゲームからの性格Cross Code
何がpixelartですか?
PixelArt写真を作成する方法です.ブラシストロークを使用するよりも、個々のピクセルを慎重に着色されます.それはあなたがわずか数百平方のタイルを与えられた場合、それらのモザイクを作るように求められているようだ.
しかし、ありがとうimage-rendering , それは彼らのピクセル化された自然を強調する方法で画像をアップグレードすることが可能です!あとでコードの2行だけ.

.pixelart {
    /* This order matters! */
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

...ああ!それは幻想的に見える!
を除いて、ちょっと待ってください.上の例のCSS指定はなぜですかimage-rendering 回と2つの異なる値で?何かの魚!

逆説

これは、ブラウザのサポートにパラドックスのビットがあることが判明image-rendering . 乗り越えるCan I Use そして、我々は次の変を見ます.


彼らが反対の特性を支持するクロムとFirefox notate
そうですね.クロームサポートpixelated ではなくcrisp-edges , Firefoxサポートcrisp-edges ではなくpixelated . 両方のブラウザーをサポートするために、両方の値は上記の例で指定されなければなりませんでした.
私が学んだことは、このパラドックスを解決することは、プロパティが異なる意味を持っているので、単に両方のプロパティを指定するのと同じくらい単純ではないということです.即ち、たとえcrisp-edges and pixelated 同じ結果を達成する、彼らは別のことを意味します.

これを解決するためには、仕様の異なるバージョン、実装についての議論、そして-
まあ、私はすでにすべてをやった!代わりに、3つの重要な質問に答えることによって発見したものを歩きます.

なぜパラドックスがあるのか.

違いは何ですかpixelated and crisp-edges ?

どのようなCSS私はピクセル画像を使用する必要がありますか?どのような鮮明なエッジで画像については?

パラドックスとは何か

直接対話に巻き込まれることなく、正確な理由を特定するのは難しいimage-rendering サポートがあります.ドキュメンテーション、議論、および定義(私のもの!)を掘り下げた後に.そこに1つの真実がそれを支えていました.
規則image-rendering 仕事が石でセットされないならば.
実際には、このプロパティにもかかわらず、最初の2012年には、ほんの数ヶ月前に2021年2月に登場してimages specification 変化!さらに、それはその9年の歴史の上で周期的な変化を見ました.つまり、image-rendering は、少なくともいくつかのテストのための機能を実装するブラウザからのフィードバックから来ている積極的な議論を受けています.
CSS仕様とは
仕様は、CSSの特徴、それらがどのように使用されるべきか、そしてどのようにそれらがブラウザによって実装されなければならないかを詳述しているドキュメントのセットです.それは基本的にCSSが何であるかについての真実の源です、そして、何十年も前にその創始以来一定の発展においてありました.お気軽にお読みくださいCSS standardization process .
その結果、プロパティが異なる程度に実装されている、FirefoxとChromeで別のルートを取っている.そして、スペックがまだ議論中であるので、誰も完全な実装をしません.

最後に、Firefoxの開発crisp-edges それは既に非標準のプロパティをサポートしているので-moz-crisp-edges , それは同じことであるはずだった.クロムは実装されたpixelated なぜなら、2014年の時点で、スペックpixelated もっと簡単だった.

ピクセル化または鮮明なエッジ？

掴むpixelated and crisp-edges 価値、それは重要なの目的を理解することですimage-rendering プロパティ.

画像レンダリングの意味論

私はもともとCSS仕様から直接引用をペーストするつもりです;強調は加えました:

The image-rendering property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled...

画像がスケーリングされると、コンピュータのいずれかをスケールアップしたり、縮小時に崩壊するものを選択して行方不明の詳細を埋める必要があります.それはトリッキーな、料理レシピを倍増のように、しかし、十分な成分を持っていない実現することができます.そして、イメージをスケーリングするための単一の正しい戦略はありません.そして、仕事をすることを意味するスケーリングアルゴリズムの多様性に至ります.

スケーリングアルゴリズムはギャップを埋める
それは、specは、その目的はimage-rendering はスケーリングアルゴリズムを選択することです.むしろ、ゴールは、イメージのどんな面が最も重要であるかを指定することです.例えば、我々がイメージを拡大するとき、我々は色ブレンドの方法について、あるいは、端を鋭く保つことについてより気にかけますか?答えに応じて、1つのアルゴリズムは、別のより良いかもしれません.
スケーリングアルゴリズムは最終的に選択されるがimage-rendering それは本当にイメージを扱う方法を知っているので、ブラウザの追加情報を提供することです!

ピクセル化と鮮明なエッジの意味論

それを知るimage-rendering すべてのイメージのどのような側面を識別することが重要です保存するには、どのように見ることができますpixelated and crisp-edges が定義されている.
ピクセル化された
イメージは、可能な限りオリジナルのピクセル化された性質を保存する方法でスケーリングされます.
クリスプエッジ
イメージは、コントラストとエッジを維持する方法でスケーリングされ、それは滑らかな色をしないか、プロセスのイメージにぼかしを導入しません.
ピクセル化されたイメージのために、強調はピクセルにあります、しかし、鮮明なイメージのために、強調は端にあります.ここで重要な点は、ピクセルがエッジと同じではないことです!
The pixelated and crisp-edges 値は意味的に交換可能ではありません.
私たちは、非整数の要素によってpixelart leaイメージをスケーリングすることによって違いを例証することができます.
スペックマンデートは何のアルゴリズムか
For crisp-edges , the nearest neighbor アルゴリズムを使用します.For pixelated , 最も近い整数スケールにイメージを取るために、最近傍を使用します.その後、滑らかなスケーリングアルゴリズムは、画像の残りの方法を取る.

参考文献

ピクセル化は、ぼやけているが、鮮明なエッジはピクセル化を歪める.

For pixelated , ピクセルは正方形でなければなりません、そして、その資産を保存する唯一の方法は拡大されたピクセルを重ねるのを許すことです.セル境界のぼけは、ピクセルが重なっている場所を表します.

For crisp-edges , 色のコントラストが最も重要であるので、ぼけは許されません.したがって、pixelart画像のサイズを変更すると、正方形のセルではなく、ピクセルの美学を歪める.

パラドックスの解決

の歴史と意味論を備えたimage-rendering , 我々はパラドックスを解決することができます!
PixelArtのために、それは明白ですpixelated 値を使用する必要がありますそれは、芸術の意味論と最も密接に一致するものです.しかし、Firefoxがまだサポートしていないのでpixelated , 我々は、現在提供されているソリューションに戻ることができます.crisp-edges , これは、最近傍アルゴリズムに解決します.

.pixelart {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

事実pixelated 最後は非常に重要です!Firefoxが実装している未来を想像するならpixelated , そして、crisp-edges . 最も意味的に適切な値を最後の将来の証明とすることは解決策です.
最大の互換性のために、アンデッドInternet Explorerのブラウザをサポートすることができます-ms-interpolation-mode: nearest-neighbor .
そして、コントラストの高いイメージについてはどうですか?
クロムとサファリはサポートしないcrisp-edges , 代わりにWebKitプロパティをサポートします-webkit-optimize-contrast これは似たような意味を持つ.したがって、使用よりむしろpixelated , もっとよく似たものを使う方がよいcrisp-edges 手段

.crispy-art {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

そして、それで、我々は最終的なデモで祝うことができます!

資源

PixelartゲームからleaのですCross Code そばRadical Fish Games

Can I Use - 現在のブラウザのサポートimage-rendering

CSS Images Module Level 3 - CSSイメージの仕様書の現在のエディタ

Chromium Issue - 追跡のクロムのsupprt

Mozilla Issue - Firefoxのサポートの追跡

Pixelated Github Issue - Specへの最近の更新の追跡

と私のウェブサイト上のいくつかの余分なものは、簡潔にこの記事からカット

Timeline of image-rendering

What changed in February 2021?