lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする

2021.10.19 編集。
lightgallery.jsは、Ver1とVer2があり、商用利用する場合はVer2は有料です。
lightgalleryに関する記事一覧はこちら
Ver1公式サイトはこちら
Ver2公式サイトはこちら
　
　
lightgallery.jsでは、サムネイルを表示する場合、小さいサイズの画像を指定できます。
 
そして、WordPressでは、wp_get_attachment_image_src($id, "画像サイズ")[0]という関数を使えば、サイズを指定して画像を取得することができます。
組み合わせると、

<a href="<?php echo $src; ?>" data-exthumbimage="<?php echo wp_get_attachment_image_src($id, "thumbnail")[0];?>">
</a>

このように、属性にdata-exthumbimage=サムネイルサイズの画像URLと指定します。
　

lightgallery.js Ver2の場合

上記に続いて、下記のように設定。
HTMLではなく<script type="text/javascript">で指定してるところに、付け足します。

<script type="text/javascript">
lightGallery(document.getElementById('gallery'), {
	plugins: [lgThumbnail],
	thumbnail:true,
	exThumbImage: 'data-exthumbimage'
});
</script>

補足

WordPressは、画像をアップロードするとき、オリジナルのサイズだけでなく、自動で大・中・小にリサイズして保存してくれます。
大・中・小の実際の大きさは、管理画面の設定⇒メディアから設定できます。
さらに、functions.phpに追加すれば、任意のサイズを指定することができます。
注意点として、管理画面等からサイズ変更しても、アップロード済の画像はリサイズされません。
アップロード済みの画像をまとめてリサイズできるプラグインがあるので安心してね。
 

wp_get_attachment_image_src($id, "画像サイズ")[0]とうしろに[0]がついてるのは、wp_get_attachment_image_src()の返り値が配列で、
[0] -> 画像ＵＲＬ
[1] -> 画像幅
[2] -> 画像縦
だからです。