レスポンシブに異なる画像を提供するベストな方法【srcset】

レスポンシブ対応の大きな課題の1つが、「画像」です。
小い画像を幅に合わせ引き伸ばすとぼやけてしまいますし、大きい画像を縮小するとページが重くなってしまいます。

そのため今は端末の大きさに合わせ、3から5つの異なるサイズの画像を用意するのが一般的です。

この記事では、HTMLでレスポンシブに画像を指定する方法と、異なるサイズの画像を楽に用意する方法について説明していきます。

HTMLでレスポンシブに画像を指定する方法

HTMLの<img>タグで画像のソースを指定するためには、srcを使うのが一般的ですね。
よくあるレスポンシブ対応としては、大きめの画像をsrcで指定して、画面幅に合わせてサイズを変える方法があります。

<img src="thumbnail.png" width="100%" />

ですが、先に書いた通りこれだと常に大きいサイズの画像が配信されてしまい、通信量がかさんでしまいますよね。
利便性はもちろん、PageSpeed Insightsのスコアも下がり、SEO面でもマイナスです。

この問題は、srcset属性を利用することで防ぐことができます。

srcset属性

srcsetは、複数の画像を指定できる属性です。

srcsetで指定された場合、ブラウザは必要なサイズの画像しかダウンロードしません。
そのため、通信量を抑えつつあらゆる端末に対応することができます。

記述方法

srcseは、カンマ区切りで複数の画像と幅を指定します。
幅はpx単位ですが、wで指定します。

たとえば次のような場合は、thumbnail-s.jpgが480px、thumbnail-l.jpgが1080pxです。

<img
    srcset="thumbnail-s.jpg 480w,
            thumbnail-l.jpg 1080w"
>

ブラウザが自動で最適なサイズの画像を選択してくれるので、記述する順番は気にしないでも大丈夫です。

src属性

src属性はsrcsetと合わせて指定されている場合、ブラウザがsrcsetに対応していないときにのみ使われます。
そのためあらゆるデバイスで使えるように、src属性では一番大きな画像を指定しましょう。

<img
    src="thumbnail-l.jpg"
    srcset="thumbnail-s.jpg 480w,
            thumbnail-m.jpg 860w,
            thumbnail-l.jpg 1080w"
>

異なるサイズの画像を楽に用意する方法

さて、srcsetで複数の画像を指定する方法を学びました。
しかし、srcsetを使うためには1つの画像に対し複数の画像を用意する必要があります。
ImageMagickなどを使って生成の自動化をすることも可能ですが、それでもコストがかかりますし、後から異なるサイズに変えたいとき不便です。

異なる大きさの画像を用意するための一番楽な方法は、画像処理CDNを使うことです。

• ImageFlux
• Cloudinary
• imgix
• sirv
• imagekit
• optimole
• piio

URLパラメータでリアルタイム画像処理

画像処理CDNは、様々な画像処理をリアルタイムで行ってくれます。

• リサイズ
• マスキング
• クロッピング
• フォーマットの変更
• 文字の挿入

たとえばこのブログで使っているsirvでは、次のように指定するだけで画像をリサイズしてくれます。

<img
    srcset="https://untraten.sirv.com/thumbnails/article001.png?w=480 480w,
            https://untraten.sirv.com/thumbnails/article001.png?w=1080 1080w"
>

URLパラメータで指定するだけなので、配信サイズを変更したい場合も指定を変えるだけで大丈夫です。

<img
    srcset="https://untraten.sirv.com/thumbnails/article001.png?w=120 120w,
            https://untraten.sirv.com/thumbnails/article001.png?w=360 360w,
            https://untraten.sirv.com/thumbnails/article001.png?w=900 900w"
>

同様にwebpでの配信やブログタイトルの挿入なども、画像処理CDNによって自動化することができます。

使い方によりますが、個人ブログ程度なら無料の範囲内で多くのサービスを利用することができます。
そのためうまく使えば、画像関連の運用コストを大幅に下げることができます。

おわりに

今はレスポンシブ対応のコストが下がり、楽に低コストで最適化ができるようになりました。
楽に低コストでできるということは、知ってるかどうかで差が生まれやすいということでもあります。

定期的に最先端の知識をフォローしておきたいですね！