レスポンシブ編 08 / 10 実践 約5分
スマホでの画像｜比率と表示速度
横長の画像がスマホで小さくなる、メインビジュアルが縦長すぎるといった問題への対処を解説します。回線速度への配慮も扱います。
この教材で学べること
- 画面幅が変わると画像の見え方がどう変わるか
- スマホでは比率を変えたほうがよい場面
- モバイル回線を前提にした容量の考え方
画像は、幅が変われば見え方が変わります。PCで映えていた横長の写真は、スマホでは高さが極端に低くなり、何の写真か分からなくなります。
比率はスマホ用に変える
| 画像の役割 | PC | スマホ |
|---|---|---|
| メインビジュアル | 横長（16:9など） | 縦長寄り、または高さを画面比で指定 |
| 記事のアイキャッチ | 16:9 | 16:9のままでよい |
| 人物写真 | 3:4 | 1:1に寄せると顔が見やすい |
| 実績のスクリーンショット | 横長 | 横長のまま。タップで拡大できると良い |
切れる位置をスマホ用に見直す
比率を変えると、切り取られる範囲も変わります。PCでは写っていた人物が、スマホでは画面外ということが起きます。比率を変えた幅ごとに、切り取り位置を必ず確認してください。
回線を前提にする
スマホは、必ずしも高速な回線で見られているとは限りません。外出先の電波が弱い場所で開かれる前提を持ってください。重い画像は、そのまま離脱につながります。
| 対策 | 効果 | 手間 |
|---|---|---|
| 書き出し時に幅を必要十分まで下げる | 大きい | 小 |
| 写真の枚数そのものを減らす | 大きい | 小 |
| 画面外の画像を遅れて読み込む設定にする | 中 | 小 |
| 装飾用の画像を図形や色で置き換える | 中 | 中 |
確認のしかた：スマホの通信を4Gに落とすか、機内モードのオンオフ直後など回線が不安定な状態で開いてみてください。高速回線でしか確認していないと、遅さに気づけません。
次はスマホのナビゲーションです。