Webサイトの最適な画像サイズ

写真を読み込んだり、加工したりする前に画像の解像度について少し解説したいと思います。 解像度とは「画像の精細さ」のことで、以前は 72 dpi がWebサイト用とされていましたが、高精細ディスプレイの登場によって状況は変わっています。

解像度

最近の Mac では、スクリーンショットを保存すると、上の画像のように 144 dpi となっています。 この画像を解像度の低い 72 dpi のPCで開くと Width: 1200 px × (144 / 72) = 2400 px として2倍の大きさで表示されますが、高精細ディスプレイの Mac ではそのまま 1200 px として表示されます。
つまり、最近の Mac は画面の精細さが2倍であると考えることができます。

一方、Sketch 等のソフトウェアを使って書き出される画像は、一般的に 72 dpi ですので、書き出された画像をそのままウェブサイトに配置して Mac で確認すると、画像が劣化したように見えてしまいます。2倍の精細さを持つディスプレイにとっては、画像のサイズが足らないからです。

以下にサンプルを用意しました。
最近のスマートフォンやPCであれば確認できるかと思います。

等倍で書き出して配置

横300px の画像を width: 300px で表示しています。
全体的にぼやけた表示になっているのが分かるでしょうか。

ビットマップ画像

2倍で書き出して配置

一方、こちらは 横600px で書き出した画像を width: 300px で表示しています。
くっきりとした輪郭になっていると思います。

ビットマップ画像

僅かな差だと感じるかもしれませんが、最終的なWebサイト全体の印象が大きく変わってきますので、意識して画像の書き出しを行ってください。Sketch 等のソフトウェアには 2x3x の画像を簡単に書き出す仕組みが用意されています。

最適な画像サイズとは

2020年の Mac Book Pro 16 inch の場合であれば画面解像度が 144 dpi ですので、144 ÷ 72 = 2倍 のサイズで画像を書き出き出すことで最適な表示となります。開発者間のコミュニケーションでは、2倍で書き出された画像のことを 2x(ツーエックス)、3倍で書き出された画像を 3x(スリーエックス)と呼んでいます。

このように最適なサイズは、デバイスの画面解像度に依存していますので、1つの正解というものがありません。 例えば iPhone 11 Pro の横幅は 375 point に対して、実際に敷き詰められているピクセル数は 1125 px です。72 dpi の3倍になりますので、最適な画像サイズは 3x となります。

クオリティとスピード

対象デバイスの画面解像度が高いからといって、すべて 3x で書き出すのが正解かというと、そうでもありません。 3倍のサイズでビットマップ画像を書き出せば、当然ファイル容量は肥大化します。ウェブサイトには複数の画像が配置されることになりますから、意図せずして「ユーザーに数十MBの画像をダウンロードさせていた」という事態に陥ってしまいます(実際によくあります)。

画像のデータ容量が大きければダウンロードに時間がかかり、ウェブサイトの表示スピードが遅くなってしまいますので、適度なバランスを見つけましょう。

3倍の解像度を持つデバイスに 2x の画像を表示して確認してみてください。目標としているクオリティに到達していれば、データ容量は小さければ小さいほど理想的です。もちろん、重要な画像には 3x を配置しても構いません。目的によって使い分けるようにしてください。

また、アイコン等には積極的に .svg 画像を採用することで、データ容量は抑えつつ画像を美しく表示することが可能です。

Udemy Webデザイナー
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級

ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada

¥ 1,400

¥ 24,000

4.3

493件の評価