ホームページに載せる画像サイズはどのくらいがいいの？ No1
下のリンクは、昨年エントリーして多くの方にアクセスいただいている記事です。
記事のタイトルには「画像サイズ」と表記していますが、正しくは「画像解像度＝画素数」です。サイズとは通常は容量のことであって単位は MB（メガバイト）です。単純に「解像度」といえば、単位あたりの点の数で、単位は dpi、ppi あたりになります。わかっちゃいますが、あえて「サイズ」と書いています。正しくは「画像の画素数」のことです。
以下「「画像の画素数」を「解像度」と称します。
上の記事は対象をブログとしておりまして、必ずしも自分で設計できる「ホームページ」でも当てはまるというものではありません。
ブログでしたら、どんな解像度の画像を載せていても、勝手に、無断で、強制的に、適当にリサイズした画像をスマホ用のフォームで表示してくれますので、読者の立場では見た目上はストレスなくアクセスする事ができます。しかしホームページであれば、スマホ対策を全部自分でやらなくちゃいけません、あの小さなスマホの画面に、文字が読めるように、なおかつ可能な限り美しい画像を表示させるには一体どうすればいいのでしょうか。
読者の環境がパソコンだけであれば、表示する画面の最低解像度は1024 X 768 程度を想定していればよいと思いますが、今のご時勢スマホでの閲覧を意識しないといけないということになっていて、１０年前とは事情はかなり違ってきています。
対策としては、下の記事で少し触れましたが、概ねこんなところでしょう。
１．htmlファイルと画像を、ＰＣ用とタブレット用とスマホ用と、それぞれ用意する。
２．htmlファイルはひとつで、表示デバイスに寄って php等のスクリプトで動的にhtmlを編集して表示する。
３．htmlファイルと画像はひとつ、cssを複数用意しておいて、表示デバイスによってcssで表示分けをする。
４．時間の無駄なのでとっとと諦めて、はてなブログ一本で運用する
しかしその前に十分理解しておかなくてはならないことがあります。それは、「スマホの画面の解像度ってどうなっているのでしょうか？」ということです。私の使っている iPhone5S の解像度は、640 ✕ 1136 と公表されています。確かにスクリーンショット（ハードコピー）はその解像度で出力してくれますが、そのサイズの画像をウェブブラウザにリサイズさせないで表示させようとすると、画面からはみ出してしまいます。いったいどうなっているのでしょうか？
少しだけですがお勉強しましたところ、はっきり言って機種別にバラッバラ、一貫性なしと理解いたしました。みんな身勝手なんだからぁ～。
例えば iPhone を例にとるとこんな感じです。
The Ultimate Guide To iPhone Resolutions
どうでしょうか、さっぱりわからんというのが正直なところではないでしょうか。
多少の誤解は恐れず平たく表現すると、解像度という言葉の意味するところはふたつあって、下記のように表現することができそうです。
１．ハードが本来有する「性能」としての解像度 ⇒ デバイス解像度
２．ブラウザーがウェブサイトを表示させるときの解像度 ⇒ ブラウザ解像度
よくよく考えりゃパソコンのモニターだって、Windows を例にとればハードの持つ解像度とは別に、「画面のプロパティー ⇒ 設定 ⇒ 画面の解像度」でユーザーの都合で解像度の変更したことはありませんか。あれと同じようなものだと思えば、納得できたような気になってきました。
画面表示の解像度をユーザーの都合で変更するのではなく、スマホのほうが勝手に決めちゃっているということです。じゃ、具体的にはどうなっているのでしょうか？
結論としては、上の Apple のサイトから一部抜粋してまとめるとこんな感じになります。
| iPhone | デバイス解像度 | ブラウザ解像度 |
|---|---|---|
| ６，６Ｓ，７ Plus | 1080 ✕ 1920 | 414 ✕ 736 |
| ６，６Ｓ，７ | 750 ✕ 1334 | 375 ✕ 667 |
| ５，５Ｓ | 640 ✕ 1136 | 320 ✕ 568 |
| ４，４Ｓ | 640 ✕ 960 | 320 ✕ 480 |
| ３Ｇ，３ＧＳ | 320 ✕ 480 | 320 ✕ 480 |
| iPad Air、iPad 3 | 768 ✕ 1024 | 1536 ✕ 2048 |
| iPad 、iPad mini | 768 ✕ 1024 | 768 ✕ 1024 |
※ ブラウザ解像度 ＝ ブラウザ表示解像度 ＝ ブラウザピクセル ＝ CSSピクセル
デバイス解像度っていうのが、一般にスペックとして公表されている解像度です。それに対してブラウザ解像度って言うのは、ウェブ表示する時の解像度です。概ね一辺が１／２、面積にして１／４になるようです。アンドロイド系の機種も、だいたいそんな感じみたいです。
文字だけではわかりにくいので、直感に訴えるためのページを用意しました。
このページの画像は、表示デバイスがスマホであろうとパソコンであろうと関係なく、黄色の画像が本来持っている解像度を勝手にリサイズされないように表示させているものです。２本指のピンチ操作で拡大縮小させては意味がありませんので、やっちゃたらリロードさせて下さい。
私が使っている iPhone5S のブラウザー表示は上の表から 320 X 568 ですから、横サイズが300、330ピクセルの黄色い画像が、ほぼ画面フィットで表示されます。納得です。
私としてはこれでスマホの画面の表示特性がある程度体感的に理解する事ができました。ここまで理解できたら次のステップとして、「スマホで閲覧することを前提としたサイトに載せる画像の解像度はいくらにすればいいのだろうか」を、検討することが可能になりました。
No.2 へつづく
