Web画像の最適な解像度・サイズ・形式・容量とは？PNG、JPEG…どれがいいの？

2024.01.09

クリエイティブ / WEB

Webサイトを制作するにあたって、「画像」はとても大切です。
画像が粗かったり表示までに時間がかかったりすると、せっかくのWebサイトも残念な印象になってしまいます。

そこで今回は、Web制作時に押さえておきたい画像のポイントを、「解像度」「サイズ」「形式」「容量」の観点で解説します！
ぜひ最後までご覧ください。

Webサイトに最適な画像解像度とサイズ

はじめに、Webサイトに適している「画像解像度」と「画像サイズ」について解説します。

Web用画像は、画像のピクセル数と表示サイズによって表示される画質が決定されるため、画像ファイルが持つ解像度の設定は無視されてモニタの解像度で表示されます。つまりWeb上では、画像の解像度の設定がいくつだろうと関係ありません。

ですが、Webサイトから印刷される際に解像度の設定が使用されるため、「72dpi（ppi）」で画像を書き出すのが一般的になっています。

画像のサイズは、WebサイトのCSSサイズに合わせて書き出すのが良いですが、それだとMacのRetinaディスプレイのような高解像度モニタでは画像が粗く見える可能性があります。
Retinaディスプレイの場合、通常の1ピクセルに縦横2ピクセルずつ入っているため、対応するには画像の横幅・縦幅をそれぞれ2倍にした画像が必要です。

横幅・縦幅を2倍にした画像を用意することで、Macのような高解像度のディスプレイでも画像が粗くならずにすみます。
ただし、大きな画像はそれだけ容量が重くなってしまうため、注意も必要です。（画像の容量については記事の最後でもう一度解説します。）

Web画像の解像度とサイズの結論

・画像の解像度はWebで使う分には考えなくて良いが、一般的には「72dpi（ppi）」で書き出す。
・画像のサイズは、WebサイトのCSSサイズに合わせて書き出す。ただし、Macなどの高解像度ディスプレイでもきれいな画像を表示させる場合は、横幅・縦幅が2倍以上の画像を用意する。

WEBイメージ

Webサイトに最適な画像の形式（JPEG・PNG・GIF・SVG）

続いて、Webサイトに最適な画像の形式について解説します。
ここでは、主に使用する機会が多い「JPEG・PNG・GIF・SVG」の特徴を紹介します。

JPEG

まずはJPEG。こちらは圧縮がしやすく、細かい色の表現も得意な形式です。
主に写真など、大きく使いたいけれどファイル容量を軽くしたいものに向いています。

ただし、圧縮によって画質が下がりやすいので、サイズや見せ方に注意が必要です。

PNG

続いてはPNGです。
PNGの大きな特徴は、なんと言っても透過に対応していること。
背景を透過させたイラストやロゴ画像などは、PNGで書き出すのが一般的です。

「PNG-8」「PNG-24」「PNG-32」など、種類によっては画像の容量が重すぎたり色が沈んでしまったりすることもあるため、その見極めも重要です。

GIF

GIFは、パラパラ漫画のようなアニメーションの表現ができる形式です。
アイコンやボタンなどにちょっとした動きを加えると、サイトがリッチに見えます。

表現できる色数は少ないですが、アニメーションの表現ができるのは魅力的です！

SVG

最後に紹介するSVGは、今までの3種類とは違ってベクター形式です。
拡大しても荒れることがなく、CSSやJavaScriptなどの設定で色を変えたり、アニメーションの作成ができたりと自由度たっぷり！

ただ、複雑なものは表示に時間がかかるため、ロゴやアイコン、簡単な図などに向いています。

Web画像の形式の結論

・画像の目的や用途に応じて、最適な画像形式を選択する。

Web画像の容量について

最後は、Web画像の「容量」についてです。
画像サイズを大きく書き出せば画像自体はきれいに見えますが、その分容量が大きくなるため、Web上で画像を読み込む際に時間がかかってしまいます。
読み込み時間が長いと、ユーザーが離脱してしまったりGoogleからの評価が下がったりすることが考えられるので、画像はできるだけ軽くしたいところです。

画像の容量を軽くしたい、と思った時は、下記の3つの対処法を試してみてください。

①画像の向き・不向きを理解して、形式を使い分ける
②画像書き出し時の「画質」を80〜85%にする
③オンラインの画像圧縮サービスを使う

①は、前項の「Webサイトに最適な画像の形式」で紹介した通り、画像の使用目的を考えて、それに合った形式を選択してください。
②については、見え方を大きく変えずに容量を削減できるのが、だいたい画質80～85%ということになります。
さらに③のサービスを使うことで、1ページに複数枚画像を掲載しても、それほど重たくならないWebサイトに近づけることができます。