【解決】WordpressでGIFが動かない時に確認したい内容。

WordPressでGIFが動かない原因とその解決策

GIF（ジフ）の説明はここでは不要だと思いますので、飛ばします。
早速ですが、WordpressでGIFが動かない時に考えられる主な原因は以下です。

当サイトではパソコンの画面の動きを分かりやすく伝えるためにGIFを使ったりするのですが、ある日を境にアップロードしたGIFを記事に埋め込んでも動かないという状態に陥っていました。

作成するソフトが悪いのかな？と思って色々なソフトで作成し直したのですが、一向に動きません。そんなこんなでGIFの使用を断念した記事もあるのですが、先日やっと原因が分かり、解決しました。

それでは順番に見ていきましょう・ｗ・

GIFはフルサイズでしか動かない

今回この記事のためにサンプルGIFを作りましたので、これを使って解説します。

作成したGIFアニメーション

作成したGIFはマウスオーバーで画像が回転するというものです。
サイズは800×400pxで、容量は約1MBです。これを動かしてみましょう。

まずはWordpressのメディアにGIFをアップロードします。

WordpressにGIFをアップロードする

記事投稿画面にある「メディアを追加」からGIFをアップロードします。

アップロードが終わったら早速記事に挿入しましょう。

GIFはフルサイズで挿入しないと動かない

ここが１つ目の注意点でして、GIFはフルサイズで使わないと動きません。

ブロックエディターの場合も同様

これはブロックエディターを使っている方も同様です。

「サムネイル、中、大」などフルサイズ以外のサイズでGIFを挿入していた人はこれでGIFが動くようになるはずです。

これはフルサイズで埋め込んでいます。

無事に動きました。WordpressでGIFを使う時はこれが基本です。

GIFはなぜフルサイズでしか動かないのか？

ではなぜWordpressのGIFはフルサイズでしか動かないのかについてです。

サムネ、中、大では基本的に動かない

GIFを挿入する時には「サムネイル、中、大」やその他のサイズが選べますが、ここでフルサイズ以外のサイズを選ぶとGIFは動かず、静止画のようになってしまいます。
（一応、画像をクリックしてフルサイズを開ければ動きますが。）

この原因はフルサイズ以外のGIFは、画像のアップロード時にWordpressの機能によって自動生成された別サイズのGIFだからです。

オリジナル画像（フルサイズ）のみが動くGIF

上の画像はWordpressにアップロードした後の画像を一覧表示したものです。
この中の「-○○×○○」という名前が付いているGIFはリサイズされて再生成されたものなので動きません。

生成のタイミングでGIFから1枚の静止画が生成されている感じですね。

フルサイズでGIFが動かない時の確認事項

ここからは僕が３日間詰まった内容です。

サイトの立ち上げ時は先述した方法で問題なくGIFを埋め込み、表示出来ていたのですが、ある日を境にアップロード後のGIFが動かなくなってしまいました。

フルサイズで埋め込んでいるのにGIFが動かないのです…
フルサイズでもGIFが動かない時は以下の内容を試すのが効果的かと思います。

経験上、GIF作成ソフトが原因である可能性は結構低い感じです…
なのでまずは使いたいGIFがアップロード前のGIFと同じ物なのかを確認しましょう。

GIFが静止画として再生成されていないか？

GIFは他の画像と比べて容量が大きいので、これを確認しましょう。

GIFの容量は963KB

例えば今回作ったGIFはアップロード前の容量が963KBです。

アップロード後GIFの容量が減っていたら要注意

しかし、アップロードした後の容量がわずか49KBとなっていました。
これは明らかにおかしいです。49KBとはまさに静止画の容量です。

そこで色々確認したところ、直接の原因は画像のアップロード時に画像をリサイズしている処理がまずかったようです。

// 画像アップロード時の自動リサイズ
function image_resize_upload( $file ) {
    if ( $file['type'] == 'image/jpeg' OR $file['type'] == 'image/gif' OR $file['type'] == 'image/png') {
        ～ほげほげほげ～
    }
    return $file;
}
add_action( 'wp_handle_upload', 'image_resize_upload' );

functions.phpに上記のようなコードを入れ、横幅が1500pxを超える画像は自動的に1500pxになるようにリサイズしてるコードが原因でした。

今回アップロードしたGIFは1500px以下だったのでこのコードは通っていないだろう…と思っていたのですが、通っておりGIFが静止画として保存されていたようです。

ということでコードから「image/gif」の部分を取り除いてから、GIFをアップロードし直すと解決しました。

画像アップロード時に自動リサイズなどの機能を追加している人は、その機能の対象拡張子にgifが入っていないか確認しましょう。

GIF作成ソフトに問題はないか？

稀にGIFの作成段階で何かしらの不具合が発生しており、WordpressでGIFが動かないことがあります。

GIFは画像から作成されることもあれば、動画から作成されることもあります。
また、フレーム数や秒数なども変更できるため作成段階でGIF自体に問題が発生している可能性があります。

現在GIF作成ソフトの種類は数多くあり、オンライン上でGIFを作成できるサービスもあれば、パソコン専用ソフト、スマホのアプリと様々です。
GIFが動かない時は、作成ソフトを変更するだけで動くようになるかもしれません。

パソコンでMP4→GIFという作成であれば以下のサイト様がオススメです。

またフリーソフトを使うなら「ScreenToGif」で動作確認が取れています。

現在はほとんどのGIF作成ソフトで問題なく動くGIFが作成できますが、問題の１つである可能性があることは確かです。

圧縮率や容量に問題はないか？

GIFが変に圧縮されてしまっていたり、容量が大きすぎるとブラウザで動かせない事があります。

この場合は、GIFの圧縮率を変更してみたり、圧縮せずにアップロードしてみると動くようになることがあります。

GIFのサイズの目安はおおよそ数百KB～2MBくらいまでらしいです。
今まで自分が作った5秒程度のGIFのサイズは180KB～1MBくらいだったので特別圧縮はしていないのですが、問題は出ておりません。

もしも数十MB以上もあるGIFをそのまま使おうとしているなら、動画に変更した方がページ速度的にも良いかもしれません。

ファイル名を変更してみる

プログラムにおいて日本語というのは少々厄介でして、英語と比べてバイト数が大きいことで有名です。

なのでもしかしたらGIF画像の名前を英語に変更することで動くようになることもあるかもしれません。
またハイフンなどの記号も使わずに様子見した方が分かりやすいかと思います。

ただ、WordpressのGIFに関しては日本語で問題なく動いており、動かなかった経験がありませんのであくまで参考までに。

画像系のプラグインを疑う

最後にWordperssならプラグインが悪さをしている可能性を疑いましょう。
GIFに関しては画像系のプラグインおよび、キャッシュ系のプラグインが怪しいです。

例えば、WebP画像を自動生成する有名プラグイン「WebP Converter for Media」の場合はアップロードしたGIFがWebPに変換されると静止画になってしまいます。

GIFはWebP化から除外する

そのため「WebP Converter for Media」の設定画面でサポートファイルの形式から.gifを除外する設定にしています。

プラグインが原因かどうかを判定するには、導入しているプラグインを全て停止してから、GIFをアップロードして動くか確認すれば分かるかと思います。

GIFが大きすぎる時はカスタムサイズを使う

GIFは基本的にフルサイズしか動かないと書きましたが、追記です。

先日フルサイズのGIFを記事に使ったところ、画像サイズが大きすぎて困りました。
GIFそのものをリサイズしても良いのですが、面倒なのでカスタムサイズで横幅と縦幅を指定し直したところ、カスタムサイズでもGIFが動きました。

挿入した画像をクリック→編集→画像詳細

カスタムサイズを使用するには、記事編集画面をビジュアルエディターで開き、画像をクリックして画像詳細（ペンマーク）を開けばOKです。
ブロックエディターでも同様のやり方でカスタムサイズが使えます。

GIFの表示がフルサイズでは大きすぎる時はカスタムサイズを使って調整しましょう！

カスタムサイズでは横幅か縦幅を入力すれば、片方はフルサイズと同じ？アスペクト比になるように自動調整されますが、画像自体はフルサイズのものが読み込まれるのでGIFも問題なく動くようです。

スマホでGIFが動かない原因について

無事にパソコンでGIFが動くようになったならスマホでも確認しましょう。
どうですか？動いていないのではないでしょうか？
（クリックすれば動くはずですが…）

GIFをフルサイズで埋め込んでもスマホでは動かない事が多々あります。
これはスマートフォンやiPad、Macに搭載されているディスプレイが原因です。

スマホでの閲覧時、記事中のGIFはクリック（タップ）して開かないと動かないというWordpressサイトが多いイメージですが、実はスマホでもクリックさせることなく、そのままパソコン閲覧時のようにGIFを動かすことができます。

パソコンでは動いているけど、スマホでGIFが動かない！
という方向けに別の記事（↓）を書きました。こちらも是非ご確認下さい！

まとめ

WordpressでGIFが動かない時に確認したい内容と解決策のまとめでした。
つらつらと書きましたが、フルサイズで埋め込んでいるのにGIFが動かない時は、GIFがGIFとして機能していないことが主な原因となります。

特に画像を自動リサイズしたり、自動圧縮するようにしている人は".gif"という拡張子が対象になっているだけで処理され、静止画として再生成されていることがあるという事に注意しましょう！

GIFはフルサイズしか動かない！というのは知っていたのですが、フルサイズで動かないとなると原因が分からず詰まります。動かすだけで３日も浪費しちゃった…
記事も書けたし、解決したので良いのですが・ｗ・