はじめに
最近、通信とデバイスの性能の改善により、どこでも多様な形式のメディアーを楽しめます。
その中でGIFはよく見えるフォーマットの中で一つである、動く画像のフォーマットです。
でも、GIFはWebで効率的なフォーマットではありません。
GIFの仕様を読むと下記の文言があります。
今回はWeb上でGIFを代替する方法をご紹介させていただきます。
The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.
つまり、GIFはアニメーション用のフォーマットではないということです。
GIFの代わりにH.264形式の動画フォーマットを使うと同じ品質でも、
約10倍のサイズ的な効率が上がります。
そしてGIFはGPUで処理が出来ず、CPUを使わなければなりません。
CPUは使えれば使いほどバッテリー消耗や発熱の原因になりますので、動画形式にコンバートするのをお勧めいたします。
動画フォーマットの交換性について心配があると思いますが、下記の資料でほとんどのモダンブラウザーとデバイスで使えるのを確認できます。
Can I Use h264?
Android Developers — Supported Media Formats
iPhone OS Technology Overview
HTML5 Video Tag
<video>タグでWeb上でより小さいサイズでGIFを代替ができます。
下記は例です。
<!-- OLD GIF Markup -->
<img src="https://cdn.my-awesome-website.com/images/awesome-animation.gif" alt="My awesome animated image">
<!-- NEW Video Markup -->
<video autoplay loop muted playsinline poster='poster.png'>
<!-- Specify video sources -->
<source src="https://cdn.my-awesome-website.com/images/awesome-and-efficient-animation.mp4" type="video/mp4">
<source src="https://cdn.my-awesome-website.com/images/awesome-and-efficient-animation.webm" type="video/webm">
<!-- FALLBACK for legacy browsers! -->
<img src="https://cdn.my-awesome-website.com/images/awesome-animation.gif" alt="My awesome animated image">
</video>
各attributeの意味は下記になります。
autoplay:ユーザがplayボタンを押さなくても自動に再生されます。
loop:動画を無限に繰り返します。
muted:GIFに音がなくてもiOSのSafariのためには宣言が要ります。
playsinline:iOSのSafariのために、動画がフールスクリーンにならないように要ります。
poster:動画をダウンロード中に表示させるイメージです。
GIFをwebmにコンバートするツールには
CloudConvert, Cloudinaryなどがあります。
Giphy
Giphyを使うと簡単にGIFを動画フォーマットにコンバートできます。
Webサイトを作るときにほぼ変わらない静的なGIFはこちらで変換して
あげるのが便利だと思います。
GIFの圧縮
どうしてもvideoではなくGIFをそのまま使いたい場合にはGIFを圧縮する方法もあります。
以下はgifsicleというCLIツールです。
brewでインストールできます。
brew install gifsicle
例で使い方をご紹介させていただきます。
gifsicle -O3 --lossy=80 -o compressed.gif original.gif
optionの意味は下記になります。
-03:gifsicleに一番適切な圧縮方法を3回探してほしいを伝えます。
--lossy=80:圧縮率です。
-o compressed.gif:出力ファイル名です。
上記で11.4MBのGIFファイルが6MBのGIFに圧縮され、サイズが47%減りました。
その他
上記2つ以外にもオープンソースソフトが色々ありますので、リンクを残します。
ImageOptim
Giffy
Reddit Anti GIF Bot
今回の記事は下記のページを参照して作成いたしました。
GIF 사용을 멈춰주세요!
Optimising GIFs for the Web
ご覧いただきありがとうございます。