GIFアニメに再生ボタンを付けて、軽量化するWordPressのプラグイン

よかったらこの記事をシェアください

WP GIF Playerのイメージ

WordPressで、GIFアニメーションを再生型にするプラグインを紹介します。
「WP GIF Player」というプラグインです。

このプラグインを使えば、最初にダミーのJPEG画像が貼られます。
そして画像をクリックすると、GIFアニメーションが読み込まれます。

このプラグインを使うと、重いGIFアニメの貼られた記事は、劇的に表示スピードが速くなります。

WP GIF Playerのフロー

インストール方法

WP GIF Playerプラグイン

プラグインの新規追加画面で、「WP GIF Player」を検索すると出てきます。
今すぐインストールを押して有効化します。

もしくは、以下のサイトからダウンロードしてください。

WP GIF Player
WP GIF Player is an easy to use GIF Player for WordPress. It prevents GIF-files from loading on page load, boosting your page load time.

使い方

使い方は簡単です。
まず、通常のメディアからgifアニメ画像をアップロードします。
(アップロード時にサムネイル用JPEGが生成されます)

必ずプラグインを有効化してから、gif画像をアップしてください。
「JPEG画像のサムネイル」が作成されるからです。
そのため、過去にアップしたgifアニメ画像は、再アップする必要があります。

記事投稿画面のAdd GIFを押します。

Add GIFを選択

通常のメディア追加画面が出てくるので、gifアニメーションを選択します。

WP GIF Playerの選択画面

gifアニメを選択してInsertボタンを押します

記事内にショートコードが貼られて、作業は完了です。

WP GIF Playerのショートコード

必要に応じて、widthの値を入力します。
widthを削除すると、横幅が100%になります。

widthの値は固定です。
横幅は
100150200250300350400450500550600
から選べます。
(現時点では自動で調整されないので、画像サイズを上記に調整しておきます)

貼り付けたGIFアニメーションには、「GIF」のボタンが表示されます。

WP GIF Playerの表示

画像を押すと、GIFアニメーションが再生されます。(このサイトでは、適用していません)
それまではGIFアニメが読み込まれないので、サイトの速度が改善できます。

サムネイルの設定

WordPress管理画面の左ナビ、設定の中に、WP GIF Playerが追加されます。
サムネイルの表示方法を変更できますが、とくに変更する必要性はありません。

このプラグインが必要な理由

GIFアニメーションは、再生環境を選ぶことがなく、ちょっとした動画であれば便利です。
以下のような、ノウハウ系の記事で役立ちます。

単語をダブルクリックすると、文字修正やコーディングが捗る

単語をダブルクリックすると、文字修正やコーディングが捗る

GIFアニメーションは、(MP4などの)一般的な動画フォーマットよりも、データが重くなります。
そのため記事全体の「読み込みスピード」が遅くなります。
それにより、ユーザーの心地よさを損なってしまいます。

また、サイトのスピード改善は、SEOにおいても有利になります。
(といっても、大きな影響ではありません)

記事内すべての「GIFアニメ画像」が、500kb以上であれば、このプラグインを導入する価値があります。
また、あまりにGIFアニメが「騒がしい」と感じるときは、このプラグインを使用した方が良いでしょう。

最後に

今回は、WordPressサイトの「スピード改善」となる「WP GIF Playerプラグイン」を紹介しました。
GIFの読み方が気になる方は、以下の記事をご参考ください。

gifの読み方は「ジフ」だけど「ギフ」勢に押されている話

gifの読み方は「ジフ」だけど「ギフ」勢に押されている話

GIFアニメーションは、多くのブログサービスや、SNSでも自動再生されません。
この「WP GIF Player」は、実装するのに大変な「GIFアニメの再生ボタン」を、すぐ導入できます。

GIFアニメのローディングが気になる方は、ぜひ使ってみてください。

よかったらこの記事をシェアください

(この記事を紹介してくださる方に感謝します)

スポンサーリンク
レクタングル(大)
レクタングル(大)
     
スポンサーリンク
レクタングル(大)