Blogger究極軽量化の完成、画像拡大は非lightboxで
『PicaThumbnail』のソースコードは Github でご覧いただけます。2016.10.5
“クリックでオリジナル画像へのリンク付きサムネイル画像をその場で拡大表示する”ちっちゃなやる気のないライブラリは『PicaThumbnail』と命名しました。2016.1.6
ワンコインSIM対応の超軽量Webサイト制作は佳境へ…
半年ほど前に本ブログを超軽量カスタマイズして以降も少しづつ使い勝手を修正してきました。
また運用ではサムネイルサイズの画像しか貼らないことを基本にしています。
これにより1ページ辺りの転送量は数十KB、ワンコイン SIM のような低速回線でも快適にページを読み込むことができます。
PageSpeed Insights で分析
本題の前に Google の PageSpeed Insights で分析しました。
ほとんどのアドバイスは非独自ドメインの Blogger 管理者にはどうにもならないものでしたが一点だけ参考になるものがありました。
アドバイスを受けて js の読み込みに加え css の読み込みも <body> タグの後に持ってきました。
css のダウンロード完了より先にコンテンツが表示されるようになったため、低速回線でのフラストレーションが解消します。
PageSpeed Insights では、 <html> タグの後に <link> タグを書くように勧めています。しかし blogger のテンプレート編集機能でエラーになるため <body> の後としています。
ページが読み込まれた後で元の small.css が読み込まれます。javascript ですべての <style> 要素と <link> 要素をドキュメントに挿入することで、CSS ルールの適用順序は維持されます。
js で <style> と <link> をドキュメントに挿入しなおす、そうです。大丈夫なのでしょうか…
本ブログは css ファイルがひとつなので適用順問題はありません。
残る課題、lightbox エフェクト
この間放置してきた最後の課題に“サムネイル画像からオリジナル画像へ、ページ内で拡大表示したい”というものがあります。
そんなニーズを叶えてくれるもののひとつが lightbox を初めとする lightbox 系ライブラリです。
はじめにサムネイルだけを読み込んで巨大なオリジナル画像のロードはユーザーの操作後にできるので、圧倒的にページの読み込みが速くなります。
一応、Blogger には独自の lightbox が組み込まれていますが Blogger 製の全ての js をコメントアウトしているため使うことが出来ないのがそもそもの発端になります。
2度目以降の訪問でのオリジナル画像のニーズ
ところで文章が中心のページでは特に、2度目以降の訪問のオリジナルサイズの画像表示のニーズは減っているはずです。
トップページでも記事の冒頭でもついつい大きな画像を置いてしまいがちですが、大きな画像を見てもらいたいというのはそもそもページ制作者のエゴかもしれませんね。
lightbox 系は超軽量ページにとってはややヘビー
これらのライブラリの中には軽量を謳うものもあり、事実軽量です。しかし転送量で数十KBを達成した本ブログからするとややヘビーです。
オーバーレイやアニメーションをクロスブラウザで確実に行うには、どうしてもそれなりの規模のコードが必要になってしまいます。
このような理由から、自作するにしろ既存のライブラリを使うにしろ決心がつかず課題を放置していました。
オーバーレイ式をやめその場で拡大する
先週になって lightbox のようなオーバーレイ方式ではなくその場でカラム一杯に画像を拡大することに思い至りました。
これでしたらオーバーレイに比べて遥かに簡単でコードも僅かです。
また、コンテンツを覆い隠すこともないので文章中心のページには lightbox より適していると思います。
既に同様のライブラリはありますが lightbox 系のように適当な名前はついていないようです。
Live Thumbnail
クリックすると、その場で画像を拡大表示。もう一度クリックすると画像を縮小表示。画像脇のレイアウトが崩れるが、見ていて面白い。
先の引用記事で言及されている Live Thumbnail はリンク先が消えていて Web アーカイブにも記録が無いため実物を確認することは出来ませんでした。
動作
コンパクトとわりきりを主眼に動作を決めて2日ほどでささっと実装しました。
- window.onload でオリジナル画像へのリンク<a>を見つけ、その直下に<img>だけがいればクリックイベントを追加します
- クリックイベントでは img.src をオリジナル画像に置き換えます
- 画像の表示サイズは親要素によって制限されるため <a> タグの親ブロック要素(div,p,blockquote)のサイズを“計測し転送量の動的最適化”します
- 画像にテキストが半端に回りこんでレイアウトを崩さないように、オリジナル画像がカラムに対して必ず 100% になる対策
画像転送量の動的最適化
Blogger に投稿した画像は Picasa ウェブアルバムに保存されます。
この Picasa ウェブアルバムの提供している大変便利な機能として url にパラメータを追加することで変換済画像を取得することが出来ます。
// オリジナル画像
img.src="//3.bp.blogspot.com/(略)/css3lightbox.png";
// 画像の横幅を指定して縮小
img.src="//3.bp.blogspot.com/(略)/w480/css3lightbox.png";
これによりブラウザウィンドウより大きな画像を無用に読み込むことがありません。
最近では <picture> 新要素で js が切られていても近いことができますね。
わりきった機能
ダウンロード速度を計測して取得する画像サイズをさらに細かく調整する機能がありません。
- ダウンロード速度を元に devicePixcelRatio を勘案したり無視する仕組みが無い
- ブラウザウィンドウのリサイズによって画像がぼやけたときに再取得を行う仕組みが無い
ライブラリのサポートがないと大変な機能をわりきりました。
- 画像をピンチやマウスホイールでさらに拡大する・縮小する
- CSS Transition をサポートしない、またはサポートが不十分なブラウザでは変形のアニメーションがない
- 3D transform ではなく width を変化させているため、アニメーションが最適化されていない
- コンテンツエリアを越えてブラウザウィンドウまで画像を引き伸ばし表示する機能が無い
- 画像のロード状況を監視してアニメーションやリサイズしたりエラー表示する仕組みが無い