ITエンジニア/デザイナ向けにオープンソースを毎日紹介

gif.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

画像は高品質でサイズが大きければ良い、なんて思われがちですが決してそれだけでは価値ははかれません。そう感じさせてくれるのがアニメーションGIFの存在です。今回はクライアントサイドだけでGIFを生成するgif.jsを紹介します。


表示されているのはGIF画像ですが、実際の元画像はJPEGになります。しかも複数の画像を組み合わせてアニメーションGIFを生成する事もできます。


上の写真と比べてちょっと動いているのが分かるかと思います。速度だって自在に変更できます。


こちらはクオリティを変更できるデモ。品質を落とせばファイルサイズも小さくなります。


品質を高くすればちょっとしたノイズが目立たなくなりますが、それでもGIFの限界はあると言えるでしょう。

GIFの生成処理は重たいため、Web Workersを使ってバックグラウンドで処理を行っているのが特徴です。また、File APIを使っているため、対応ブラウザはGoogle ChromeやFirefox 17以上、Safari6以上、IE10、iOS6のMobile Safari以上に限定されます。


MOONGIFTはこう見る

JavaScriptによる画像操作も大規模なものでない限りは難しくなくなってきました。File Readerを使えばファイルアップロードする前にファイルの内容を読み込んでチェックしたりできます。画像であれば予めリサイズしたりすればアップロードにかかる時間も短くなります。バックグラウンドでアップロード処理を開始しておく事もできます。

画像コンテンツはオンラインに溢れているため、面白いアイディアさえあれば素材には困りません。アニメーションGIFを使ってVine風のサービスだって作れるかも知れません。

gif.js

jnordberg/gif.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2