先日のブログのテンプレート修正に追加して、さらに Retina 対応してみました。いかがでしょか。とても美しい表示、わかる人にはわかると思います。スクリーンショットやスライドの文字の読み易さも圧倒的です。

詳しいことを書きますと、このブログでは、特に最近のエントリーでは Flickr に画像を置いて、Flickr のShare ボタンからとってこれる HTML コードの img タグをおいて表示しているんですが、すべてのエントリーの画像を個別にさしかえるのはあまりにアレなので、Javascript で入れかえることにしました。

Flickr の画像サイズは 拡張子の前にはいっている Size Suffix でサイズがわかりますので、これを参考に、それぞれ、より高解像度の画像になるように suffix を変更して src の中身を差し替えています。

ついでに height 属性も削除して、CSS3 のメディアクエリでウィンドウサイズにあわせて縮小表示するようにしました。これで、スマートフォンで見ても、それなりに表示されているはずです。Google 推奨のレスポンシブ・ウェブデザインってこれでいいのかな。

問題は画像のサイズと転送で、一旦読みこんでから画像を差し替えるので、どうしても転送量がかさみます。画像のファイルサイズが、スマートフォンにはまったく優しくありません。先日の余市のエントリーは、iPad の Safari が落ちたり落ちなかったり。うーん。
また、Flickr が提供しているサイズは最大で 1024px まで。先日、drikin さんにインスパイヤされて、横を 800px にしたのですが、1600px にはできないし、と相談してみたところ、1024px でも効果があるからやるべきとのことでした。そこで、一応、画面サイズをみて、それなりのサイズアップをするようにしてみました。とりあえずはこれでいこうかと思います。

ということで、対応機種をお持ちの方はお楽しみください。