前回の記事で、WordpressでGIFが動かない原因と解決策をまとめました。
今回はパソコンではGIFが動くのに、スマホ（Retinaディスプレイ）で閲覧した時だけGIFが動かなくなる原因と対処法についてまとめます。
GIFをフルサイズで埋め込んでいるにもかかわらず、スマートフォンで動かない時はWordpressで自動生成された画像が読み込まれていないか確認しましょう。
srcset属性から再生成された静止画のGIFが読み込まれると動きません。
この記事の目次
WordPressでスマホだけGIFが動かない原因
前回、WordpressでGIFが動かない原因とその解決策をまとめました。
基本的にはきちんと動くGIFをフルサイズで使えば動くのですが、先日確認してみるとパソコンでは問題なく動いているGIFがスマホで動いていないことに気が付きました。
例えば下のGIFはフルサイズ（1900×960px）で埋め込んでいます。
これはフルサイズ（1900×960px）です。
パソコンなら動きますが、スマートフォンだと殆どの方が動いていないはずです。
（スマホによっては動く人がいるかも…iPhone SEの実機では動きません。）
そこで色々テストを行った結果、Wordpressが画像に自動的に付与するsrcset属性が原因で、スマホでGIFが動かないという事が分かりましたので記事にします。
スマホでGIFが動かない原因はsrcset属性
繰り返しになりますが、WordpressではGIFはフルサイズで使わないと動きません。
ですが、Retinaディスプレイではこのフルサイズが読み込まれず、静止画が読み込まれてしまうことがスマホでGIFが動かない直接的な原因でした。
どういうことか伝わるように今回も検証を踏まえて解説します。
サンプル用のGIFを作りました。大きさは800×400pxです。
フルサイズは800×400px
このGIFを実際に記事に埋め込んでスマホ（iPhone SE）での読み込みを検証します。
ここではChromeデベロッパーツールの使い方は割愛します。
スマホでは768×384pxのGIFが読み込まれている
注目していただきたいのはスマホで読み込まれた画像のサイズです。
アップロードしたGIFは800×400pxで、これがフルサイズ扱いです。
しかし、実際にスマホで読み込まれたのは768×384pxという別の画像です。
この768×384pxのGIFは何なのかというと、GIFのアップロード時にWordpressの機能によって自動生成（リサイズ）された"静止画"なのです。
スマホではフルサイズが読み込まれず、静止画が読み込まれてしまっているのです。
これでは当然動きません。
静止画のGIFが読み込まれてしまう原因
なぜスマホでフルサイズのGIFではない、別サイズの静止画が読み込まれるのか？
これは長くなるのでここでは最低限の内容を書きます。
最近のスマートフォンやMacにはRetinaディスプレイ（高精細ディスプレイ）と呼ばれる高解像度の画面が搭載されています。
例えばiPhone12 Proの画面サイズは390pt(px)ですが、解像度は３倍の1170pxです。
スマホやMacの画面がやたら綺麗に見える理由がこれで、簡単に言えばパソコン並みの画像をスマホで表示することが出来るのです。
このRetinaディスプレイに対応するためにWordpressでは、画像の出力時にsrcsetというコードを全画像に自動的に付与しています。
このsrcset内にはアップロード時に自動生成された画像へのURLが設定され、その中から閲覧デバイスに応じた画像サイズを出し分けているのです。
関連記事
詳しく知りたい方は関連記事をご参照ください↓
【WordPress】スマホで読み込まれる画像とsrcsetの関係。Retinaディスプレイに最適な画像を出す仕組み。
ここまでは良いのですが、これがGIFになると悪影響が出ます。
というのもGIFをアップロードした時に自動生成され、srcset属性に自動的にセットされる画像は全て"静止画"となるからです。
Retinaディスプレイに最適なサイズの画像を出し分けるsrcsetですが、フルサイズでしか動かないGIFも別サイズの静止画を用意、出力してしまっているという事です。
このsrcsetを外せば全ての端末でフルサイズのGIFが読み込まれるようになります。
ということでChromeのデベロッパーツールでsrcset属性を丸々削除してみましょう！
srcsetを削除すれば常にフルサイズが読み込まれる
削除前はスマホの確認画面でGIFが動いていませんが、srcsetを全て削除してリロードすればスマホでもGIFが動くようになります！というGIFです・ｗ・
対処法：GIFにはsrcsetを付けないようにする
前述の通り、GIFとsrcset属性の相性は最悪です。
全端末で常にGIFを動かすためにはこのsrcset属性を削除し、全端末で常にフルサイズのGIFが読み込まれるようにしてあげればOKです。
Wordpressでsrcsetを削除する方法ですが、以下のような方法があります。
- アップロード時の自動生成を停止する。
- 全ての画像からsrcsetの出力を停止する。
- 画像IDを指定してsrcsetの出力を停止する。
ここら辺が有名な方法です。
ただsrcset属性はRetinaディスプレイへの対応に重要なので、GIFを動かすためだけに全画像からsrcsetの出力を停止するのは得策ではありません。
そこで現実的な対処法としては、GIFをアップロードする時だけ自動生成を停止するという方法が個人的には１番おすすめです。
自動生成（リサイズ）を停止した状態で画像をアップロードすると、その画像の他のサイズが生成されず、srcsetも出力されなくなります。
これで晴れてフルサイズのGIFだけが全端末に読み込まれるという訳です。
参考:srcsetについて
- srcsetにはアップロード時に自動生成されたサイズの画像URLが入る。
- 出力はfunctions.phpで停止でき、コードを削除すれば元通りになる。
- 自動生成で他のサイズが作成されていなければsrcsetは付与されない。
- 生成後の画像をFTP等で削除してもsrcsetの出力内容は変更されない。
GIFをアップロードした後は自動生成を有効にしないと、それ以降の画像もフルサイズしか用意できないという点はくれぐれも注意して下さい。
functions.phpで自動生成を停止する方法
GIFアップロード時に再生成されるフルサイズ以外のGIFは全て静止画です。
ということでfunctions.phpにて、画像の自動生成を全サイズ停止します。
ポイント
アップロードが済んだら元のfunctions.phpに戻すので、編集前にバックアップを取っておけば楽です。
子テーマなどのfunctions.phpに以下のコードを追記します。
//画像アップロード時の自動生成(リサイズ)全停止
function stop_image_sizes( $new_sizes ) {
unset( $new_sizes['thumbnail'] );
unset( $new_sizes['medium'] );
unset( $new_sizes['large'] );
unset( $new_sizes['medium_large'] );
unset( $new_sizes['1536x1536'] );
unset( $new_sizes['2048x2048'] );
return $new_sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'stop_image_sizes' );
//一応scaledの生成も停止
add_filter( 'big_image_size_threshold', '__return_false' );
これでサムネ、中、大サイズの他、midium_largeなども生成されなくなります。
念のためbig_image_size_thresholdフックで2560px以上のGIFでもリサイズされないようにしています。
もう１つ注意点があって、functions.php内でadd_image_sizeを使って画像サイズを追加で設定しているとこれも自動生成されてしまいます。
他のサイズがある場合は上記のコード内に停止したいサイズを追加し、停止します。
//(例)my_post_eyecatchの自動生成のみを停止する
function stop_image_sizes( $new_sizes ) {
unset( $new_sizes['my_post_eyecatch'] );
return $new_sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'stop_image_sizes' );こんな感じです。
unset内の引数にadd_image_size内と同じ名前を入れればOKです。
add_image_sizeはコメントアウトで対応してもOK
またはadd_image_sizeをコメントアウトして一時的に無効化する方法も使えます。
このような状態でGIFをアップロードすればフルサイズ以外のGIFが生成されず、srcsetは出力されなくなります。
GIFのアップロードが済んだらコード（コメントアウト）を削除すればOK！
関連記事
コードについての詳細はこちらに書いています。
【WordPress】画像の自動生成（リサイズ）を全て停止する方法まとめ。
メディア設定で自動生成を停止する方法
Wordpressではメディア設定にあるサイズの画像がアップロード時に自動生成されるようになっています。
ここの値を０にすればアップロード時にそのサイズが生成されなくなります。
サイズを０にした画像は自動生成されない
ただしこの方法では全サイズの画像の自動生成を停止できません…
Wordpressの初期値として設定されているサイズの画像や、テーマによって使用されているサイズの画像はまだ静止画として生成されてしまいます。
とはいえそのままの設定よりは生成される画像数が少なくなるので、まだマシです。
初心者の方でfunctions.phpを触れないという方はこの方法も活かして下さい。
ポイント
GIFアップロード後に戻せるように設定値はメモしておくこと。
メディア設定を０にしてGIFをアップロードし、その後元の値に戻す感じです。
画像の再アップロードに便利なプラグイン
画像アップロード時の自動生成機能が生きている状態でアップロードした既存のGIFについては、自動生成を停止した後、既存のGIFを削除してもう一度GIFをアップロードしなければ反映されません。
手動で削除→再アップロードという作業でももちろん良いのですが、既存の画像を差し替える「Enable Media Replace」というプラグインを使えば簡単にGIFを再アップロードすることができます。
プラグインについて詳しくは関連記事（↓）をご確認ください。
-
- 「Enable Media Replace」の使い方。Wordpressの画像を差し替えるプラグインが便利！
続きを見る
ファイル名やアップロード日時を変更することなくGIFをアップロードし直すことができるので、プラグインを使う方が色々良いと思います。
srcsetがないGIFは全端末で動く
自動生成を全て停止した後、GIFをアップロードしたら最後に動作確認です。
（※下の画像は全て静止画です。GIFではありません。）
imgの出力がフルサイズのみになった！
imgタグの出力がフルサイズのみになっており、srcsetも付与されていません。
この形になっていればパソコンだけでなく、全端末でリアルタイムにGIFが動きます。
（上の画像でもGIFが動いている様子が伝わるかと思います…）
スマホでもGIFが動く
Retinaディスプレイである実機のスマホでも確認します。
フルサイズしか読み込めなくなったので、無事にGIFが動くようになりました。
参考
srcsetが付いていてもフルサイズのGIFが"最適なサイズ"と判断されて読み込まれれば動きます。アップロードするGIFのサイズによってはスマホでも普通に動くことがあるので厄介ですね。
代替案について
つらつらと書きましたが、GIFをアップロードする度に自動生成を停止し、srcset属性を削除するのは結構面倒です。
ここまでやるの！？分からない！面倒すぎ！！という方もおられる事でしょう。
そんな時の代替案を最後に書いておきます。
スマホでは"クリックしないとGIFが動かない"というのは結構良くあることです。
なぜこんなサイトが多いのか？ここまで読んで下さった方なら推測できますね！
そう、あらかじめ表示している画像はsrcsetから出力された静止画なのです。
そして画像をクリックすればフルサイズのGIFが表示され、動くという事です。
なので、GIFを埋め込むときに画像のリンク先を「メディアファイル」に設定しておいて、"スマホの方はクリックで動きます"と一言添えておいても良いかと思います。
画像クリック時に表示されるメディアファイルはフルサイズなので動くはずです。
クリックでGIFが動くという動作は定着しているので、大きな問題もないでしょう。
更にフォローするなら容量の大きいGIFを一発目に読み込まないので、ページが軽量に仕上がりますよ・ｗ・
まとめ
Wordpressにて、フルサイズでGIFを埋め込んでいるのにスマートフォンで動かない時はsrcsetを削除して下さい！
パソコン以外でもリアルタイムに記事中のGIFを動かしたいならsrcsetを削除するしかなさそうです…Wordpressが行う自動処理が仇となる珍しい内容がGIFなのです。
結構なボリュームでしたが伝わりましたか？
うちは高速化を重視していますが、GIFに関してはスマホでも動かしたいです。
なのでGIFのアップロード時にいちいち自動生成を停止しないといけません…
めんどくさいけどGIF自体そんなに使わないから良いか！( ´艸｀)
ちなみに管理画面の画像一覧でもフルサイズが読み込まれるのでGIFが動きますｗ
ではではこの辺で・ｗ・
