iPhone Xや最新のAndroidなど、超高精密度の液晶ディスプレイを搭載したデバイスが続々登場しています。いまや、常に手元に置けるスマホが、Webサイトを閲覧するもっとも身近な端末です。サイズやデータの持たせ方など、スマホで扱う画像にはどのようなトレンドがあるかを調べてみました。この機会にぜひ旧来の常識からアップデートしてください。
目次
1.スマホ画面の解像度はPCより大きく高精細に
2.ページ表示を軽くするために画像でやるべきこと
3.JPEGだけではない、Web画像で使われる形式
1.スマホの画面解像度はPCより大きく高精細に
iPhoneのディスプレイ「Retina」や「Retina X」、サムスンの「Super AMOLED」といった名前を聞いたことがある人は多いと思います。どちらも高精細液晶ディスプレイにつけたニックネームですが、滑らかで美しい表示のディスプレイは、目に優しいことが実感できますよね。液晶の粒子が見えるようなモノクロディスプレイで携帯メールを送信していた筆者のような世代にとっては、隔世の感があります（笑）。
このような高精密度ディスプレイは、従来のPCのディスプレイの2倍程度の密度でピクセルが表示されます。模式図にすると、次のようなイメージです。
解像度の違いの模式図
現在、オフィスなどで使われているノートパソコンのディスプレイ解像度は、フルHD（1980×1080ピクセル）〜WQHD（2560×1440ピクセル）程度が一般的です。13インチノートパソコンではこれ以下の場合も珍しくありません。
ところが、iPhone 6 Plus以降はフルHDに対応しており、現在ではさらに上のクワッドHD（2560×1440ピクセル）や4K（3840×2160）ピクセルのスマホも出ています。小さな手のひらサイズにパソコンの画面以上の画面解像度をぎゅっと圧縮して閲覧しているわけです。
上の図では、スマホディスプレイの表現の細かさは2倍で説明しましたが、iPhone Xは3倍で458ppiの細かさ（ppiは1インチの中に入るピクセル粒の数を表します。数字が大きいほど密度が細かいことが分かります）、SONYの「XZ Premium」のように4Kを実現しているディスプレイでは、801ppiという細かさになるのだとか。ここまで来るともはや「肉眼で違いがわかるかな」という世界に入ってきているのかもしれません。
ページ表示を軽くするために画像でやるべきこと
以前は、モバイル向けの画像は「小さく軽く」、PC向けの画像は「大きめ」というのが一般的な考え方でした。不安定な通信網を使うこともあるモバイルでは「表示を軽く」すべきなのは今でも変わりませんが、決してただ「小さく」すればいいわけではなくなってきました。上記の理由で物理的なスマホサイズに合わせて画像を小さくしてしまうと画像が粗くぼやけて見えてしまうからです。
左は画像の解像度が足りている場合、右は足りていない場合の例
スマホ画像作成時の基準サイズはどう決める？
スマホ画面の高解像度化に対応すべきとは言え、すべてのスマホに最適化したページを作ることはとてもできません。どこまでをターゲットにするか考えるなら、ひと世代前くらいのスマホサイズをカバーするのが一つの目安となるでしょう。
たとえば2018年現在であれば1980×1080ピクセルか、それよりひとまわり小さい1200×750ピクセルくらいを目安してはどうでしょうか？ スマホサイトは縦方向に持ったときの幅を基準にするので、スマホ用のWeb画像は幅750ピクセルか、1000ピクセルで使うことを前提に加工しましょう。
▼スマホ時代の画像サイズについては、詳しく別記事でご紹介しています。
BiNDでサイトを作成する時の画像サイズの目安
大きすぎる画像をそのまま使うのを避ける
大きい画像であるほどいいかと言えば、ページが重くなるのでもちろんNGです。気軽に撮影できるデジカメやスマホの写真でも、幅4000ピクセルとか8000ピクセルなど余裕であります。そのままWebデザインに使ってもレイアウト上は縮小されるので気にならなくても、読み込みに何倍も通信量を食ってしまいます。なかなか表示されないページにイライラして閉じられてしまうことはもちろん、Googleの評価も下がりSEOにも悪影響を及ぼしかねません。
画像でなくても表現できる部分は画像化しない
以前から言われていますが、写真やイラストといった画像でなければならない箇所以外、特にボタンや文字の見出しなどを画像で加工するのは避けましょう。表示がボケる、重くなるリスクがある以外にアクセシビリティの面からも使いづらいサイトになるからです。デザイン装飾は、画像の代わりにCSSなどを使って表現しましょう。BiNDでいえば、ボタンパーツは積極的にテキストリンク機能を使いましょう。
ボタンをテキストリンクで表現。画像化しないことで更新や修正も簡単になる。
3.JPEGだけではない、Web画像で使われる形式
Web用の画像形式といえば、写真などを美しいまま小容量に圧縮できるJPEGが定番ですが、ほかにも使われる画像形式が出てきましたので確認しましょう。
Googleが開発したWebP
Googleが開発したオープンソースの画像形式でウェッピーなどと呼ばれます。Googleのサイトではよく使われています。JPEGより圧縮率が高いだけでなく、アルファチャンネルが扱えるので透明画像が作れる、アニメーションが作れるというメリットがあります。
古い画像編集ソフトで開くことができない・作成できないというデメリットがありますが、オンラインの無料のサービスなどが公開されているので、個別に変換することもできます。
文字情報も含めるSVG
SVG画像はファイルサイズはごく小さくすみ、Adobe Illustratorで描画できるベクターデータと同じく、拡大・縮小をしても画像が粗くなることがありません。SVGはほとんどのブラウザで表示でき、Adobe Illustratorで作成したイラストや図も、形式を選んで書き出しができます。またオンラインのソフト「Vector Magic」のようなものを使い変換することもできます。
いまひとつ普及が進んでいないのは、CSSでできる表現も多く、あえてSVGにしなくてもなんとかなるという判断からかもしれません。画像でなければならないが文字を含む図版（家系図や組織図のような複雑なもの）はSVGを使うことはSEO面でも効果が期待できると思います。
※これらの画像形式は現在BiNDでは画像パーツとして読み込めません。HTMLタグとして挿入する方法で対応可能です。
＞設定方法は「BiNDでSVG形式の画像を使う方法」を読む
BiNDupなら画像データをWebPに自動変換
いかがでしたか? Web制作の技術は日進月歩ですし、レスポンシブウェブに対応するためWeb画像の扱いもだいぶ変化しています。本業と並行して自社のホームページを管理している場合などは、知識のアップデートをするのも一苦労しますよね。
そんな方にはBiNDupはおすすめです。レスポンシブサイト対応なので「どの画像幅か」と悩むことなくBiND側で画像サイズを自動調整します。また、BiNDupの画像編集ツール「SiGN」で高度な編集機能もでき、画像加工ソフトの購入も必要なし！
さらに、BiNDupでは作成されたサイトの画像を自動的にWebP形式に書き出して対応ブラウザで表示するため、個別に変換ツールを利用することなく画像の表示速度の高速化が図れます。
ぜひ、お試しください。
POINT
- スマホ用の画像は「PC画像より小さく」ではなく、むしろ2倍のサイズを用意
- モバイルでは特にページ表示の軽さを意識。画像はキレイに高圧縮を目指す
- ディスプレイ解像度に影響しないSVGなどの画像形式にも注目