この記事は、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エンコードされたやつを埋め込むやつ。
小さい画像なら埋め込んだ方がユーザ体験がよくなったり(?)するのでわりと使うことあるらしい(?)画像をbase64エンコードしてあげてその文字列をsrc内に書けば画像を表示できます。以下のエンコーダが便利です。

Base64エンコーダー (画像を簡単に変換)

<img src="data:image/png;base64,xxxxx..." />

基本は上の３つぐらいだと思います。(SVGとか,canvasはさておき)

本編: 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)

かわいい。

これを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), ...
}