Cloudinary で画像をキャッシュさせ、面倒な解像度やサイズごとの画像を用意したくなかった
世の中は面倒なことで溢れています。
1990 年ごろはあまり意識する必要のなかった画面サイズは、今やレスポンシブデザインという名のもとに多種多様に存在します。 さらに UX 改善のため、「ネットワーク帯域を使わない」「画像のダウンロードが 必要最小限」な webサイトが優れているとされます。
これはつまり、様々な解像度とサイズの画像を、様々な画面のサイズにあわせて提供する必要がある ということです。
愚直に行うとしたら、image_small.jpg, image_middle.jpg, image_large.jpg, image_large_2x.jpg という画像を用意することですが、そんなことしたくない。
ということで、Adaptive Images: The srcset and sizes HTML Image Attributes の記事を見かけ、「これは良いぞ」と導入を決めました。
Cloudinary がやってくれることは、まさに 様々な解像度とサイズの画像を url パラメータで指定して提供する ことです（画面サイズにあわせるのは、スクリーンサイズがわかるクライアント側の実装となります）。
さらに嬉しいことに、クライアントに応じて webp など低容量の画像を返してくれます
つまり、クライアント側は Hugo の shortcode 機能を使って、画面サイズに応じてリクエストするパラメータを変えてあげれば、簡単にこのめんどうくさい問題を解決できます。
作成したのは下記の shortcode。url はこのブログ用のものになっているため、適宜編集をお願いします。shortcode は強力な仕組みですね。
<div class="picture">
{{ if .Get "caption"}}
<figure>
{{ end }}
<picture>
<!-- Adaptive Images Cloudinary https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary -->
<source media="(max-width: 480px)"
data-srcset="https://res.cloudinary.com/think-abst/image/upload/f_auto,q_{{ .Get "quality" }},w_480/v1547452141/think-abstract/{{ .Get "filename" }}.{{ .Get "type" }} 480w">
<source media="(min-width: 481px and max-width: 750px)"
data-srcset="https://res.cloudinary.com/think-abst/image/upload/f_auto,q_{{ .Get "quality" }},w_750/v1547452141/think-abstract/{{ .Get "filename" }}.{{ .Get "type" }} 750w">
<source media="(min-width: 751px)"
data-srcset="https://res.cloudinary.com/think-abst/image/upload/f_auto,q_{{ .Get "quality" }},w_1200/v1547452141/think-abstract/{{ .Get "filename" }}.{{ .Get "type" }} 1200w">
<img class="lazy post-img"
data-src="https://res.cloudinary.com/think-abst/image/upload/f_auto,q_{{ .Get "quality" }},w_750/v1547452141/think-abstract/{{ .Get "filename" }}.{{ .Get "type" }}"
alt="{{ .Get "alt" }}" style="{{ .Get "style" }}">
</picture>
{{ if .Get "caption"}}
<figcaption>{{ .Get "caption" }}</figcaption>
</figure>
{{ end }}
</div>
lighthouse で web page が改善したかどうかチェックする
lighthouse を参考に webpage を高速化していく – Think Abstract に背景を書いたが、今回の対応で指標が改善されているかを確認する。
実行する際は、Chrome のシークレットウィンドウで行わないと、プラグインなどの読み込みの影響を受けるため注意。
結果としては、読み込みが 0.2 s。 Performance は 3 改善されている。それなりに時間をかけたが、劇的な改善まではいけず…
画像を自前で用意しなくてよいのと、パフォーマンス改善はやはりまだまだ奥が深いなぁと感じずにはいられませんでした。