ホームページに載せる画像サイズはどのくらいがいいの？ No2
この記事は、上の記事の続きです。
パソコンであれば、画面の小さいノーﾄパソコンであっても、画面の解像度は少なくても 1024 X 768 ピクセルはあるだろうという前提で、ブログやホームページの画像をパソコンでさせる場合には長辺 600～720ピクセルくらいが妥当じゃないかという結論を一旦は出していました。下記の記事に詳細を綴っています。
しかし iPhone、アンドロイド系、どちらのスマホであっても、手に縦長に持ってウェブサイトを表示させる場合、横のピクセル数は 600～720 ピクセルあるものはほとんどありません。横長の 720 X 480 とか 600 X 400 の画像を、リサイズせずに表示できるスマホは無いということです。
一方、iPad であれば、mini であっても ブラウザー解像度は768 ピクセルですから、長辺 720ピクセルの画像を等倍表示させる事ができるはずです。
いろいろな考え方はあるでしょうが、スマホのウェブ表示に関してはなすがままです、好きにしていただくことにしましょう。そもそも、「画像のサイズ（解像度）はいくらがいいの？」を検討する際には、下記の条件が前提でした。しかしながら、スマホさんのお相手をしようとすれば、私の望む下記の条件の一丁目一番地が否定されてしまうのです。
- ブラウザーに勝手にリサイズされるのはイヤだ。
- どうしても縮小表示させるなら50%であれば譲る。
- 横幅はブログ（サイト）のデザインにぴったりとあわせたい。
- スクエアフォーマットや縦長フォーマットなどはセンタリングして表示をさせたい。
- 長辺、短辺ともピクセル数は8の倍数であって欲しい。
なぜ「ブラウザーに勝手にリサイズされるのかイヤ」なのかというと、せっかく自分で編集した画像を、勝手に弄り回されて外に出されたくないというこだわりからです。
自分で撮影した画像は一枚一枚 Photoshop で編集しています。コンデジは Jpeg 撮影ですが、一眼で撮影した画像は一枚一枚 RAW から現像しています。その上で、どちらも Photoshop に送って 16bit 展開し、レベル調整とトーンカーブその他で調整し、リサイズしたあとに施すアンシャープネスマスクは画像を見ながら極力ナチュラルに見えるように数値を調整し、極力圧縮率 75% 以上で生成した愛すべき Jpeg です。見た目はたいして変わらなくても、携帯で撮影したポン出し Jpeg とは訳が違います。それを、下手くそなリサイズロジックで勝手に弄繰り回されるのは気分が悪い、という思いによるものです。
しかし、スマホの威力は私の些細な思いなど木っ端微塵に吹き飛ばしてしまうほどのものでした。であればもうどうでもいいです、勝手にやりたい放題やっていただきましょう。文字は読めればいい、画像は見えたらいい、その主義に従いましょう。
せめてもの抵抗として、
ブラウザ解像度 768ピクセルの iPad 以上の画面であれば、何とかリサイズされずに100% の表示をしてもらえるような設計にしたい、ということで手を打つことにしました。
- htmlファイルと画像を、ＰＣ用とタブレット用とスマホ用と、それぞれ用意する。
- htmlファイルはひとつで、表示デバイスに寄って php等のスクリプトで動的にhtmlを編集して表示する。
- htmlファイルと画像はひとつ、cssを複数用意しておいて、表示デバイスによってcssで表示分けをする。
- 時間の無駄なのでとっとと諦めて、はてなブログ一本で運用する
かくかくしかじかで、上の対策案のうちから３番目を採用しました。ウェブ表示解像度が７２０ピクセル以上であればリサイズなしで表示、７２０ピクセル未満ならお任せ、ということにしました。具体的にはＣＳＳをふたつ用意して、画像表示と文字サイズは別扱いということにしました。
そう思ってしまうと、もう少々どうでもよくなりましてね、画像の長辺は600でも720でもいいじゃないかいう気になりました。作りかけているホームページの画像は、基本的には 720 X 480 の予定ですが、移行の都合上 600 X 400 のままの暫定ページも混在しています。
720 X 480のページ： 岡山県 観音寺山｜吉備の国放浪記
600 X 400のページ： 鳥取県 伯耆大山｜吉備の国放浪記
また写真帳のページは 1440 X 960 の拡大画像も用意しています。
一般的でないアスペクト比の画像（マップとか案内板など）は、極力単独表示という形で対応しようという方針で進めていくことにしました。
スマホ表示を意識して掲載する画像の解像度はどのくらいが適当かということについて、自分でもいくらかネットを漁って調べてみました。いろいろご意見はあるようでしたが、概ね「長辺 1000ピクセルあれば大丈夫じゃないだろうか」、という論調でした。このはてなブログの画像も、長辺1024ピクセルだったと思います。
察するところ、これだけあればスマホ側で勝手にリサイズされてもそれなりに表示できるだろうということなんだろうと思います。しかしそれだと、タブレットやパソコンで見たときには保証の限りではありません。
いろいろな考え方はあるでしょうが、私としてはタブレット以上（長辺解像度768ピクセル以上）のモニターで見た時にベストパフォーマンスが発揮できればよしとします。スマホのほうは Google のモバイルフレンドリーテストに合格する程度の対応でいいや、スマホ側で好きにやってもらおうと割り切ることしました。
