Lazy Load（画像の遅延読み込み）するプラグイン lazySizes.js

画像を遅延読み込みするプラグインは多数ありますが、lazySizes はレスポンシブイメージに対応、jQueryに依存しない、余計なオプションが少ないなどでおすすめです。

lazySizesの使い方

GitHub よりzipをダウンロードし、 lazysizes.min.js を読み込みます。

<script src="js/lazysizes.min.js"></script>

CSSの記述

CSSでアニメーションを入れます。

.lazyload {
  opacity: 0;
  transition: opacity .8s ease-out;
}
.lazyloaded {
  opacity: 1;
}

HTMLの記述

<img>タグのclassにlazyloadを、src="" にはダミー画像を data-src="" に表示させる画像を設定します。

<img class="lazyload" data-src="https://placehold.jp/400x200.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== は、data URI化した1×1のgif画像です。このまま使用できます。
参考：快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久 | Web担当者Forum

ダミー画像のときに高さがなくなるのを防ぐ

画像が読み込まれる前（ダミー画像）の状態は高さがないため、画像が表示されるまでの間表示が崩れたり、スクロールイベントが正常に動作しなかったりします。
「lazysizes aspectratio extension」は、指定したアスペクト比でダミー画像の高さを保ってくれるプラグインです。
GitHub からlazysizesをzipでダウンロードすると lazysizes/plugins/aspectratio/ 内に入っています。
ディレクトリの中からls.aspectratio.min.js をlazysizesの後に読み込みます。
公式：lazysizes/plugins/aspectratio at gh-pages · aFarkas/lazysizes · GitHub

アスペクト比の指定方法

幅400・高さ200の画像の場合（全て同じ意味）： "400/200"、"4/2"、"2/1"、"2"、"2.0"
<img>タグの中に下記の記述を追加します。

data-aspectratio="400/200"

img要素に width:100% を指定します。max-width では動作しません。

img.lazyload {
  width: 100%;
}