スマホサイトの画像は@3xで用意すべきなのか
今回はこれに関連して「スマホサイトの画像解像度」について気になったことをまとめておきたいと思います。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
スマホサイト用の画像に@3x画像は必要か？
2010年6月に登場したiPhone 4以降「Retinaディスプレイ」と呼ばれる高精細のディスプレイが普及しました。
それに合わせて画像のサイズをデバイスの解像度に合わせ、PCサイト向けの画像の2倍で画像を書き出して、画像をぼけることなくはっきりと表示させておりました。
近年では画面の解像度が更に向上し、フルHDやWQHDの解像度のディスプレイを搭載したスマートフォンなどが主流になってきております。パソコンのディスプレイ並の解像度をスマートフォンのサイズに凝縮しているので、その他のデバイスを圧倒するほど高精細に表示することが出来ます。
しかし、いくらハードの解像度が上がっても、提供されているコンテンツの解像度がそれに伴って向上してくれなければ意味がありません。
画像をデバイスに合わせて引き伸ばすことでどの機種でも同じレイアウトで表示できますが、これだと解像度が低いデバイスで閲覧したほうが綺麗に表示されるので、折角の高解像度のディスプレイが勿体無いです。
高精細な画像と通信量の妥協点
スマホサイトの場合、PCに比べて通信速度が遅いことが多いので出来るだけページを軽くしようとしますよね。
仮に@3xの画像を用意したとして、高精細な画像の恩恵を受けられる機種がどの程度居るのかも分かりません。
比較的新しい機種だとLTEでページ読み込みが早い機種も存在しますが、中には速度規制中だったりMVNOの低速回線を使用していたり、3G回線を使用している方も沢山います。
正直なところ、一部の端末のためだけにこれ以上ページを重くしたくないと思います。
まだまだiPhone5s以前のユーザーも沢山居るのと、実際にフルHDディスプレイで@2xの画像を表示しても「そこまで荒くないんじゃね？」と感じたからです。
アイコンフォントやSVGなどのベクターデータを使用する
これからもiPhone6 Plusが普及していくにつれて、@3xが主流になっていくだろうなと感じてきています。
自分は高解像度ディスプレイの対応として「アイコンフォント」や「SVG」をオススメしています。
この2つは画面解像度に依存しないので、どれだけ拡大しても画像が劣化することがなく、どのデバイスでも綺麗に表示させます。
このサイトもヘッダーのメニューや、SNSのシェアボタンに付いているアイコンなどにアイコンフォントを使用しています。
このように解像度に依存しないデータを使用したり、解像度に合わせてスクリプトなどで画像を振り分けていくことで、どのデバイスでも快適に閲覧できるウェブサイトが設計できます。
まとめ
ウェブサイトの@3x対応はちょっとまだ早いかなと思います。通信が重くて離脱するユーザーを考えるとなかなか踏み切れないです。
アプリのUIは対応していないと、らくらくホンのように画面を引き伸ばして情報量が同じなんてことになってしまうので積極的に早急に対応しておくべきだと思います。
みなさんはどのように対応しているのでしょうか。
