世界一無駄な、画像をCSSで書き換えるジェネレーターを作った+検証
世界一無駄な、画像をCSSで書き換えるジェネレーターを作った+検証:
この記事は、CSS Advent Calendar 2018 - Qiitaの19日目の記事です。
みなさんWebで画像を表示させるときどうしていますか?
基本は
これですよね。
それ以外にも画像を表示させる方法はいろいろ。
わりと使うのが
次はbase64エンコードされたやつを埋め込むやつ。
小さい画像なら埋め込んだ方がユーザ体験がよくなったり(?)するのでわりと使うことあるらしい(?)画像をbase64エンコードしてあげてその文字列を
Base64エンコーダー (画像を簡単に変換)
基本は上の３つぐらいだと思います。(SVGとか,canvasはさておき)
ところで、
CSSでドット絵を描く方法
CSSでドット絵を描いてみよう
話はわりと簡単で、要素自体を透明にしちゃって影でピクセルを作っていこうというそれだけのはなし。
これが
こうなる。
画像のピクセル全部打ったらbox-shadowだけで画像になるじゃんっていうのが今回の話の原点。
というわけでジェネレーターをVue.jsを使ってつくってみた。
See the Pen CSS PixelArt Generator by いーふとイチオカ��(@redshoga) (@redshoga) on CodePen.
画像を入力すると画像のすべての画素を
今回はプロ生ちゃんの画像を使います。(400x400[px]に切り抜いています)(PNG形式で192KB)
© 2018 Pronama LLC
かわいい。
これを3つのソースで、表示を比較してみます。
1つめ、
2つめ、
3つめ、
ちなみに処理の都合上1px下にずらしてます。
表示が変わるはずはない。
ちなみに
やってて気が付いたのが
1つめ、
2つめ、
3つめ、
LoadingとPaintingに時間がだいぶかかってる。
そもそも、
とにかく10倍程度描画速度に差があることがわかりました。(たぶんCPU性能に依存してます。)
CSSはアニメーションがいろいろできます。そのため、今回の作成したやつを使えば
おわり)
この記事は、CSS Advent Calendar 2018 - Qiitaの19日目の記事です。
まずはじめに
みなさんWebで画像を表示させるときどうしていますか?基本は
<img src="sample.png" />
それ以外にも画像を表示させる方法はいろいろ。
画像を表示させる方法
わりと使うのがbackground-imageに指定してあげるやつ<div class="main-image"></div>
<style>
.main-image {
background-image: url("http://...")
}
</style>
小さい画像なら埋め込んだ方がユーザ体験がよくなったり(?)するのでわりと使うことあるらしい(?)画像をbase64エンコードしてあげてその文字列を
src内に書けば画像を表示できます。以下のエンコーダが便利です。Base64エンコーダー (画像を簡単に変換)
<img src="data:image/png;base64,xxxxx..." />
本編: box-shadowで画像を表示する
ところで、box-shadowを使うとドット絵がつくれます。CSSでドット絵を描く方法
CSSでドット絵を描いてみよう
話はわりと簡単で、要素自体を透明にしちゃって影でピクセルを作っていこうというそれだけのはなし。
これが
<div class="pixel-art"></div>
<style>
.pixel-art {
background: transparent;
width: 10px;
height: 10px;
box-shadow:
0 10px red,
10px 20px blue,
20px 10px green;
}
</style>
こうなる。
画像のピクセル全部打ったらbox-shadowだけで画像になるじゃんっていうのが今回の話の原点。
というわけでジェネレーターをVue.jsを使ってつくってみた。
See the Pen CSS PixelArt Generator by いーふとイチオカ��(@redshoga) (@redshoga) on CodePen.
画像を入力すると画像のすべての画素を
box-shadowに変換して、もとの画像が表示できるhtmlファイルが取得できるようになります。わりとCPUを食うので低スペPCの人はご注意。
比較実験: 表示
今回はプロ生ちゃんの画像を使います。(400x400[px]に切り抜いています)(PNG形式で192KB)© 2018 Pronama LLC
かわいい。
これを3つのソースで、表示を比較してみます。
1つめ、
<img>使うやつ(74バイト+画像(192KB))normal.html
<!DOCTYPE html> <html> <body> <img src="./puronama.png"> </body> </html>
2つめ、
backgroud-image使うやつ(200バイト+画像(192KB))backgroud-image.html
<!DOCTYPE html>
<html>
<body>
<div class="image"></div>
<style>
.image {
width: 400px;
height: 400px;
background-image: url("./puronama.png")
}
</style>
</body>
</html>
3つめ、
box-shadowで書くやつ(5.8MB)ちなみに処理の都合上1px下にずらしてます。
box-shadow.html
<div class="pixel-art"></div>
<style>
.pixel-art {
background: transparent;
width: 1px;
height: 1px;
box-shadow: 0px 1px rgba(255, 255, 255, 255), ...
}
表示が変わるはずはない。
ちなみに
box-shadowで書くやつを拡大するとしましまが見えたりします。<img>とかでちゃんと書くとブラウザかOSがここらへんをいい感じにやってたんだなあっと関心。
比較実験: CPU使用率
やってて気が付いたのがbox-shadowで画像を書くやつ。表示が遅すぎる。(当たり前だよなぁ) それで画像の描画終了までのChrome DevToolsのPerformanceを見てみた。1つめ、
<img>使うやつ2つめ、
backgroud-image使うやつ3つめ、
box-shadowで書くやつLoadingとPaintingに時間がだいぶかかってる。
そもそも、
<img>使うやつとbackgroud-image使うやつはローカルのファイルを引っ張って表示、それに対してbox-shadowで書くやつは自分のコード自身に画像データが入っているので、なんともいえない比較ですね。とにかく10倍程度描画速度に差があることがわかりました。(たぶんCPU性能に依存してます。)
おわりに
CSSはアニメーションがいろいろできます。そのため、今回の作成したやつを使えばbox-shadowにアニメーションをつけて...なんて使い方はしないですね。たぶん。box-shadowで画像を描画するのはふたつの意味でヨウリョウが悪いですね。(おしり
コメント
コメントを投稿