大きな画像のプレースホルダをあらかじめSVGで作っておくとかっこいい

写真を撮ったりすると大きな画像を貼ることがあって、現代の技術でもってしても大きな画像のダウンロードにはそれなりの時間がかかるし、回線が悪いと画面ががたついたり待たされたりして体験が良くない。

そこで、写真を簡略化した軽量SVGを用意しておいて、あらかじめそれを表示させた上に画像を読み込ませると面白いのではないかと思った。

こういう画像はprimitiveというコマンドで生成できる。写真のサイズは1MB近くあるけれど、SVGは4.2KBくらいになっているのでかなりお得。1/500くらいになっている。

primitive -i 20220227184442.png -m 1 -n 50 -s 1200 -o simple.svg

-n 50 の部分を増やすとより詳細なSVGになっていくけれど、比例してサイズも大きくなっていくし、SVGはテキストフォーマットなのでコスパが悪そう。

github.com

そして、写真とSVGとが重なるようにHTMLを書く。

<div style="position:relative;">
<svg> ... </svg>
<img ... intrinsicsize="1200x800" style="position: absolute; top: 0px; left: 0px; max-width:none" />
</div>

するとSVGの上に画像が読み込まれる形になってかっこいい(このページをキャッシュ無しでリロードしてみたり、開発者ツールで回線速度を下げたりすると確認できる)。

今のところ人間が手でSVGを作り、丁寧に貼り付けているので、自動的にできるとかっこいいと思う。