デザイン

デザイン

【圧倒的にGIFが軽く、扱いやすくなる!】WebサイトのためにGIFを最適化する方法

407 views

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

 

 

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

 

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

 

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

 

 

 

HTMLビデオを使う

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

 

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

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

 

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

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

 

 

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

 

 

 

不可逆圧縮

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%もファイルサイズを圧縮することができました。

GIF②

 

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

 

 

 

 

 

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

関連記事

おすすめ記事