iPhone 12 Pro に機種変更して1ヶ月が過ぎましたが、カメラがすごいなーと思いながらもあまり撮影楽しむような「お出かけ」してないんですよね。。
スマートフォンの機種はiPhoneだけでなくandroidでも相当数ありますが、振り返ってみればものすごい進化をし続けています。
アトラボでも「その進化」に対して最善のホームページ制作をご提案できるように考えていて、お客様とのそんな会話のなかで気になるポイントがありましたのでご紹介。
ホームページにおける画像の役割
ホームページのデザインにおいて、画像の良し悪しは大きなウェイトを占めていますよね。
1枚の画像が伝えられる情報量はテキストを延々続けてもかなわない、という意味で弊社でもカメラマンによる撮影を推奨したり、有料の画像素材を購入し、コンテンツに適した画像を選定することに多くの時間をかけたりします。
けれどパソコンとスマートフォンの各機種で、ディスプレイの「解像度」が違うために、同じ画像ファイルでも表示が異なるってご存知ですか？
最新のスマートフォンだと、4倍高精細…
例えばiPhoneの場合ですと、通常のパソコンで表示されるよりもiPhone7くらいまではデバイスピクセル比が「2倍」高精細だったりします。
これがiPhone 8から最新のiPhone 12シリーズになると「3倍」になります。
さらにandroidですと、デバイスピクセル比が「4倍」というものもだいぶ増えてきています。
つまり、最新のスマホを使えば使うほど昔作ったホームページに掲載されている画像はが画素数が少ないため1/2、1/3、いや1/4、画像の精細さが劣ってしまうのです。
スマホシェア率がすれば画像ファイルは「2倍」あるいは「3倍」が妥当
ホームページ制作においては、画面サイズの大きさに合わせて表示が切り替わるレスポンシブWEBデザインが業界全体で標準仕様となってきています。
が、5年くらい前にリニューアルされた際の「スマホ対応」だとこの画像ファイルの対応が当時のスマートフォンに合わせているため、スマホの機種を新しくしたタイミングで「画像がぼやける」ということになってしまうようです。
逆に言えば5年前の仕様のスマホ対応をしていると、これから高精細なスマートフォンがシェアを伸ばしていくのですから、リニューアルしたばかりなのに！？という話になりかねません。
現状のシェアからしますと2倍は必須、3倍にしたほうがいいかも、というところでしょうね。
まとめ：ブラウザの対応範囲や通信速度との兼ね合いもあります
ただ画像多めのサイトで、デバイスピクセル比4倍、5倍とあげてしまうと、通信速度が追いつかず「もっさり」した動作になる可能性が高いです。
また高精細だけどデータ量は軽い画像ファイルのデータ形式もたくさんあるのですが、シェアの高いブラウザに限って対応していなかったりするので、このあたりの切替は慎重にする必要がありますね。
もし、ホームページをリニューアルしたばかりだけど、スマホだと、画像が粗い・ぼやける…という方はお気軽にアトラボへご相談くださいませ〜
