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

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

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

これ、僕がWeb制作をはじめて一番最初にびっくりしたことです。
特に独学で学んでいる場合、この情報に触れる機会ってそうそうないかもしれません。
にも関わらず、Web制作業界では当たり前の常識みたいになっているんですよね。

この記事では、

  • 画像を2倍サイズにする理由
  • 2倍サイズでの画像の書き出し方
  • 等倍と2倍サイズの画像の出し分け方法

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

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

目次

なぜ画像を2倍書き出しするのか?

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

Retinaディスプレイとは

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

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

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

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

通常ディスプレイとRetinaディスプレイの1pxの違い

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

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

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

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

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

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

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

パターンA

表示領域の2倍サイズで書き出した画像

パターンB

表示領域と同サイズで書き出した画像

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

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

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

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

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

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

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

画像を選択した状態で⌘command + E、または、上部メニューバーから「ファイル」→「書き出し」→「選択したオブジェクト…」をクリック。
Xdで画像の書き出し操作
「書き出しサイズ」を「2x」にして、「書き出し」をクリック。
Xd画像書き出しのサイズ指定

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

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

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

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

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

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

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

1x2xはそれぞれ、デバイスピクセル比を表しています。上記の例では、デバイスピクセル比が1のディスプレイでは「image.jpg」を、デバイスピクセル比が2の高解像度ディスプレイでは「image@2x.jpg」を表示します。(さらに3xを使用して、デバイスピクセル比3の場合に表示する画像も設定可能です)

この方法は、等倍と2倍の2種類の画像を用意する必要があるため、その分工数もかかります。場合によって全て2倍サイズで表示してしまうのもアリだと思います。

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

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

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

まとめ:画像は2倍サイズで書き出し、srcset属性で適切な画像を出し分けよう

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

  • Retinaディスプレイなどの、通常よりも高解像度なディスプレイがある
  • Retinaディスプレイで画像を綺麗に表示させるため、実際に表示するサイズの2倍サイズの画像を使用する
  • imgタグのsrcset属性で、ディスプレイの解像度に応じて表示させる画像を使い分けできる

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

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

内容が良かったらSNSでシェアしていただけると嬉しいです!
目次