大容量GIFアニメーションは、PageSpeedにどう影響するか?実験

PageSpeedInsightsGIFアニメーション
Google PageSpeedInsights

これまでも、小容量gifアニメーション(299KB、645KB、968KB、など)は、このブログに利用してきた。

関連記事         ➡

今回は、大容量gifアニメーションファイルが、サイトの表示速度にどう影響するかを確認(実験)です。サイトに.gifアニメーションファイルをアップしようとしたら

ef65-09-1280-720 -62.4-63.2MB-front-wheel.gif は、このサイトのアップロードサイズ上限を超えています。

だって、

39秒6.39MB)のmp4動画をカットして7秒2.34MB)のmp4動画に再編集
②07秒(2.34MB)のmp4動画を、Convertioサイトで22.8MBGIF動画に変換
(今のところBest)
これで、アップロードサイズ上限の30MBをクリアできる。
③GIF Compressorサイトで、22.8MBのGIF動画を圧縮してみたが、結果22.6MB

Page Speedに大きな影響があった場合は、gifアニメーションを削除して、YouTubemp4でアップして限定公開(URLが分からないと直接は見られない)で利用することにします。

レンタルサーバで大容量Gifアニメーションを使う?

MP4動画ならYouTubeの高性能サーバを利用できるのでPage Speed(PageSpeedInsightsを意識する必要(サイトの表示速度が遅くなることを気にする必要)は無いのだが・・・

MP4をGIFに変換

YouTubeに上げる程でもない動画(30秒から2分程度のMP4)を自分のブログで利用するためにGIFアニメーションに変換してみた。

39秒(6.39MB)のmp4動画を、GIFに変換すると、63.2MBと容量的には大きくなる。

これが問題にならなければ良いのだが、(問題となった為、mp4動画を再編集)

GIFを圧縮

GIFを最高の画質と圧縮方式で圧縮サイト(オンラインで瞬時に様々なGIFのファイルサイズを縮小できるサイト)を利用しても、62.4MB程度とあまり小さくはならない。

これは、圧縮サイトのせいではなく、GIFというファイル形式の性質らしい。

静止画(写真.png.jpeg.jpgなど)ファイルなら90%圧縮とかができるのだが、結果から.gif場合は、あまり圧縮できなかった。

 Gifアニメーションは、制約が多くあるらしくオンラインで圧縮できるサイトで容量制限が多い

Gif圧縮サイト色々

  • Compressor.io:JPEG, PNG, GIF, SVGの圧縮ができる。GIFは上限10MBまで。
  • EZGIF.COM:JPEG, PNG, GIFの圧縮ができる。GIFアニメを編集、作ることもできる。GIFは上限12MBまで。
  • GIF Compressor:一度に複数のファイルを圧縮できる。最大50MBまでのGIFをアップロードできる。
  • I💛IMG :GIFを最高の画質と圧縮方式で圧縮。オンラインで瞬時に様々なGIFのファイルサイズを縮小できます。(容量制限不明筆者はここで最大77.7MBのGifアニメーションを利用。)

どちらも、プラレール改造ログで使用する予定の動画す。

大容量.gifアニメーションを使おうと思ったが!

大容量.gifアニメーションはWordPressにアップできない
このサイトのアップロードサイズ上限を超えています。
WordPressの「管理画面>メディア」から見ると、アップロードできるファイルの最大サイズにはあらかじめ限界を設けられています。
WordPressの「管理画面>メディア」から見ると、アップロードできる ファイルの最大サイズにはあらかじめ限界を設けられています。

1つ目の.gif

           左右のカーブでスムーズな動きを確保する為に!

ef65-09-1280-720 -62.4-63.2MB-front-wheel.gif は、このサイトのアップロードサイズ上限を超えています。

22.6MBのGIFアニメーションをアップ

07秒のmp4動画(2.34MB)を、GIF動画に変換(22.8MB)後、圧縮(22.6MB)
07秒のmp4動画(2.34MB)を、GIF動画に変換(22.8MB)後、圧縮(22.6MB)

画質劣化はご容赦ください(1280×720ピクセル)の場合

Smallサイズ (200×114pix 1.45 MB )でも、mp4からの変換では⇩この様になります。

1つ目の.mp4

【限定公開】左右のカーブでスムーズな動きを確保する為に!

もう一つのGIF

           バランスを保つために重り(磁石と強力磁石)を設置

ef65-10-1280-720 -76.7-77.7MB-front-weight.gif は、このサイトのアップロードサイズ上限を超えています。

こちらは、1280×720の5.18MBの.mp4動画を
1200×625の29MBの.gifに変換したもの(1280×720だと30MBを超えてしまった)

こちらのGIF変換サイトの方が劣化がすくない。 ラッコ動画をGIFに変換

変換元のファイルを選択して
開始: 秒、終了: 秒、速度: ミリ秒、: px、高さ: pxを指定して「GIF作成

動画をGIFに変換
動画をGIFに変換

Shotcutで896×504 5fpsでGIFアニメを作成(29.9MB)(元.mp4は上記と同じ)

896x504px-5fps GIF
896x504px-5fps GIF

2つの.mp4

【限定公開】バランスを保つために重り(磁石と強力磁石)を設置

このページのPageSpeedInsightsの結果は?

GoogleのPageSpeedInsightsで測定した結果をキャプチャして貼り付けます。

PageSpeedInsights
Google PageSpeedInsights

結論

22.6MBのGIFアニメーションを追加してもPageSpeedInsightsに影響なし

但し、同じ動画でもYouTubeサイトのPageSpeedInsightsの評価(スピード)が必ずしも高いものではありません(以下は、YouTubeサイトでの実測値)

YouTube動画サイトのパフォーマンス

YouTube-モバイルでの結果

Youtubeの評価:モバイルでのPageSpeedInsights結果
Youtubeの評価:モバイルでのPageSpeedInsights結果

YouTube-パソコンでの結果

Youtubeの評価:パソコンでのPageSpeedInsights結果
Youtubeの評価:パソコンでのPageSpeedInsights結果

YouTubeの高性能サーバでも、この様な状況ですから、あまり気にすることも無いかと思います。

コメント

タイトルとURLをコピーしました