<p class="thumb"><img src="http://cdn.zako.org/images/2014/02/gfycat.png" alt="gfycat" width="500" height="238" class="alignnone size-full wp-image-27750" /></p>
<p>手軽に再生できてサイト訪問者に内容を見てもらいやすいGifアニメーションの動画。しかし難点は、そのファイル容量の大きさ。使えば使うほどにサーバー容量を食ってしまいます。</p>
<p>今回はそのGIFアニメーションの容量の問題を、解決してくれるサービスをご紹介します。</p><!--more-->
<h3 class="header-label">GIFアニメをWebM形式の動画に変換する「gfycat」</h3>
<p>「<a target="_blank" href="http://gfycat.com/">Gfycat</a>」は、<strong>GIFアニメーションをWebM形式の動画に変換</strong>してくれるオンラインサービス。</p>
<p>HTML5 Videoなので一部のブラウザで再生できないものの、GIFアニメーションの約1/10のファイル容量に圧縮し、動画としてサイト上で再生させることができます。</p>

<h4 class="tips">ファイル容量が１０分の１以下になる</h4>

<p>以下がgfycatで動画に変換してファイル容量が圧縮された結果です</p>

<ul><li>GIFアニメのサイズ: 2M</li><li>Gfyで変換後のサイズ: 183k</li></ul>

<p>YouTubeも採用したHTML5のVideoタグに対応するWebM形式に変換することで、ファイルサイズがアニメーションGIFの１０分の１以下になりました。</p>

<h4 class="tips">カンタンな変換作業</h4>
<p><img src="http://cdn.zako.org/images/2014/02/gfycat.png" alt="gfycat" width="500" height="238" class="alignnone size-full wp-image-27750" /><br />変換の手順は非常にシンプル。アニメーションGIFのファイルをサイト上でアップロードし、</p>

<p><img src="http://cdn.zako.org/images/2014/02/gfycat1.png" alt="gfycat1" width="500" height="286" class="alignnone size-full wp-image-27749" /><br />変換された動画を、右クリックメニューからダウンロードして保存するだけです。</p>

<h4 class="tips">サンプル埋め込み動画</h4>
<video src="http://cdn.zako.org/images/2014/02/ThreadbareSilverAztecant.webm" autoplay loop width="520"></video>
<p>こちらがWebM形式に変換した動画。videoタグを使って埋込み、自動再生とループ再生を設定していますので、GIFアニメ同様の動きも再現できますね。もちろん、通常の動画のようにプレイヤーを表示することも可能です。</p>


<p>興味があるかたは<a target="_blank" href="http://gfycat.com/">Gfycat</a>へどうぞ。</p>