BiNDでサイトを作成する時の画像サイズの目安

パソコン、タブレット、スマートフォン、時にはテレビ画面など、近年のWebサイト閲覧の手段は多様になり、最近は高解像度の機種も一般的になりました。

スマホ時代に最適な画像のサイズや新常識

上記の記事にもある通り、解像度の高い機種ではWebサイトの画像も大きなサイズで作成する必要があります。ただ、全ての機種に考慮したサイズを準備するのは大変ですし、どのサイズで作ればよいか迷うことも多いので、実際に制作する上での画像サイズの落としどころを探ってみたいと思います。

画面解像度の違いによる画像の見え方の違い

画像を大きいサイズで作る理由について、実際の見え方で確認してみましょう。
例えばiPhone8ではデバイスピクセル（画面の実際の解像度）2pxに対して、CSSピクセル（Webページなどを表示するためのサイズ）は1pxになります。
この２つの数値の比率はデバイスピクセル比と呼ばれ、Webサイトではその比率以下のサイズの画像ではにじんだように見えたり画質が粗くなったように見えてしまいます。

仮にサイト内に画像を220pxで表示するとします。220pxのままで作成した画像と、デバイスピクセル比に合わせて2倍の440pxで作成した画像をiPhoneで表示すると以下のような感じになります。

この場合、左側は440pxの画面に対して220pxの画像を表示している状態になるため、解像度が足りずにディテールや色の境目などがぼやけて見えてしまいます。プロダクトの写真、文字を入れた画像、くっきりした塗りのイラストなどでは特に粗さが目立ちます。
風景写真は他と比べると粗さが目立ちにくいですが、きれいにはっきり見せたい時はデバイスピクセル比に合わせた画像が必要になります。

近年はスマホやタブレットだけでなく、デスクトップやノートパソコンでも高解像度のディスプレイが出ており、Webサイトをきれいに表示するためにも画像を大きいサイズで作成することは必須と言えるでしょう。

さらに高解像度の機種を考慮する

上記は2倍の画像が必要になるケースでしたが、最近ではもっと高解像度の機種も増えてきました。全ての機種に厳密に対応しようと思うと3倍、4倍、5倍……とどんどん大きな画像が必要になってきますが、画像サイズが大きくなればなるほど容量も増えてしまうためページの読み込みにも影響が出てしまいます。

実際にどの程度のサイズであれば許容範囲となるか、iPhone 7 PlusとNexus 6Pで比較してみました。
いずれもデバイスピクセル比が3以上の機種ですので、画像も本来であれば3倍のサイズにする必要があります。

写真では少し分かりにくいのですが、ディスプレイの解像度が高いほど画面の密度も高くなるため2倍の画像でもそこまで粗くならずに表示されています。やや気になる点として、2倍だと文字の輪郭などがややぼやけ気味で、デバイスピクセル比により近い3倍の画像の方がやはりきれいにくっきり表示されます。

参考までにいくつかの機種のデバイスピクセル比です。タブレットなども含めると多岐に渡るので、国内でシェア率の高いiPhoneと一部のAndroidスマホのみピックアップしています。
Google アナリティクスを導入していれば実際に自分のサイトがどのような機種で閲覧されているか解析できますので、参考にするとよいでしょう。

※iOSとAndroidではピクセル解像度の算出の仕方は異なります。Androidではdp（density-independent pixels）と呼ばれる独自の単位を使用しますが、比率の目安は上記のようになります。

他にもデバイスピクセル比が4以上の機種も増えています。ですが、見た目と容量のバランスを考慮し、画像サイズは2〜3倍程度に抑えた方がよさそうです。

Webサイトを作成する時のページの幅

画像を少なくとも２倍以上で作成する必要があることは分かりました。
画像サイズを考慮する上で、Webサイトがどのくらいの幅で表示されるかも重要なポイントです。

Webサイトを作成する時の横幅は、PC向けの表示では最大幅1000px前後が主流となっています。
参考までにStatCounterが公開しているデータでデスクトップでの解像度のシェアを確認してみます。

1000px程度であれば、主流のディスプレイでの表示をカバーできますね。もちろんサイトの内容や構成によって必要な幅は異なってきますが、迷った時はこのくらいの値を参考にしてみてください。
なお、BiNDでサイトをブランクで作成した時の初期設定値は960pxです。今回はこの値を基準に画像サイズを検討します。

また、レスポンシブサイトでは一定の幅（ブレイクポイント）を基準にサイトのレイアウト表示が切り替わります。
BiNDで作成するレスポンシブサイトのブレイクポイントは640pxです。ウィンドウ幅が641px以上の時はPC向けのレイアウト表示になり、640px以下になるとスマホ向けのレイアウト表示になります。
便宜上PCサイトやスマホサイトと呼んでいますが、あくまでもブラウザの表示幅が切り替えの基準になるため、モバイル端末でも画面の幅が広ければPC向けの表示に切り替わります。

例えばiPhone8 Plusで見た場合、縦向きはスマホ向けの表示、横向きはPC向けの表示になります。

今回は、最大幅の960px、またはブレイクポイントの640pxを画像サイズを考える時の基準にします。

コンテンツに使用する画像サイズの目安

上記を踏まえて、実際にコンテンツに合わせた画像サイズを考えてみます。
サンプルとして下記のようなページを準備しました。用途ごとに画像サイズを確認していきます。

ロゴ画像

ロゴ画像を幅180pxで表示します。ここは高解像度になってもくっきりと表示したい要素なので、3倍サイズの540pxで作成しています。シンプルな画像であれば容量もそこまで重くならず、3倍でも10KB程度でした。

全面背景画像

背景画像をストレッチで表示する場合です。
RetinaディスプレイのiMac（解像度5120×2880）や先にあげたiPhone 7 PlusとNexus 6Pなどで表示確認しましたが、2000px以上あれば表示には耐えられる印象でした。ファイル容量を考慮しながら2000px〜3000px程度で作成するとよいでしょう。
※背景をストレッチで設定する場合のみです。BiNDでは背景として使用する画像サイズを厳密に設定することはできないため、実寸で表示する画像は2倍にしたりせずに実寸で作成しましょう。例えば、200pxで表示する背景画像はそのまま200pxで作成します。

テキストを使用した画像（ビルボード部分）

テキストを使用した画像ですが、このケースでは文字サイズが大きいため多少輪郭がぼやけてもそこまで気にならないので2倍で作成しています。バナーなど比較的小さい文字が多い場合は3倍ぐらいにしてもよいでしょう。

コンテンツ（1）

PCでもスマホでもコンテンツ幅いっぱいに表示したい画像です。960pxがコンテンツの最大幅になるため、画像は2倍の1920pxで作成します。

コンテンツ（2）

PCでは3段、スマホでは1段ずつ表示するコンテンツです。余白を考慮すると複雑になってしまうので、簡単にPCは３分割、スマホは１分割として考えてみましょう。
3段の時は最大でも320px程度ですが、1段になると画像は最大で640pxになります。640pxの2倍にあたる1280pxで作成します。

コンテンツ（3）

上記と同じ構成です。ただし、色の境界がはっきりしたイラストなので3倍のサイズで作成したいところですが、容量を抑えたいので、ここは少し妥協して2倍の1280pxで作成します。

BiNDでサイズの大きい画像を配置する

ブロックやカラム幅いっぱいに表示する時は、画像が自動的に表示する範囲に合わせて縮小されます。

実際に表示したいサイズが、配置した範囲よりも小さい場合はサイズを別途指定する必要があります。

2倍または3倍サイズで作成した画像をブロックに配置すると、そのままではカラムいっぱいに表示されてしまいます。

表示するサイズを変更するには、画像パーツを選択し出力サイズの「自動調整する」チェックを外して、表示したいサイズを指定します。

3倍で作成した画像が1/3サイズで表示されました。

ターゲットに合わせてサイズを考慮

今回案内したサイズはあくまでも平均的なWebサイトを想定したものです。

サイトの特性によって閲覧者の環境は異なります。例えば、ターゲットがPCでの閲覧がメインになる場合はスマホは厳密に考慮しなくても大丈夫なケースもあるかもしれません。基本的には作成するサイトの状況に合わせて画像サイズを検討するようにしましょう。

いますぐBiNDを無料で使ってみる