結構前からCSSで対応可能だったことを知って試した次第です。
実現したいこと
- ドット絵のアニメーションGIFをレスポンシブでも綺麗に用いる
一見デジタルと相性が良さそうに見えるドット絵ですが、webサイトに用いた際にレスポンシブなどで大きさが変わるとぼやけるために使いにくいと感じていました。
しかしCSSで対応可能なら話はかわりますし、アニメーションGIFによるドット絵にも効果があるならさらに有益に思えました。
手法
- image-renderingを使う
この手法は、以下のサイトのCSSを見て知りました。
該当するCSSの記述を以下のMDNのページより引用します。
- image-rendering – CSS: カスケーディングスタイルシート | MDN
- HTML Canvas Image Zoom
- image-rendering – Can I use… Support tables for HTML5, CSS3, etc
.pixelated {
-ms-interpolation-mode: nearest-neighbor; /* IE */
image-rendering: pixelated; /* Chrome */
image-rendering: crisp-edges; /* Firefox */
}
実例としては、当記事冒頭のドット絵が該当します。Edge以外であればブラウザを拡大しても綺麗にドットのエッジが保たれたうえで動いているはずです。
同様に100×50程度のサイズで作成したドット絵は以下でも確認できます。
ブラウザごとの対応
| Firefox | image-rendering: crisp-edges; |
|---|---|
| Chrome | image-rendering: pixelated; |
| IE | -ms-interpolation-mode: nearest-neighbor; |
以下の記事によるとEdgeに関してはJSを使うことで対応可能な模様ですが(未検証)近々不要になるはずです。
- WEB上でドット絵を拡大表示する
image-renderingに関する現時点までの経緯も含め、より詳しく知ることもできます。
なおChromeなどでcrisp-edgesを使う際の代替手段として-webkit-optimize-contrastが書かれていますが、試した所Chromeでは効果がない、少なくともcrisp-edgesを使ったFirefoxの状態とは違いボケたままでした。
crisp-edgesとpixelated
それぞれブラウザ別の対応のために必要なので選ぶ自由はあまりないのですが、crisp-edgesとpixelatedの違いが気になったので調べました。
調べた際に以下のページがわかりやすいように思えましたので引用します。
※image-renderingプロパティの値としては、 auto（ブラウザ依存）, crisp-edges（ドット絵などのピクセルアートを対象にした値でぼかしなどの処理をしないでコントラストやエッジを保持する）, pixelated（隣接する色や平均色でピクセルを補完して拡大表示される） の他に、 smooth（写真を対象にした値で色などの見栄えを滑らかにする）, high-quality（基本的には smooth と同じだが品質の高さを優先） などが加わるかもしれません。
また、以下のページからも引用します。
crisp-edges
画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
pixelated
画像を拡大する時は、最近傍法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。
加えて以下ページ内にある画像が参考になります。
ただ以下のようにも書かれています。
(Or it might look like pixelated, or as another type of pixel-scaling algorithm, depending on the browser.)
Firefoxは上記に該当しているのか、参考ページ内の画像のような状態ではなくChromeのpixelatedと同じように見え、違いがわかりませんでした。
メリット
ドット絵に用いるドットは1pxの正方形である必要はなく、2×2や8×8など大きなドットを使う表現が可能であり、この方向に特化した作品を制作している方も多くいます。
こういったドットが大きくなっても表現が成立するという点は、小さい画像を拡大しても問題が出にくいため画像容量の削減に繋がります。
実例として、当記事冒頭に使っている画像はアニメーションGIFであるものの100 × 56のサイズで画像容量は4KB程度になっています(以下が原寸です)。
結び
日本ではドット絵の他にPixel Art(ピクセルアート)という呼び方も一般的だと思います。
個人的にwebデザインとして使えるようにと練習していましたが、あくまでワンポイントのアイコン的な利用が限度だと考えていました。
しかしimage-renderingを使えば用途が広がり、アニメーションGIFを使ったとしても軽量に作ることができます。
ただ以下の点を考えると多少不安が残ります。
- 以前から存在していたにも関わらず(crisp-edgesは2010年頃、pixelatedは2014年頃から)現在でも状況がかわっていない
- ブラウザの表示状態が確定的とは言えないようで、今後crisp-edgesとpixelatedの表示状態に違いがでてくる可能性も考えられる(現時点で同じにしているというだけという可能性)
MDNのページに「本番に使うな」などの注記がないだけましですが、使用する場合は留意した方がよいように思います。
6人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
