昨年の4月にデザインの調整ということで、写真の最大サイズを 1024px まで上げていたのですが、これは Google Photos の無料アップロードサイズが長辺 2048px とされていたために、それまでアップロードしてきたものを鑑みつつ高解像度環境を見こんで半分としたものでした。
しかし Google Photos が最大 16MP まで無料アップロード可能となりしばらく16MPでのアップロードも増えてきたので、この度さらに最大サイズを 1600px まで上げました。ウィンドウサイズが 1650px を超えると、サイト全体の横幅が拡大し、photo カテゴリのエントリについては最大1600pxで表示されるようにしました。
現時点では仮対応という感じで、2048px の画像へのリクエストが走ったのちに、JavaScript で s0 (最大サイズ) をロードするようにしています。
画像の大きさ
1650px と中途半端なところでレスポンシブなのは、Retina 13-inch MacBook を「スペースを拡大」設定で使っている場合の横幅が 1680px なので、丁度これぐらいというところにあわせてあります。この日記の最大の読者である自分の環境というわけです。
大きな画像っていうのはそれだけで強い主張があります。かつてあった「体験」を呼び起こす力が画像の大きさと解像度にはあります。そこにいて、そこでこう見たのだという主張のため、とにかく大きいのは正義なのです。
現像環境と閲覧環境とのギャップ
写真は適切な閲覧環境とセットで成立すると思います。大画面で現像した結果をアップロードして縮小した画像を見てみたりすると「何か違うな」と思うわけです。視野に占める画像の大きさと、細かいところが見えるかという要素で、写真への没入感がかなり変わってしまいます。細かいところでいうと、本来出力サイズによってシャープネスのかけかたが変わってきます。
ウェブ公開の場合、閲覧環境をこれと指定することはできません。写真の閲覧に関する体験は閲覧者環境の画面の大きさや発色などの影響されるので、発信者はどこかで諦めるポイントがあります。
4K までのスケールアップ
ついでに 4K モニタ程度までの対応として以下のように transform で scale() をかけて徐々に拡大していくようなメディアクエリを入れてみました。
body {
transform: scale(2);
transform-origin: center top;
} これは Chrome や Firefox だと綺麗にいくのですが Safari (10.01) だとなぜかボヤけることがあります。ボヤけないこともあるので、なにかしら条件があると思うのですが、よくわかりませんでした。transform はまだ鬼門かもしれません。
