最近はつたない写真をぺたぺた貼ることが多いのですが、ここで問題になるのは
- ほとんどの人は大きい写真など見たくはない
- ごく稀にピクセル等倍の写真を見たい場合があるかもしれない
という相容れない事項。普通に縮小してJPEGで保存すれば写真は数十KBで収まりますが、カメラで撮ったそのままのサイズでは3MB程度になります。写真を見ることに関してほとんど縮小画像で事足りるのですが、レンズの比較やピントを見る場合には等倍で見ないとさっぱりわかんない時があります。
ほとんど必要ないのにデカい画像を貼るのはトラフィックの無駄だしなにより処理が重いので嫌。でもデカいのが存在しないと見たくても見られない。という困った問題が生じていたので、ここのシステムをちょっと改造して間に中くらいの絵を置くようにしてみました。
ブラウザで右の絵をクリックすると中くらいの絵が表示されます。で、中くらいの絵の下の方をみると[大きいファイル]のリンクがありますので、それを押すとピクセル等倍の絵が出てきます。ピクセル数とキロバイト数を表示してますから押す場合はちゃんと覚悟ができていいかなと思います。なお、元画像が PNG の場合はその横に中くらいのPNG画像へのリンクも表示されます。これまで末尾を律義に書き換えてダウンロードされていた方はちょっと便利になるかもしれません。少なくとも私は手作業で縮小せずに済むので楽になります(笑)。
なお、当サイトのポリシーとして「昔のブラウザでもなんとか表示可能にする」というのがあるのですが、この処理にはJavaScriptをある程度使っています。JavaScriptが動かないブラウザでも特に問題無いように作ったつもりですが、実装が異なる場合は誤動作したりエラーが表示されるかもしれません。そういう場合は少なくともエラーが出なくなるようには対処しますので環境を連絡してもらえると助かります。
下記は動作に関する覚え書きなので興味の無い方は読み飛ばしてください。
- http://〜/hitorigoto/img/hoge.(jpg|png) に対して適用
- 実体は img/index.php。URIの書き換えには Mod_Rewrite を使用
- 元ファイル hoge_fs.(jpg|png) から (1)長辺が200(pngの場合は短辺) (2)長辺が600 (3) 長辺が1200 の jpeg を自動作成。元がPNGの場合は加えて(4) 長辺が600のPNG を作成
- 上記を _s.jpg _m.jpg _l.jpg と _m.png という suffix を与えて静的ファイルとして保存。これらは Mod_Rewrite の影響を受けず直接アクセス可能
- ひとりごとコーナーからは <a href="img/hoge.jpg"> として利用。このリンクは JavaScript で
onLoad 時に"img/hoge.jpg?width=xxx&height=yyy" (ブラウザの表示領域) と書き換えられる。←onload だと遅いので、<body>に埋め込んだJavaScriptをそのまま実行するようにしました。 - widthやheightが無い場合は _m.jpg を直接表示(ロボット/RSSリーダー/非対応ブラウザ用)、ある場合は HTML を表示する。HTMLでは<img src=〜>にて _m.jpg を表示。ウィンドウのサイズが大きくて _m.jpg が収まる場合は _m.jpg の替わりに _l.jpg を利用する
- ブラウザの表示領域より絵の方が大きい場合は画像をクリックすることで原寸/縮小の切り替え(トグル)。ウィンドウをリサイズした場合はウィンドウ内に収まるよう画像が縮小表示される。
- PNGへリンクは _m.png だけ。だからウィンドウサイズによってはこれを押すと画像が小さくなる(笑)
縮小画像のEXIFはおっきいファイルからそのまま移行。ついでにシャッター速度や絞りも表示。EXIFにはレンズ情報も入ってるみたいなのだけど、 MakerNote のバイナリを追っかけないといけないみたいなのでそこまではやってません。
サイズが大きくなるので、EXIFは持ってこずに表示段で元ファイルを参照するように変更。MakerNote に関しては exiftools を利用- いま気付いたけど、ウィンドウリサイズ時にサーバに縮小のリクエストを送って、それが帰ってきてから画像差し替えってやれば Internet Explorer でも奇麗な絵が出るのかも? でも面倒クサいのでやらない(^_^)。だいたい Internet Explorer を除けば Firefox でも Chrome でも(もちろんMacでも)周辺ピクセルを使って奇麗に縮小されてるし。Vistaだと奇麗なのかな? よく知らない。
という感じ。今月と先月の写真は過去にさかのぼって差し替えているものがあります。これまでサムネール画像は写真が「長辺200px」絵が「短辺200px」と決めていたのですが、自動縮小だと区別できないので今後は共通で「長辺220px」になります。絵に関しては一回り小さくなりますが、ひょっとしたらちっちゃくなって見にくいぶん上手に見えるかもしれません(^_^)。
↑よく考えたら写真は必ずJPEGで絵は必ずPNGなので、大きい絵の拡張子で切り替えることにしました。