ちまたで阿部寛のサイトが速いと話題になっている。
ところで、体感的なWebサイトの速さを決める要因の一つとして、画像の読み込みがある。爆速の http://abehiroshi.la.coocan.jp/ でさえ、自分の環境だと画像の読み込みに 500ms ほどかかっている。
(http://abehiroshi.la.coocan.jp/ を開いてみた様子。画像が読み込まれるまで空白の領域ができている)
これは、阿部寛のサイトを高速化する にあるように、画像形式を工夫したり、CDNを使えばおおむね解決できるのだけど、とはいえどうしようもない部分もある（そもそもHTTPのラウンドトリップが遅いとか、何らかの事情でWebPが使えないとか）
ユーザ体験を良くするためにFacebookやMediumが採用している手法として LQIP (Low Quality Image Placeholder)というものがある。これは画質の低い（ボケたかんじの）画像を先にplaceholderとして表示しておくことで、ユーザに画像が読み込み中であるということを明示的に伝えるやりかた。
(画像はhttps://github.com/technopagan/sqip より引用)
今回はsqipというライブラリを使ってみることにする。画像の鮮明度をパラメータで指定することもできるが、今回は特にこだわりがないので、
sqip abe.jpg
のようにシンプルなコマンドをうつだけ。Base64形式の画像を含んだ img タグが生成されるので、これをそのままHTMLに埋め込めば良い。
<img width="314" height="366" src="/Users/foo/abe.jpg" alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMTQgMzY2Ij48ZmlsdGVyIGlkPSJiIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIgLz48L2ZpbHRlcj48cGF0aCBmaWxsPSIjYjhhYWExIiBkPSJNMCAwaDMxM3YzNjZIMHoiLz48ZyBmaWx0ZXI9InVybCgjYikiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC43IC43KSBzY2FsZSgxLjQyOTY5KSIgZmlsbC1vcGFjaXR5PSIuNSI+PGVsbGlwc2UgZmlsbD0iIzEyMWIzYyIgY3g9IjE3NSIgY3k9IjIyNCIgcng9IjQxIiByeT0iODEiLz48ZWxsaXBzZSBmaWxsPSIjMzkwMDAwIiByeD0iMSIgcnk9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0zOC4zOTI4NiA5Ljc1ODE0IC05LjUxMTU0IC0zNy40MjI2MyAxMTYuOCA0Mi44KSIvPjxlbGxpcHNlIGZpbGw9IiMxNzE5M2UiIHJ4PSIxIiByeT0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTguNzA2MjEgOTAuNDE3NSAtNDEuMTU4NDMgLTMuOTYzMSA0MS40IDIyMi4yKSIvPjxlbGxpcHNlIGZpbGw9IiNmZmYiIGN4PSIzMSIgY3k9IjM1IiByeD0iNDciIHJ5PSIxMDgiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjIyIDE1NC41bC04Ny41LTI1LjFMMTc4LTIyLjVsODcuNSAyNS4xeiIvPjxlbGxpcHNlIGZpbGw9IiNmZmYiIHJ4PSIxIiByeT0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTYuNTM5MDYgLTU4LjI5NzA2IDI3Ljg1MzQzIC0zLjEyNDI2IDEwNy4zIDIwNC4zKSIvPjxlbGxpcHNlIGZpbGw9IiNkYzcwNDIiIGN4PSIxMTIiIGN5PSI4NiIgcng9IjMyIiByeT0iNjAiLz48ZWxsaXBzZSBjeD0iMTE2IiBjeT0iMjEiIHJ4PSIzMiIgcnk9IjE1Ii8+PC9nPjwvc3ZnPg==);">
このタグ自体がだいたい1.2KBとかなので、最初の読み込みを（少しだけ）重くして、体感的な読み込み速度を改善するという感じのトレードオフになる。
