Cloudinaryを使って、はてなブログでレスポンシブ画像表示する

スマホとPCで画像を切り替えたい第二弾。

前回はタグを使って、2枚の画像を切り替えることをやりました。理屈はわかったんですけどねぇ、、、
ということで、もっと楽する方法です。

ブログの記事に載せる画像を2種類も手元で作って、2枚の画像をアップロードして、URLを調べて、間違えないようにpictureタグを作るというのが、たぶんくっそ面倒くさい。

Cloudinaryって知っていますか？

Cloudinary（クラウディナリ）というクラウドサービスを知っていますか？
簡単に言うと、画像保存・配信のためのクラウドサービスです。

アップロードした画像をそのままの形で配信するだけでなく、画像のサイズの変更しつつ配信するということができます。しかもURLに文字列をくっつけるという簡単な作業だけで実現できます。

魔法のような画像ストレージです。

PCとスマホサイズの画像を作るのを簡単にやるために、今回はCloudinaryというサービスを活用します。 *1
（サービスの利用方法の記事は、あとあと書く予定です）

まずは、Cloudinaryの魔法を体験しよう★

Cloudinaryで画像をリサイズする方法を紹介します。魔法を体験しておきます。

今回もまた、Unsplashから画像を拝借。夏っぽくヒマワリです。
https://unsplash.com/photos/5fKVGNg4QaM

Cloudinaryにアップロードした状態は、横1000pxの画像です。

はてなフォトライフに画像を入れずに、はてなブログに表示するには<img>タグを自分で書きます。
<img src="https://res.cloudinary.com/kanaxx/image/upload/v1591977946/hatenablog/sunflower.jpg">

画面幅の都合上、PCで見ても700pxくらいにしか表示されませんが、Cloudinary上では1000pxで保存してあります。

画像のサイズ

何も工夫をしないでこの画像を使ってしまうと、102,191バイトです。

700pxに縮小

1000pxの画像を700pxで表示するので、300px分が無駄です。ジャストサイズの700pxの状態で取り出します。

もともとの<img>タグを2行目の形に書き換えます。

<img src="https://res.cloudinary.com/kanaxx/image/upload/v1591977946/hatenablog/sunflower.jpg">
<img src="https://res.cloudinary.com/kanaxx/image/upload/w_700/v1591977946/hatenablog/sunflower.jpg">

分かりにくいですが、/w_700/が挟まってます。

作られる画像は、これです。

PCで見ても違いが分からないと思いますが、この画像の横幅は700pxです。

画像のサイズ

300pxを縮めただけで、61,060バイトまで小さくなりました。40Kくらいの節約です。

350pxに縮小

次は350pxに縮小します。
/w_700/を/w_350/に変えるだけです。

<img src="https://res.cloudinary.com/kanaxx/image/upload/v1591977946/hatenablog/sunflower.jpg">
<img src="https://res.cloudinary.com/kanaxx/image/upload/w_350/v1591977946/hatenablog/sunflower.jpg">

できる画像はこうなります。

PCの人は違いが分かるはずです。スマホだと3枚同じ画像が並んでいるように見えるかもしれません。

画像のサイズ

350pxの画像だと19,959バイトです。元画像に対して81%の削減です。
スマホの狭い画面で1000pxでも350pxでも大して見た目が変わらないのに、1000pxの画像を送り込んでしまうと80Kバイトも無駄遣いです。

画像の中央を捕らえたまま350pxに縮小

単純な縮小ではなく、画像全体から一部分を切り抜くこともできます。これも画像の編集作業なしで実現できます。

絵で表現すると、この部分を350pxで切り抜くイメージです。

実際の画像はこれです。夕日がみえなくなりましたね。

記載するHTMLはこのようになります。

<img src="https://res.cloudinary.com/kanaxx/image/upload/v1591977946/hatenablog/sunflower.jpg">
<img src="https://res.cloudinary.com/kanaxx/image/upload/c_crop,w_350,g_auto/v1591977946/hatenablog/sunflower.jpg">

画像取得用のURLには、/crop,w_350,g_auto/という指定をしています。
https://res.cloudinary.com/kanaxx/image/upload/c_crop,w_350,g_auto/v1591977946/hatenablog/sunflower.jpg

さて、pictureタグを作る

ここまでは、サイズ違いの画像が簡単に作れることの紹介でした。

これを使って、前回と同様に420pxをブレークポイントとして、<picture>タグを作ります。

• 1個目のURL<source>のsrcsetに、モバイルでの画像
• 2個目のURL<img>のsrcにPCの画像です。

<picture>
  <source media="(max-width:420px)"
    srcset="https://res.cloudinary.com/kanaxx/image/upload/c_crop,w_350,g_auto/v1591977946/hatenablog/sunflower.jpg" >
  <img class="hatena-fotolife"
    src="https://res.cloudinary.com/kanaxx/image/upload/w_700/v1591977946/hatenablog/sunflower.jpg">
</picture>

実際の画像

PCで見ると夕日が入ったヒマワリの風景が見えるはずです。
スマホの縦画面で見るとヒマワリの拡大絵になり、横持ち（ランドスケープモード）にすると、夕日の入った絵になると思います。

まとめ

表示画像を最適化することで、ページの無駄をなくし表示速度を改善することが期待できます。
<picture>タグを使ってやるにも、事前の準備段階が面倒でやる気なくなると思います、続かないと意味がないですから。Cloudinaryを使えば、はてなブログでもレスポンシブな画像表示を簡単に実現できるので、試してみてください。

参考リンク

*1:Cloudinaryはこちらから
cloudinary.com