Webサイトに最適な画像って？｜株式会社OS工芸社ブログサイト

Webサイトにとって、画像は大切な要素の一つです。しかし、いざ画像をつくろうと思っても「適切な画像が分からない」という方や、印刷用の画像をそのままWebサイトにアップしたら表示に時間がかかり困ってしまったという方もいるのではないでしょうか。

そこで今回の記事では、Webサイトにおける適切な画像について「解像度（サイズ）」と「データ容量」の観点から解説します。

解像度とは

解像度とは、画像や映像データの鮮明さを示す指標です。しかし、「印刷における解像度」と「Webサイトにおける解像度」は違う意味を持っているため、それぞれについて解説していきます。

印刷における解像度（画像解像度）

画像や写真、映像のデータを構成する「密度」のことで、「dpi」や「ppi」という単位が使用されています。1インチに含まれるドット（ピクセル）の数が多いほど、画像解像度は高くなります。

より詳しい内容については、以下の記事をご確認ください。

印刷に最適な画像って？　～解像度やサイズについて解説～: 印刷物の制作に大切な「画像データ」「解像度」、印刷物の種類に合わせた最適な解像度やサイズについて解説します。

Webサイトにおける解像度（画面解像度）

Webサイトにおける解像度は、前述した「画像解像度」ではなく、「ディスプレイの中にどれだけのピクセルがあるか」で決定されます。そのため、「画像解像度」をどんな数値に設定してもディスプレイに表示される画像の画質には影響しません。

この、ディスプレイ内のピクセル数（画面解像度）は「横幅のピクセル数（px）×縦幅のピクセル数（px）」で表され、Webサイト用の画像を作る際の目安になります。また、画像編集ソフト等では、画像のサイズとして設定する項目に該当するため、「画像サイズ」とも呼ばれます。

ピクセルとは

PCやスマートフォンなどのディスプレイは、小さな点が集まって画像や映像を表示しています。この小さな点（デジタル画像を構成する最小単位）のことを「ピクセル」といいます。「pixel」や「px」と記され、「画素」とも呼ばれています。
ピクセルに決まった物理サイズはなく、ディスプレイサイズ（インチ数）と画面解像度によってその大きさが変わります。

Webサイトに適した画像サイズ（画面解像度）

Webサイトに掲載する画像は、画像の使用目的に応じて画像サイズを使い分けることが重要です。例えば、トップページのメインビジュアルであれば、1920 px×1080 px程度が適切となります。しかし、サムネイル画像^※であれば、数百ピクセル程度でも問題ないことも多くあります。

WebサイトやSNS、動画サイトなどのコンテンツ一覧で表示される、画像の内容を確認用の親指の爪（サムネイル）のように小さい画像

画像サイズの例

トップページのメインビジュアル画像：1440～2560 px×810～1440 px
サムネイル画像、アイキャッチ画像：360～720 px×240～480 px
製品画像、フォトギャラリー：900～1440 px×600～960 px

画像解像度の設定について

「Webサイトにおける解像度（画面解像度）」にて前述した通り、Web上では画像解像度の設定は、ディスプレイに表示される画像の画質には影響しません。Webサイトのみで使用する場合は、画像編集ソフトのデフォルト設定として一般的に使用されている「72 ppi（dpi）」のまま作成して問題ありません。

ただし、Webサイトから印刷を行う場合、画像解像度の設定が適用されるため、72 ppi（dpi）では画像解像度が不足することがあります。高画質での印刷が必要な場合は300 dpi等に設定することが必要です。

高解像度ディスプレイの存在

4Kディスプレイ（3840 px × 2160 px）やRetinaディスプレイ^※1等、高解像度なディスプレイも多く存在しています。

これらのディスプレイに対応したい場合は、ただ、画面解像度（例：4Kなら3840 px×2160 px）に合わせるのではなく、OS^※2によるスケーリング（拡大表示）も考慮する必要があります。例えば、4Kディスプレイでは150%のスケールが適用されており、実質的な見た目は2560 px×1440 px相当です。そのため、Webサイトのデザインや画像サイズの調整が必要です。

Apple社のMacやiPhone等に採用されている高精細ディスプレイで、一般的に220～300 ppi以上のピクセル密度を持つ
Operating Systemの略称。「基本ソフトウェア」とも呼ばれる、PC操作やアプリケーションの使用に必要なソフトウェア

Webサイトにおけるデータ容量

Webサイト掲載に適切な解像度（サイズ）の画像が分かったところで、次に「データ容量」について解説します。

Webサイト1ページの推奨データ容量

Webサイトのデータ容量が大きいと、Webサーバーへの負荷が増すだけでなく、通信環境によってはページの表示速度が遅くなる可能性があります。表示速度が遅くなると、ユーザーのサイト離脱率の上昇にもつながるため、データ容量を最適化することが重要です。

Googleの推奨基準^※によると、1ページあたりの容量は1.6 MB以内が望ましいとされています。

Avoid enormous network payloads

大きいサイズの画像はNG？

画像サイズが大きくなると、データ容量も増加するため、必要以上に大きな画像を使用することはおすすめできません。例えば、パンフレットなどの印刷物に使用する画像は、Webサイト掲載用の画像よりも高画素な場合もあり、データ容量も大きいことが多いため、圧縮せずにそのまま転用してしまうと、ページの読み込み速度が遅くなり、サーバーの負荷が増す可能性があります。

Webサイトの表示速度を保つためには、必要以上に大きな画像の使用を避け、適切に圧縮することが大切です。

Webサイトの特徴に合った画像づくりが大切

とはいえ、スマートフォンユーザーの約半数が、高解像度のRetinaディスプレイが採用されているiPhone利用者である^※ことを考えると、高解像度ディスプレイへの対応の必要性は、今後さらに高まっていくと考えられます。

また、メーカーのECサイトなど、製品を魅力的に見せることが最も重要なWebサイトでは、表示速度がどれだけ速くても製品画像が粗ければユーザーに良い印象を与えられません。
単に画像サイズを抑えることを優先するのではなく、Webサイトの特徴を踏まえたうえで、適切なファイル形式の選択や圧縮作業を行いながら、画質と表示速度の両立を考慮した画像づくりをしていくことが大切です。

MMD研究所調査データ

OS工芸社のできること

OS工芸社では、Webサイトに掲載する画像について知識があまりなく不安な方や、高解像度ディスプレイへの対応をどうするか迷っている方に対しても、親身になってアドバイス・ご提案を行っています。

また、Web掲載用の画像があまりなくて困っているといった場合にも、お客様の希望とWebサイトの内容に沿って以下のような提案・対応が可能ですので、安心してご相談ください。

撮影
ストックフォト等の適切な画像の選定・提案、代理購入
CG画像制作
イラスト制作

今回の記事のまとめ

Webサイトにおける表示の解像度は「ディスプレイの画面解像度（横×縦のピクセル数）」で決まる
Webサイトに掲載する画像は、表示場所や用途に応じて適切なサイズを使い分けることが大切
高解像度ディスプレイに対応する場合は、より鮮明な画像が必要（表示サイズの2倍のピクセル数が目安）
画像が大きいとデータ容量も大きくなり、Webサイトの表示速度が遅くなる恐れがあるので、適切に圧縮する必要がある
Webサイトの特徴を踏まえて、画質と表示速度のバランスが取れた画像づくりが大切

Webサイトにおいて画像は、ユーザーのサイト評価に大きく関わる重要な要素です。画面解像度などの基礎知識とWebサイトの特徴の両方をしっかり理解し、「自社サイトにとっての最適な画像」を目指しましょう。
OS工芸社では、Webサイトの制作において、これまでの豊富な制作実績をもとに、お客様の希望に沿った企画提案から制作やコーディング、納品後のアフターフォローまで一貫して対応が可能です。ぜひ、お気軽にご相談ください。

Webサイトの制作をお考えの方はお気軽にご相談ください。

貴社の戦略パートナーとして、企画から制作までワンストップでサポートします。