iPhoneに特化してレスポンシブ・イメージを設計する。
tiny-services.comや他のサイトなど、日本語のウェブサイトのアクセス情報を総合すると、多かれ少なかれ、総PVのうち、75%がモバイル、25%がデスクトップで、モバイルのうち、30%強がiPhone 6 / 6s / 7 / 8という状況です。
| 大項目 | 大項目割合 | 小項目 | 小項目割合 | 全体における割合 |
|---|---|---|---|---|
| モバイル | 75% | iPhone 6 / 6s / 7 / 8 | 30% | 25% |
| その他 | 70% | 50% | ||
| デスクトップ | 25% | - | - | 25% |
そこで、iPhone 6/6s/7/8向けに合わせた画面設計を考えます。以下はiPhoneのモデルとピクセル解像度をまとめた表です。
| モデル | ピクセル解像度 |
|---|---|
| iPhone 6 / 6s / 7 / 8 | 1334 x 750 |
| iPhone 6 Plus / 6s Plus / 7 Plus / 8 Plus | 1920 x 1080 |
| iPhone XR / 11 | 1792 x 828 |
| iPhone X / XS / 11 Pro | 2436 x 1125 |
| iPhone XS Max / 11 Pro Max | 2688 x 1242 |
iPhone 6 / 6s / 7 / 8はのピクセル解像度は1334 x 750です。レスポンシブ・イメージを用意する際には、横幅のピクセル幅を元に設計するので、縦に保つ場合には、横幅が750px、横に持つ場合には、横幅が1334pxが基準となります。
tiny-services.comで採用しているspectre.cssやBootstrapなどのCSSフレームワークでは、横幅を12分割するので、それを基準に考えると、以下の表のようになります。
| 横幅 | col-12 (12/12) | col-10 (5/6) | col-8 (8/12) | col-6 (6/12) | col-4 (4/12) | col-3 (3/12) | col-2 (2/12) | col-1 (1/12) |
|---|---|---|---|---|---|---|---|---|
| 縦持ち ピクセル数 | 750 | 625 | 500 | 375 | 250 | 187.5 | 125 | 62.5 |
| 横持ち ピクセル数 | 1334 | 1111.67 | 889.33 | 667 | 444.67 | 333.5 | 222.33 | 111.17 |
tiny-services.comでは、モバイル向けの画像に<col-6>と<col-12>を割り当てています。
そのため、画像の横幅としては、375px、667px、750px、1334pxを用意することになるのですが、750pxの画像があれば667pxに流用できるので、375px、750px、1334pxの3種類を作れば充分ということになります。
これをタグで表現すると、例えば以下のようになります。
画面の横幅が961px以上の場合は画面の横幅の25%、それ以外の場合は画面の横幅の50%を占める。
<img sizes="(min-width: 961px) 25vw, 50vw"
srcset="sample-375x197.png 375w,
sample-750x394.png 750w,
sample-1334x700.png 1334w
"
alt="sample" />
画面の横幅が961px以上の場合は画面の横幅の50%、それ以外の場合は画面の横幅の100%を占める。
<img sizes="(min-width: 961px) 50vw, 100vw"
srcset="sample-375x197.png 375w,
sample-750x394.png 750w,
sample-1334x700.png 1334w
"
alt="sample" />
レスポンシブ・イメージの設計はモバイル向けに画像を提供する際のデータ削減にとても効果的です。 その分、タグが複雑になりますが、がんばって設定して、よりよいユーザ・エクスペリエンスを提供しましょう。
