ファイルサイズが大きく読み込みが遅いGIFは避けるべき？GIFのパフォーマンス問題を解決する方法

※本稿は Ire Aderinokun氏による 「Optimising GIFs for the Web」（bitsofco.de.に掲載）を翻訳・再編集したものです。

 

 

ウェブサイトでGIFはユーザをひきつけ、魅力的です。

 

しかし、GIFは重いという問題があります。GIFのそれぞれのフレームは、無損失圧縮アルゴリズムを使ってGIFイメージとして保存されます。圧縮の過程でイメージの情報が全く失われないため、ファイルサイズが大きくなってしまいます。

 

ここに、GIFのこのパフォーマンス問題を回避する方法がいくつかあります。

 

 

 

GIFをWebMに変換する

GIFに使われている無損失圧縮アルゴリズムは、驚くべきことにそんなに最適化されていないので、MP4やWebMなどのビデオフォーマットの方がより小さいファイルサイズにすることができます。

 

ビデオで設定すべき属性は以下です。

• ・autoplay: ユーザーがplayを押さなくてもすぐにビデオを再生します
• ・loop: ビデオを再生し続けます
• ・muted: GIFに音声トラックがなくても、iOSのSafariではビデオのautoplayするのにこの属性の設定が必要です
• ・playsinline: iOSのSafariでは、ビデオがフルスクリーンモードにならないために必要です
• ・poster: ビデオがダウンロードされてからイメージを表示します

 

GIFを置き換えるのに、次のビデオ要素を使います。

以下のビデオのサイズは、たったの1MBになります。

 

 

GIFをWebMに変換するのに、CloudConvertを使うと良いでしょう。

 

 

 

GIFを不可逆圧縮する

HTMLビデオが上手く機能しない場合(例えば、ブログ記事がHTMLメールで配信される場合)、GIFを使うしかありません。

不可逆圧縮にはオプションを指定することができます。GIFの品質よりも劣るように聞こえますが、きちんと機能させれば不可逆圧縮はイメージ品質を著しく落とすことはありません。

 

GIFの不可逆圧縮のツールは多くありますが、最も人気のあるツールなのが、gifsicle とgiflossy です。

gifsicleは、GIFイメージファイルを操作するためのCLIツールで、giflossyはgifsicleの不可逆圧縮オプション提供版です。

 

giflossyでGIFイメージの不可逆圧縮を使うには、次のコマンドを使います。

-03オプションは、gifsicleに複数の最適化手段から最も適したものを選ぶように指定します。–lossy=80オプションは、どの程度不可逆圧縮を行うかを指定します。あなたの要望に応じてこの数字を変更してください。-o compressed.gifオプションは、アウトプットのGIFのファイル名を指定します。

 

上記でご紹介したGIFにgifscicleを使うと、11.4MBのGIFが6MBへと、47%もファイルサイズを圧縮することができました。

 

これら2つの方法を組み合わせることで、パフォーマンスを著しく落とすことなくGIFを使うことができます。

 

 

 

 

 

※本稿は Ire Aderinokun氏による 「Optimising GIFs for the Web」（bitsofco.de.に掲載）を翻訳・再編集したものです。