この記事では、Webサイトに最適な画像サイズ、解像度、HTMLで画像を表示する方法について解説します。
Webサイトに最適な画像サイズと解像度
画像サイズは小さすぎると画質が粗くなってしまい、大きすぎるとデータは重くなり表示速度が低下してしまいます。ではサイトに適した画像サイズについて、一般的に広く使われているディスプレイサイズから考えてみましょう。まずは世界や日本の統計データが確認できる「StatCounter」を使って、日本で利用されているディスプレイサイズのシェア率を確認すると下記のような結果がでました。
StatCounter
現在（2024年2月時点）、画面サイズは1920px×1080pxが高いシェアを占めています。この画面サイズを基準にして、サイトに適した画像サイズは1920px×1080pxを目安とします。
ただし、MacやiPhoneに採用されている高解像度のRetinaディスプレイでは鮮明に表示されないことがあります。Retinaディスプレイは2px×2pxを通常の1pxとして表現しているため、実際に表示する画像サイズの横幅と高さをそれぞれ2倍にした画像が必要になります。
例えば640px×360pxの画像をRetinaディスプレイに対応させるためには1280px×720pxの画像が必要です。
また、サイトで使用する画像の解像度は72ppi（dpi）が一般的です。高解像度の画像はデータ容量が大きくなるので、解像度を72ppi（dpi）に設定するとさらに画像を軽量化できます。Retinaディスプレイに対応させる画像の解像度も72ppi（dpi）でかまいません。
HTMLで画像を表示する方法
HTMLで画像を表示するにはimg要素を使います。下記では、同じ階層のimagesフォルダに収納されているファイル名がexample.pngの画像を表示します。
<img src="images/example.png" alt="画像の説明">
src属性では表示する画像ファイルを指定します。必須属性です。alt属性では画像の代替テキストを指定します。音声ソフトの読み上げや画像が表示されない場合など、画像の代わりに指定したテキストが表示されます。必須属性ではありませんが、アクセシビリティ向上のために指定することが強く推奨されています。
Retinaディスプレイに対応させるにはさらにsrcset属性を指定します。
通常のディスプレイではsrcset属性で指定した「example.jpg」が表示され、Retinaディスプレイでは「example@2x.jpg」が表示されます。ブラウザがsrcset属性に対応していない場合のみ、src属性で指定した画像が表示されます。
<img src="images/example.jpg" srcset="images/example.jpg 1x, images/example@2x.jpg 2x" alt="画像の説明">
2つ以上の画像を用意し、解像度の低い順（1x, 2x, 3x, ...）に記述します。通常のディスプレイは1x（1倍）、Retinaディスプレイは2x（2倍）です。例えばexample.jpgの画像サイズが640px×360pxなら、example@2x.jpgの画像サイズは1280px×720pxです。
画像のファイル名は任意ですが、末尾に「@2x」をつけて区別するのが一般的です。