【Web制作必須知識】画像を２倍書き出しするのはなぜ？

Web制作者であれば、デザインカンプから画像を書き出し、imgタグで表示する作業が必ず必要です。
この時、素材となる画像は、実際に表示するサイズの２倍サイズで書き出すことが原則になります。

例えば、デザインデータ上で640×360pxの画像領域があったとします。
この場合、２倍サイズの1280×720pxの画像を使用して、640×360pxで表示することになります。

この記事では、

について解説しています。
Web制作をする上で必ず覚えるべき内容なので、是非最後までご覧ください。

案件によっては、画像は発注者側で用意している場合もありますが、適切な書き出しが出来ているか必ずチェックしましょう。

なぜ画像を２倍書き出しするのか？

なぜ画像を２倍サイズで用意する必要があるかというと、
「Retinaディスプレイ」等の高解像度ディスプレイに対応するためです。

Retinaディスプレイとは

Apple社が開発した高解像度ディスプレイのことで、通常のディスプレイと比較してピクセル密度が非常に高くなっています。

このピクセル密度は、人間の目が識別できる限界を超えた値になっています。
そのため、通常の距離で見ると個々のピクセルを識別することが出来ず、自然で鮮明な画像を表示することが可能です。

Retinaディスプレイでは、通常のディスプレイの1ピクセルをさらに分割し、2×2の4つのマスで1pxを構成しており、それぞれのマスが色情報を含んでいます。そのため、通常のディスプレイと比較して、よりきめ細かい鮮明な画像を表示することができます。

1ピクセルの幅がいくつのマスで構成されているかを表す指標を、デバイスピクセル比といいます。
1pxが2×2のマス目で構成されている場合、デバイスピクセル比は2となります。

Retinaディスプレイは、iPhone、iPad、MacBookなど、Appleの多くの製品に採用されています。
また、他社の製品でもRetinaと同様の技術を使用したディスプレイが採用されている場合があります。

現代ではWebサイトを表示できるほとんどのデバイスに高解像度ディスプレイが使用されているので、画像素材もそれらに対応したものを用意する必要があるのです。

等倍サイズだと画像がぼやける

Retinaディスプレイは前述した通り、2×2の4マスを使用して、通常のディスプレイの1ピクセルを表現しています。

もし等倍サイズで書き出した画像をそのままRetinaディスプレイに表示してしまうと、Retinaディスプレイの1ピクセルを構成する2×2の各マスの色情報が足りず、ぼやけたり画質が悪く見えてしまうのです。

そのため、２倍サイズで書き出した画像を半分のサイズで表示することで、ピクセル密度を疑似的に高くし、高解像度ディスプレイでも綺麗な画像を表示することが出来ます。

実際に例を見てみましょう。
高解像度ディスプレイを使用したデバイスでこのページを見ている方は、以下の２つの画像の違いがわかるはずです。

パターンA

パターンB

どちらの画像も300×300pxのサイズで表示していますが、素材である元画像のサイズに違いがあります。
パターンAでは600×600px、つまり表示領域の２倍サイズの画像を使用。
パターンBでは300×300px、つまり表示領域と同サイズの画像を使用しています。

高解像度ディスプレイを使用している場合、パターンBの画像は、パターンAに比べて画質が悪く、少しぼやけたように見えるはずです。

上記の例では僅かな差に見えるかもしれませんが、これらが積み重なるとサイト全体の印象が大きく変わってきます。
そのため、画像を使用する際は実際に表示するサイズの２倍の画像を用意するようにしましょう。

高解像度ディスプレイの中には、デバイスピクセル比が3の、更に高画質なものも存在します。
とはいえ、３倍のサイズで画像で書き出す必要性は個人的には薄いと思っています。

画像のサイズが大きいほど当然サイトが重くなりますし、２倍も３倍も見た目の差はあまりありません。
ほとんどの場合は２倍サイズの画像を用意するので十分事足りるでしょう。

２倍サイズでの画像の書き出し方

Webデザインツールでは、画像を書き出す際に倍率を指定することが出来ます。
ここではAdobe XDを例に、２倍サイズでの画像の書き出し方を解説します。

画像を選択した状態で⌘command + E、または、上部メニューバーから「ファイル」→「書き出し」→「選択したオブジェクト…」をクリック。

「書き出しサイズ」を「2x」にして、「書き出し」をクリック。

この時、JPEG形式にしたい場合でも、まずはPNG形式で書き出し、後からSquoosh等の優秀な画像圧縮ツールでJPEGに変換する方が、ファイル容量を削減できておすすめです。
詳しくはこちらの記事で解説しています。

画像を圧縮・リサイズしてWebサイトを高速化しよう【Squoosh】

画像ファイル名は２倍サイズであることがわかるよう、「○○○○@2x」のように、語末に@2xを付けることが多いです。

XD以外のデザインツールでの画像書き出し方法は、以下の記事をご覧ください。

imgタグのsrcset属性で、解像度に応じて画像を出し分ける

事前の準備として、「等倍サイズ」、「２倍サイズ」の２パターンの画像を用意しておきます。

以下のようにimgタグのsrcset属性を使用することで、ページを閲覧しているユーザーのデバイスピクセル比に応じて、ブラウザが読み込むべき画像を自動で判別し、表示してくれます。

<img
  srcset="image.jpg 1x, image@2x.jpg 2x"
  src="image@2x.jpg"
  alt=""
  width="300"
  height="300"
/>

srcset属性には、画像url 表示条件の組み合わせを、カンマ区切りで複数指定することができます。

1xや2xはそれぞれ、デバイスピクセル比を表しています。
上記の例では、デバイスピクセル比が1のディスプレイで「image.jpg」を、デバイスピクセル比が2の高解像度ディスプレイで「image@2x.jpg」を表示します。

src属性には、srcset属性がサポートされていないブラウザの場合に表示する画像を記述します。

src属性はsrcset属性で画像が取得できなかった場合の保険にはなりません。
つまり、srcset属性がサポートされているブラウザで、srcset属性内のファイルパスが間違っていた場合、src属性の画像が表示されるのではなく、画像自体が表示されなくなります。
そのため、ファイルパスは間違いのないよう細心の注意を払いましょう。

上記の方法は、等倍と２倍の２種類の画像を用意する必要があるため、工数もかかります。特に制約やこだわりがなければ、全て２倍サイズの画像を使用しても問題はないと思います。

srcset属性はデバイスピクセル比によって画像を切り替える他に、ブラウザのウィンドウ幅に応じてレスポンシブに画像を切り替えることも可能です。詳しい実装方法は以下の記事で解説しています。

まとめ：画像は原則2倍サイズで書き出そう

画像を2倍サイズで書き出すべき理由と、その表示方法について解説しました。

画像の画質が悪いと、Webサイト全体の品質が一気に低く見えてしまいます。
高解像度ディスプレイでも綺麗な画像を表示できるよう、今回解説した知識を是非活用してください！

また、画像を扱う際にはファイル形式にも気をつける必要があります。
こちらの記事も合わせてご覧ください。