ブログに載せる画像サイズはどのくらいがいいの？
もうかなり前のことになりますが、下のようなお知らせがきました。ブログに載せる写真サイズと容量が変更になりました。
写真サイズ：長辺800ピクセル ⇒ 長辺1024ピクセル
写真容量：30MB/月 ⇒ 300MB/月 は
はてなさん、どうもありがとう。
だから、ブログに載せる画像サイズはいくらがいいの？
私の場合現在の結論は、３：２のアスペクト比で 600 x 400 ピクセルとしています。
この結論に至るまでには数年の時間を要しましたが、今なお100%満足しているわけではありません。ですが一旦このサイズに落ち着いています。では、ブログに限らず、ネットに載せる画像の解像度というのはどのくらいが適当なのでしょうか。
アスペクト比が３：２の場合は 600 x 400 でいいとしても、他の場合も横幅600ピクセルのままでいいのか、長辺600ピクセルとしたほうがいいのか、考えどころはたくさんあります。私の場合は、面積を同じくらいにしたほうがバランス的に違和感が無いと感じましたので、４：３の場合は 560 x 420、１：１の場合は 480 x 480 を一つの目安にすることにしています。これでだいたい面積が同程度になります。
でも一つの記事に複数の比率の画像が混在しないのならば、１：１ のスクエアフォーマットでも 600 x 600 ピクセルにしてしまう場合もあります。
３：２ 600 x 400 ピクセル
４：３ 560 x 420 ピクセル
１：１ 480 x 480 ピクセル
解像度選定の条件
記事の補足的な意味で掲載される写真と、写真ブログのように見せたいものが写真という場合では異なってくるとは思うのですが、解像度の選定にあたっては下記のようなことを共通した希望としました。
- ブラウザーに勝手にリサイズされるのはイヤだ。
- どうしても縮小表示させるなら50%であれば譲る。
- 横幅はブログ（サイト）のデザインにぴったりとあわせたい。
- スクエアフォーマットや縦長フォーマットなどはセンタリングして表示をさせたい。
- 長辺、短辺ともピクセル数は8の倍数であって欲しい。
記事の補足的に使われる写真は、長辺 600～720ピクセル
はずかしながら 600 x 400 ピクセルに至るまでには結構時間がかかっているのです。
まずパソコンモニターに画像を表示させるにあたって画像サイズはいかなる解像度にリサイズするのが妥当かいうことを考える際、古いといわれて現在ではほとんど意味を成しませんが、640 x 480ピクセルという基本を無視することが出来ません。性分です。
この640 x 480（俗にVGAと称する）というのは４：３の比率でして、ほとんどのコンデジの画像比率と同じです。しかしいわゆる一眼レフの画像のアスペクト比は３：２が基本です。この３：２の比率の画像をどうやって 640 x 480 に適用させるか考えた結果、480 を短辺とし、これの 3/2 となる 720 を長辺とするということで、720 x 480 という画像サイズを考えました。ということで、720 x 480ピクセルを基本にしてデザインしたブログがこれです（試行錯誤をしていたので、画像の解像度は必ずしも一定ではないです）。
ところが、モニターと自分の目の距離（55～60cm）ではちょっと大きくて（視野が狭いのかな）、少し引いて見たくなるのです。ということで試行錯誤して、600 x 400ピクセルというサイズで運用しはじめたのが下のブログです。
こちらのほうが感覚的に見やすいです。解像度が1600 x 1200ピクセルのモニターに表示させても、私にはこちらのほうがバランスがよい印象を受けます。
注）
上の二つのブログの画像は、実際には、それぞれ1440 x 960ピクセル、1200 x 800 ピクセルの画像を、ブラウザーで50%縮小表示させることで、見かけ上 720 x 480ピクセル、600 x 400ピクセルとしています。
写真ブログの写真は長辺1440ピクセル
ところが、写真そのものを掲載することが目的である「写真サイト（ブログ）」となると話が変わりまして、最低でも長辺1600ピクセル程度は欲しいのです。いわゆるフルサイズセンサーの一眼レフで得られる奥行き感と精細感を伝えることが出来、モニターに100%表示できるサイズということで、長辺1600ピクセルという結論に至っていました。本当は長辺2000ピクセルくらいは欲しいのですが、我が家のモニターが1600x1200 というサイズですし、人様に見ていただくのであればその方々の鑑賞環境も考慮しないといけません。
1600 ピクセルというと大きいというイメージがあると思いますが、はがきにプリントする時350dpiで長辺1800ピクセル程度は必要ですから、1600ピクセルというのはそんなに大きな画像ではない のです。しかしモニターに表示させる場合、いきなり長辺1600ピクセルとういうのはちょっとあんまりですね。
したがって、1600ピクセルの画像をブラウザーで50％表示にさせて、画面上には長辺800ピクセルで表示させてみてはどうかと考えました。しかし、長辺800ピクセルはよいのですが、対応する短辺は 800/3*2 とすっきりした数値になりませんので却下しました。
ということで、上述した長辺600ピクセルや720ピクセルをそれぞれ倍にした、長辺1200ピクセルと長辺1440ピクセルという数値を考えて、長辺1600、1440、1200ピクセルの画像を比べてみました。写真そのものを見せたい場合、1440では譲れても1200では譲りたくない場合があるということを確認しました。
長辺1440ピクセルあれば、そこそこ精細な画像を作ることが出来るということを知りました。その分、容量にも違いが出てきまして、1200ならかなり高い確率で500kBに収まりますが、1440では500kBに収まらない場合が頻発します。ちなみに長辺1600ピクセルの画像に対して、長辺1440ピクセルの画像はドット数にして81%です。同じく長辺1200ピクセルの画像では56%になります。
このような考察を経て、一枚の画像（写真）に容量制限のあるブログでは、いたしかたなく長辺1200ピクセルの画像をアップロードして、ブラウザー上には縦横50%表示させることにしました。長辺600ピクセルということになります。それが上で紹介した「吉備の国放浪記」です。
長辺1200ピクセルの写真を掲載したブログ：
しかしこれでは満足できないので、制限のあるブログサービスに頼らずにレンタルサーバーを利用して写真サイトを構築しました。これでしたら、一枚の写真の容量制限を気にすることなく、Jpegの圧縮率と長辺のサイズを好きなように出来るので、アップロードする画像の長辺は1440ピクセルとして、ブラウザー上の表示は50%縮小して長辺720ピクセルとしました。それが下記のサイトです。
長辺1440ピクセルの写真を確認できるサイト：
我が家のメインモニターは 1600 x 1200です（サブモニターは 1920 x 1080 タテ です ）。メインモニターでモニターフィットの長辺1600で見るよりは、長辺1440で見るほうが快適です。ただ、将来的にもっと大きな解像度のモニターが出回ってくれば、ほとんど意味のない話になってしまうので、このような考察は一過性といってもいいのかもしれません。
はてなブログに掲載する写真サイズは？
はてなブログで写真サイトをするつもりはなかったので、特に深く考えることなく 600 x 400 ピクセルを基本にしています。冒頭に戻るわけです。
ここはてなブログでは、無料契約であっても一枚あたりの写真の容量に関する制 限はなく、月間300MBまでアップロード可能ですから、毎日投稿するとして1日10MBです。1MBの写真を10枚掲載できます。
1日10MB、画像の長辺が1024 ピクセルというスペックは、自分が考える写真サイトとしては物足りませんが、写真サイトでないのならば十分足りるスペックです。一歩譲って 960 x 640 ピクセルを基本とした写真を100%表示で掲載できるようにデザインすれば、ちょっとした写真サイトは構築できそうです。
写真を見せるサイトとしてはサイズ的に長辺1024ピクセルという条件では満足できませんが、容量だけは十分に提供していただけるようなので、解像度は長辺600ピクセルを基本として、Jpeg ではなく png フォーマットでアップさせてもらうようにしました。
続編です
