質問: GIF動画が100個くらいをWebページの1ページに全て静止画として表示したいです。 GIF動画のままだとページが重くなってしまいます。GIF動画を自動で静止画にして表示する方法はありますか? GIF動画をフリーソフトなどで一つずつjpgなどの静止画に変換すると、ファイルが増え管理が煩雑になるので、それは避けたいと思っています。
回答: ###### 1. ライブラリの使用 【GIFアニメ画像を停止して読み込ませ、クリックで再生させる2つの方法 - WEBをつくる。】 【[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer | コリス】 下記のようなプラグインと連携させることで自動再生/自動停止が実現できそう。 【【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。】 ###### 2. 代替画像を用意してクリックで置き換え 【GIFアニメーションは直接貼り付けずJavaScriptで再生させる | iwb.jp】 ###### 3. 遅延読み込みでロード時のみ軽量化 ※ 他の案に比べてページロード時しか効果が期待できないのでおまけ程度。 【【JavaScript】画像の遅延読み込みを行うライブラリ[Layzr.js]の使い方 - ONZE】 【Lazy Load(画像の遅延読み込み)を実装する方法】