ページ上に表示させる画像の「最適な解像度」はどのぐらいか？

Webサイト上に画像を表示させる場合、どのぐらいの大きさ(解像度)の画像を用意するかはよく考えなければなりません。
私が多くのサイトを見ていて思うのは、ほとんどのWebサイトはこの設定が正しくできていません。プロの業者が作ったサイトでも、です。
正しくできていないので、

• ダウンロード容量の増大。
• ダウンロード時間の増加。(ページ表示速度の悪化)

という症状が生じています。(以下、「前述のデメリット」と記載するものは上記2点を指します)

特にデザインを売りにしている業者ほど「写真を綺麗に見せたい」という思いが強いのか、不必要に大きな解像度の画像を使用しているケースが多く、その結果「デザインはとても綺麗なサイトなのに、表示がかなり重い」となっていることが多々あります。(というか、そんなサイトが多過ぎて困る)

このページではその原因と解決法を解説していきます。

最適な画像解像度はデバイスごとに異なります

例えばページ上の画像を横幅300pxで表示するようなデザインだった場合、そこに500pxや1000pxの画像を使用していたら、実際のページ上の表示はCSSで300pxに縮小しているとしてもダウンロードするファイルは500pxや1000pxのものなので、前述のデメリットが生じてしまいます。

「じゃあ300pxピッタリの画像だけを用意しておけばいいじゃないか」とした場合、昔はそれでもOKでしたが現在はそれではダメです。
なぜなら現在は「デバイスピクセル比」という概念があり、デバイス(PCやスマホなど)によって以下のような違いがあるのです。

• ページ上の300pxを、デバイスの300pxで表示する。
• ページ上の300pxを、デバイスの600pxで表示する。
• ページ上の300pxを、デバイスの900pxで表示する。

もし300pxピッタリの画像しか用意されていない場合、後者になるほど画像を大きく拡大して表示させることになるので、ぼやけた表示になっていきます。
つまり上記3種のデバイスの場合、最適な解像度は以下のようにそれぞれ異なるのです。

• 300px
• 600px
• 900px

このような仕組みがあるので、デザインを売りにしている業者は敢えて大きめの解像度の画像を使用しているのだと思われます。
(上記例の場合ならすべてのデバイスに対して900pxの画像を使用する。もちろん1・2番目のデバイスにとっては無駄に大きい解像度になるので、前述のデメリットが生じます)

デバイスごとに最適な解像度の画像をダウンロード・表示させる方法

というわけで、画像の最適な解像度というのはデバイスごとに異なります。
ではどうするか？

もちろんそのための解決策はWebの仕様やブラウザ側ですでに用意されています。
それがimgタグの「srcset属性」と「sizes属性」です。
この2つの属性はセットで使用します。

この使い方をマスターすれば「綺麗な画像表示」と「必要最小限のダウンロード容量」を両立できるのです。

srcset属性とsizes属性の使い方

「srcset属性」と「sizes属性」の書き方はいくつかのパターンがあり同時に覚えようとすると混同してしまう可能性があるので、ここでは一例として私がよく使うパターンで解説します。

通常、画像を表示させるHTMLタグ(img)は以下になりますが、(画像が横幅300pxのsample.jpgの場合)

<img src="sample.jpg" alt="ここに代替テキスト">

上記コードを以下のように変更するのです。(横幅600pxのsample-600.jpgと、横幅900pxのsample-900.jpgをあらかじめ用意しておく)

<img src="sample.jpg" alt="ここに代替テキスト" srcset="sample.jpg 300w, sample-600.jpg 600w, sample-900.jpg 900w" sizes="300px">

「srcset属性」にはあらかじめ用意したいくつかの解像度の画像のパスを半角コンマ区切りで記入します。
上記コードでは、以下の3パターンの画像を用意した想定です。

• sample.jpg(横幅300px)
• sample-600.jpg(横幅600px)
• sample-900.jpg(横幅900px)

画像のパスの後に半角スペースを空けて「300w」や「600w」というように、その画像の本来の横幅を記入しておきます。
単位に「px」は使用できないため、「w」で記入するのが重要です。

そして「sizes属性」にはページ上の表示解像度を記入してください。
このページの例だと300pxで表示させるデザインなので「300px」を記入しています。

srcset属性とsizes属性の効果

上記の解説のように画像のHTMLを以下のように書くと、

<img src="sample.jpg" alt="ここに代替テキスト" srcset="sample.jpg 300w, sample-600.jpg 600w, sample-900.jpg 900w" sizes="300px">

以下のような結果が生まれます。

・ページ上の300pxを、デバイスの300pxで表示する機種。
→ sample.jpgだけをダウンロードして表示。

・ページ上の300pxを、デバイスの600pxで表示する機種。
→ sample-600.jpgだけをダウンロードして表示。

・ページ上の300pxを、デバイスの900pxで表示する機種。
→ sample-900.jpgだけをダウンロードして表示。

該当する解像度の画像はブラウザによって自動判別され、その画像だけがダウンロードされます。
それ以外の該当しない画像はダウンロードされないので、必要最低限のダウンロード容量で済むのです。

srcset属性とsizes属性を使ったページの例

srcset属性とsizes属性を使い、「綺麗な画像表示」と「必要最小限のダウンロード容量」を両立したページの例をお見せします。
と言うより、今ご覧になっているこのサイトがすでにその例です。

このサイトで使用されている画像はすべてsrcset属性とsizes属性が設定されています。
だからこそ、この表示速度の速さが実現できているとも言えます。

スマホ表示の時だけ画像の表示解像度が異なる場合

説明をなるべく簡単にするためにこのページでは紹介しませんでしたが、スマホ表示の時に画像の表示解像度を変えたいケースはよくあると思います。
その場合は、sizes属性の値を一つの例として以下のように書くことで対応できます。

sizes="(max-width: 640px) 100vw, 300px"

上記コードは以下のようなデザインのサイトを想定して記述しています。

• スマホ表示では横幅100vwで画像を表示。
• それ以外(PC表示)では横幅300pxで画像を表示。

上記のルールに従って、srcset属性に用意されている画像の中から最も最適なものがブラウザによって自動的に選択されるのです。
srcset属性やsizes属性の書き方は他にもいくつかのパターンがあるので、興味のある方は以下のサイトなどで学ぶと良いでしょう。