面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方

レスポンシブイメージ、使ってますか？

ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。

そ・こ・で！

本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。

ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。

では、行ってみましょう！

目次

• 1分でわかるレスポンシブ・イメージってなんだっけ？
• で、レスポンシブイメージってどうやって使うんだっけ？
• どのサイズ（寸法）の画像を用意するのがいいの？
• レスポンシブイメージ自動生成ツール
• アートディレクションも自動化できる！
• アートディレクション機能の使い方
• まとめ

1分でわかるレスポンシブ・イメージってなんだっけ？

すごく端的に説明してしまうと、マルチデバイス向けの画像表示には大きく分けて3つの課題があります。

1. ファイルサイズの最適化

デスクトップで1280pxで見せてる画像をそのまま幅が375pxの画面で見せたら通信データの無駄ですよねというのが一つ。Retina対応しても、375pxの画面向けには750pxの画像で十分です。

2. 解像度の最適化

もう一つは、スマホ向けの375pxの画像をデスクトップで表示した際に1280pxに引き延ばしたらボケボケになりますよねという問題。Retina対応でも同様に、解像度が足りないとボケてしまいます。

3. アートディレクション

そして、3つ目は俗にいう「アートディレクション」というやつで、大きい画面では詳細が見えるけど、小さい画面の場合、同じ画像だと小さくて詳細が見えなくなってしまうというやつです。デスクトップとスマホでレイアウトが変わる際に画像の縦横比が同じだと上手に見せられないといった場合も同じです。

たとえば、以下のようなケースです。ノートPCの大きさで見ると問題ないけど、スマホで見ると詳細が小さすぎて見えなくなってしまいます。

スマホでは重要な部分にズームして表示したい。

この場合、#1と#2の課題のようにサイズだけ変更するのではなく画像の切り抜きになんらかの「ディレクション（方向性を決める・判断すること）」が必要になるため「アートディレクション」と呼ばれています。単純な画像のリサイズではないので、自動化が難しいとされてきました。

で、これらの課題を解決するために生まれたのがレスポンシブイメージと呼ばれているsrcsetとsizes属性とpicture要素なわけです。

ここまでで、ざっと45秒くらいですかね？笑

そろそろ自動化ツールについて書いていきたいんですが、ちょっとその前に一つ質問です。

どのサイズ（寸法）の画像を用意するのがいいの？

上の例では画面サイズに合わせて表示する複数画像の幅を決めました。けど、本当にそれでいいのか、ちょっと疑問じゃないですか？

そもそも、レスポンシブイメージが解決しようとしているのはさまざまなサイズの画面に最適な寸法の画像を提供すること、そして、それらを最適なファイルサイズで提供することです。

よくよく考えてみると、レスポンシブイメージのブレイクポイント（画像が切り替わるスクリーン幅）は、画像の表示幅やレイアウトに合わせるのではなく、ファイルサイズで決めるのが良いという考えに行き着きます。表示される画像の幅は可変幅のレイアウトでは限定されていないので、たとえば、スマホ、タブレット、デスクトップの間のサイズも考える必要があるわけです。

ファイルサイズの検証

試しにファイズサイズを検証してみます。たとえば、下の画像を375px、768px、1280pxの3つの幅と、さらにその中間の幅で保存してみると、ファイルサイズは下の表のようになります。

たとえば1024pxの幅のスクリーンでページを見る場合、1024pxの画像が用意してあれば84.1KBで済んだはずなのが、1280pxの画像しかない場合は127.9KBのダウンロードが必要になります。

その差は実に43.8KBです。
43.8KBというと、例えばminifyしたCSSにするとかなりの量のスタイル指定になりますよね。また、画像が1枚ならいいですが、似たような画像が10枚あったとしたら？その差は数百KBに登ります。

こんなふうにページの表示最適化を念頭に制作していくと、レスポンシブイメージの画像切り替えのブレイクポイントは画像の幅ではなくてファイルサイズで決めた方が良さそうです。

でも、それってどうやるの？

それを自動化してくれるのが冒頭で紹介した「Responsive Image Breakpoints Generator 」というレスポンシブイメージ自動生成ツールです。

レスポンシブイメージ自動生成ツール

この「Responsive Image Breakpoints Generator 」を使うと、以下を指定するだけでレスポンシブイメージ用の複数サイズの画像とHTMLを生成してくれます。

1. 画像幅の下限と上限
2. ファイルサイズの間隔
3. 作成する画像の数
4. Retina対応するか・しないか

さっきの雪山の写真を使って、指定を以下（デフォルト値です）にして画像を書き出してみます。

1. 200〜1400px
2. 20KB間隔
3. 最大20個
4. Retina対応なし

画像をアップロードすると、以下の表の幅とファイルサイズの画像が書き出されました。

また、レスポンシブイメージ用のHTMLも書き出してくれます。

<img
  sizes="(max-width: 1280px) 100vw, 1280px"
  srcset="
    resp-img-test-1280px_wqpghm_c_scale,w_200.jpg 200w,
    resp-img-test-1280px_wqpghm_c_scale,w_513.jpg 513w,
    resp-img-test-1280px_wqpghm_c_scale,w_736.jpg 736w,
    resp-img-test-1280px_wqpghm_c_scale,w_916.jpg 916w,
    resp-img-test-1280px_wqpghm_c_scale,w_1081.jpg 1081w,
    resp-img-test-1280px_wqpghm_c_scale,w_1218.jpg 1218w,
    resp-img-test-1280px_wqpghm_c_scale,w_1280.jpg 1280w"
  src="resp-img-test-1280px_wqpghm_c_scale,w_1280.jpg"
  alt="">

これ、むちゃくちゃ便利じゃないですか？

これだけでも便利なんですが、なんと、このツール、アートディレクションも自動でやってくれるんです。感動です。

アートディレクション機能の使い方

他の部分は説明なしでもだいたいわかったのですが、アートディレクション機能のところだけちょっと迷ったので念のため説明を書いておきます。

上図のように4つのオプションを選択できるようになっていて、それぞれに画像の縦横比（aspect ratio）とViewportに対する画像の幅の比率（view-port ratio）が設定できます。全部選択すると以下のように、それぞれの幅が表示されるようになっています。

たとえば、上のTabletsの設定の場合、スクリーンの表示幅が768〜991pxの際、縦横比が4:3で作成した画像をViewportの70%の幅に最適な画像で表示するという指定になります。

これで、画像の作成と同様にpicture要素を使ったHTMLコードもかき出してくれます。いやぁ、便利ですねぇ。笑

まとめ

以上、レスポンシブイメージの画像とHTMLコードの作成を自動化してくれる「Responsive Image Breakpoints Generator 」についてご紹介しました。

画像のレスポンシブ対応は結構な手間がかかるので大変ですが、こういったツールを使えばかなり作業を効率化できそうです。画像の最適化はページ全体の最適化にも大きく貢献します。レスポンシブイメージのブラウザサポート状況（picture とsrcset ）もだいぶ良くなってきましたし、古いブラウザのサポートが必要な場合はPicturefillというポリフィルもあります。そろそろ使い始めることを考えても良いのではないでしょうか？

では、ハッピーRWD！

2016年10月13日に公開され、2017年2月26日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存