アニメーションWebPとGIF

アニメーションWebP/GIFの問題

WordPressでアニメーションを実現する方法に「アニメーションWebP」と「アニメーションGIF」があります。

WordPress上の通常の静止画像ファイルをアニメーションWebPやGIFに差し替えるだけで、静止画がアニメーションになる……、と勘違いしがちですが実際にはいくつかの落とし穴があります。

サムネイルは静止画になる

WordPressに画像ファイルがアップロードされるとサムネイル画像が生成されます。

例えば、ファイル名「animated.gif」のアニメーションGIFをアップロードすると以下のようなサイズの異なるサムネイル画像が複数生成されます(生成されるサイズはWordPressの設定によって異なります)。

• animated-150×150.gif
• animated-240×135.gif
• animated-320×180.gif
• animated-640×360.gif
• animated-800×646.gif

これらのWordPressが生成したサムネイルはすべて静止画です。

アニメーション表示するのはオリジナルの「animated.gif」だけです。

GIFだけでなく、アニメーションWebPをアップロードした場合もサムネイルは静止画になります。

よく聞く「WordPressでGIFがアニメーション表示されない」というのはサムネイルの静止画が表示されていることが原因です。

小さい表示領域でサムネイルが使われるため、「ブログカードのアイコンだけアニメーション表示にならない」などはこれです。

回避方法

この問題を安直に回避する方法はサムネイルと同じファイル名(例えば「animated-150×150.gif」)、同じ縦横サイズ(例えば横150x縦150)でアニメーションGIF/WebPを作成し、Library File Managerなどのファイル管理プラグインやFTPで上書きアップロードすることです。

あまり、スマートな方法ではありませんが……。

アニメーションWebPをアップロードできない

エックスサーバーを使っている場合、WordPressの「メディア」-「新規追加」からアニメーションWebPをアップロードしようとすると以下のエラーになります。

これはエックスサーバーのImageMagickがWebPをサポートしていないためです。

エックスサーバーではPHP8でもPHP7.4でもWebPに対応しているのはGDのみです。

そのため、エックスサーバーでアニメーションWebPを使うなら前述のLibrary File ManagerやFTPでアップロードすることになります。

ただその場合、サムネイルが作成されないため、アイキャッチにはできません。