画面を下の方にスクロールしてもらえばわかりますが、このブログには『Lazy Load Plugin for jQuery』というjQueryプラグインを導入してます。

このjQueryプラグインはディスプレイで表示されている分だけ画像を読み込むというもの。
画像はスクロールにあわせて都度読み込む、つまり無駄な画像読み込み時間が減る分、ページ表示速度が上がるというわけです。特にこのブログのように大きな画像をたくさん使っているようなサイトではその効果は大きいはず。

導入方法

まずはLazy Load Plugin for jQueryより「jquery.lazyload.js」もしくは「jquery.lazyload.mini.js」をダウンロード。（Downloadのとこのsourceかminifiedのとこで右クリック→リンク先を保存でOKです。）
jQueryをはじめて導入する方はjQueryファイルもダウンロードしてください。

あとはhtmlのhead内で二つのファイルを読み込ませ、ついでに命令文を書けばOKです。ここではjquery.lazyload.mini.jsを使いました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.mini.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>

ちなみに命令文を以下のように書くと200px先読みして画像を読み込んでくれます。

<script type="text/javascript">
$(function() {
$("img").lazyload({ threshold : 200 });
});
</script>

そしておすすめがこれ。
適当な1ピクセル×1ピクセルの画像を用意して（ここではgrey.gif）以下のように書けば画像読み込み時にフェードインのエフェクトをかけることができます。このブログでもこのエフェクトを使っています。

<script type="text/javascript">
$(function() {
$("img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});
});
</script>

うーんかっこいい。

Webサイトページの表示速度が遅いとユーザーの離脱に大きく影響を与えてしまいます。誰だってサクサクでストレスの少ないWebサイトを好みますからね。
大きな画像をたくさん使っている方は導入を検討してみてはいかがでしょうか？

Lazy Load Plugin for jQuery

追記：2010/08/07 サイドバーには適応させたくないなら

このプラグインを記事部分（メインコンテンツ部分）にだけ適用させたい場合は以下のように記述します。
例えばフェードインエフェクトを使いたい場合で記事部分にid=”hoge”とマークアップしているなら

<script type="text/javascript">
$(function() {
$("#hoge img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});
});
</script>

これで「ページの最後までスクロールしないとサイドバーの画像がされない」ということがなくなります。

追記：2010/08/25

どうやらフェードを使うとiPhoneでは画像が表示されなくなる場合があるみたいです。ちなみにこのブログは大丈夫でした。
もしこの現象に見舞われたら、WordPressの方はiPhone表示用プラグイン（iWPhoneとかiWtouchとか）を使えばOKですが、それ以外の方はとりあえずフェードエフェクトを使わないという解決策しか今のところ思いつきません。
ユーザーエージェント判別してスクリプトを除外…とかすれば出来そうな気がしないでもないですが、よくわからないので詳しい方いらっしゃいましたらアドバイスお願いします。

追記：2011/08/15

iPhoneで表示されない時の対処法がこちらで紹介されてました！
jQuery lazy load pluginの導入と思わぬ不具合への対応！ | [NC]News Clipping

お悩みだった方は是非ご覧下さい。