以下の４枚の写真をよく見てください。違いがわかりますか？
ディスプレーの上下がありますので、順序を逆にして表示します。
これは小生がiPadで撮った庭の写真ですから写真としてはまずいものですが、どの写真も同じように見えませんか？
いずれもこのページでは中サイズ、すなわち300×300で表示させています。しかし、すべてサイズや解像度が違う写真です。オリジナルの画像を画像処理ソフトでリザイズしています。画像をクリックすると元の画像が表示されますからわかるはずです。
では、なぜこんなことをしたかというと、今サポートしているサイトで多くの画像を扱っていて提供された画像がサイズも解像度もばらばらで、その画像を統一する必要があったからです。どの程度がいいか考えたわけです。
もう少し具体的に説明すると上の画像はそれぞれ以下のサイズと解像度を持っています。
- 1936×1936 72dpi 811kb
- 640×640 72dpi 131kb
- 320×320 72dpi 40.3kb
- 1939×1936 320dpi 811kb
こう見ると、実はweb上の画像に基本的に解像度は関係がないということがわかります。なぜなら解像度は印刷と印刷サイズに関係があるが、もともとたかだか300ピクセルぐらいの幅でしか表示しないわけだからだ。
従ってバイト数の少ない3番目の画像で充分だということになる。ただ、ここで問題なのはいわゆるスマホ等の解像度だ。iPhoneなどが採用しているRetinaディスプレーだ。このディスプレーはデバイスが持っている解像度と実際の（cssのというか）解像度が違うため、簡単に言うと2倍のサイズの画像が必要だということらしい。（このブログをRetinaディスプレーで見て比べてください）このあたりはよくわからないしややこしいので以下を見ていただければと思います。
Rriver：いまさら聞けないRetina対応のための「ピクセル」の話
結論。画像は2番目の「640×640 72dpi 142kb」で行くことにします。
