share facebook facebook twitter menu hatena pocket slack

ドット絵やQRコードをボケさせたくないときに使えるCSS

工藤 響己

WRITTEN BY 工藤 響己

HTML上でドット絵(pixel art)を拡大縮小すると残念なピクセルのボケが発生することがあります。
CSSのimage-renderingプロパティを利用すればこのピクセルボケ問題を解消できます。

まずはCodePenで実際に試してみたものをご覧ください。
小さな画像を大きく拡大しています。

See the Pen qoGrdM by Hibiki Kudo (@h_kudo) on CodePen.

image-renderingは画像を拡大または縮小したときにどのようなアルゴリズムで描画されるかを指定できるプロパティで、指定できる値は以下の3種類です。

auto

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

crisp-edges

画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大/縮小されます。これは、画像の処理過程で滑らかな色やぼかし効果が現れません。これは、ピクセルアートなどの画像を想定しています。

pixelated

画像を拡大する時は、「最近傍 (nearest neighbor)」または類似のアルゴリズムが使用され、画像が大きなピクセルで構成されたように表示されます。縮小する時は、’auto‘ と同じになります。

image-rendering – CSS: カスケーディングスタイルシート | MDN

Chrome(v65)とFireFox(Quantum)ではcrisp-edgesは効きませんでした。そんなわけでしばらくは

image-rendering: pixelated;

を指定するのが実用的ですかね。
使い所は限定的ですがアイコン画像やQRコードの埋め込みをする際など大いに活躍してくれそうなCSSプロパティですね。

元記事はこちら

ドット絵やQRコードをボケさせたくないときに使えるCSS

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。