Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GIF in Depth
by mizdra
Dentoo.LT #17
自己紹介
mizdra
B2
JavaScript
ポケモン乱数ツールを作ってる人
近状: Scala勉強してます
今日話す内容
GIFの仕様
ちょっとマニアックな部分を断片的に
ところで…
自己紹介
mizdra
B2
JavaScript
ポケモン乱数ツールを作ってる人
近状: Scala勉強してます
このアイコンもGIFです
mizdra with GIF
GIFとは
軽量な画像フォーマットの1つ
CompuServe社によって提唱, 開発される
BMPの代替
GIFの歴史
主流の画像フォーマットの中でBMPに次いで古い
インターネット石器時代の回線は低速だったため, ほぼ無圧縮な
BMPに代わる軽量なフォーマットとして開発される
GIFの歴史
GIF89a(modified) というものもあるがライセンス関連の情報が追
加されただけ
GIF89 も存在すると解説するサイトも見られるがそんなものはない
機能 GIF87a(1987) GIF89a(1989)
インターレー...
GIFの仕様
多数のブロックから構成される
先頭に開始部と論理画面記述部, 最後に終了部がある
開始部
論理画面記述部
<Block 1>
<Block 2>
<Block 3>
...
終了部
ブロック一覧(その1)
ブロック名 説明
開始部 ファイルの開始を表わす
論理画面記述部 ファイル全体の描写領域に関する情報を定義
終了部 ファイルの終了を表わす
広域配色表 ファイル全体のカラーパレッド
狭域配色表 フレームごとのカラーパレッ...
ブロック一覧(その2)
ブロック名 説明
アプリケーション拡
張 拡張ブロック, 独自仕様の追加などに利用
グラフィック制御拡
張 描画関係のブロックの描写方法を定義
平文拡張 描写する文字データを表わす
注釈拡張 描写されないコメント, ライ...
よくあるGIFの構造
一般的な静止画としてのGIFの最小構成
画像のサイズ, 配色表, 画像データを定義しただけ
構造 説明
開始部 ファイルの開始を表わす
論理画面記述部 描写領域に関する情報を定義
広域配色表 ファイル全体のカラーパレッド
...
広域配色表
色数は論理画面記述部で定義
 2^n 色( 1 <= n <= 8 )
1色3B(バイト)のRGB
R(1B)
G(1B)
B(1B)
R(1B)
G(1B)
B(1B)
...
広域配色表
最大256色
フルカラーではない
写真には不向き
逆にアイコンなどには向いている
上の色から順に0, 1, 2, ...と番号を振り, その番号で配色表式画像デ
ータから参照される
色の表現が1Bで済む
画像記述部
画像データの大きさや描写位置を扱う
画像分離符(1B)
画像左端位置(2B)
画像上端位置(2B)
画像幅(2B)
画像高さ(2B)
B(1B)
狭域配色表フ
ラグ(1b)
飛び越し配置フ
ラグ(1b)
整列フラ
グ(1b)
予約
...
画像のサイズについて
実をいうと論理画面記述部でも画像のサイズを定義している
重複定義?
画像記述部の大きさは配色表式画像データで描写される画像の大き
さを定義
一方, 論理画面記述部はGIFファイル全体の大きさを定義
馬鹿でかい白地の背景に黒...
配色表式画像データ
LZW(Lempel–Ziv–Welch)という圧縮方式で圧縮されている
圧縮効率と高速化を重視
LZW最小符号寸法(1B)
画像データ(任意の長さ)
LZWについて
辞書式圧縮
簡単にいうとデータ列を読み込みながら番号付きで辞書という空間
に登録しておき, 同じデータが出現したら辞書の番号を参照するよ
うにする仕組み
GIFでの辞書長はLZW最小符号寸法で定義される(最大長: 4096)
辞...
LZW圧縮の詳細
をするはずだったが...
そんな時間はない
今回は割愛
詳しく知りたい人は
https://kano.arkoak.com/2014/07/27/lzw
http://nodamushi.hatenablog.com/entry/2009053...
LZW特許問題について
当時LZW圧縮技術の特許を持っていたユニシス社がGIFが普及し始
めたところで特許料を要求する方針に転換した(1994)
商用ソフトに限って特許料を要求したので多くの場合は特許料
を支払いそれ程騒ぎにはならなかった
商用...
Burn All GIFs: http://burnallgifs.org/archives/
実は特許を回避する方法もある
ユニシス社の特許はLZWにあり, GIFフォーマット自体はライセンス
フリー
特許とは別の方法を取ればライセンス違反にはならない
参考: ユニシス特許に抵触しないGIF画像のデコード:
https://web.ar...
次はアニメーションGIF
アニメーションGIFとは
動画のような画像
フレームと呼ばれる画像をコマ送りにしている
http://i.imgur.com/hXZ3NNL.gif
in
http://hayabusa.open2ch.net/test/read.cgi/li...
よくあるアニメーションGIFの構造
構造 説明
開始部 ファイルの開始を表わす
論理画面記述部 描写領域に関する情報を定義
広域配色表 ファイル全体のカラーパレッド
フレームブロック(1) [次のスライドで説明]
フレームブロック(2)
......
フレームブロック
説明のために勝手に名前を付けた
1フレームはこの3つのブロックからなる
構造 説明
グラフィック制御拡張 描画関係のブロックの描写方法を定義
画像記述部 フレームごとの描写領域に関する情報を定
義
狭域配色表(オプショ
ン)
...
グラフィック制御拡張
拡張導入符(1B)
グラフィック制御ラベル(1B)
ブロック寸法(1B)
予約(3b) 処分方法(3b) 利用者入力フラグ(1b) 透過色フラグ(1b)
遅延時間(2B)
透過色指標(1B)
ブロック終了符(1B)
遅延時間について
1/100 秒単位で指定可能
ただし...
性能の観点からビュワーによってはあまりにも短い遅延時間が
指定できなくなっている
例: Chrome/Safari/Firefoxでは 0.01s が 0.10s で描写される
アニ...
処分方法について
フレームを表示した後, 破棄する/残す等の処分方法を定義
軽量化のための工夫
値 説明
0, 1 そのまま残す
2 フレームの領域を背景色で上書き
3 処分してそのフレームが描写される前の状態に戻す
狭域配色表
構造は広域配色表と同じ
フレーム毎に広域配色表とは別の色(最大256色)を持てる
狭域配色表が無ければ広域配色表が使われる
その他
平文拡張
文字を画像の中に埋め込むことができる
ASCIIとして格納するので画素の集合として持つよりデータの節約
になる
構成
テキストの位置
格子の幅/高さ
文字区間の幅/高さ
前景色(文字色)/背景色
平文拡張
だがこれにも問題がある
フォントどうするの問題
フォントファミリ
フォントの大きさ
仕様では定義されていない
平文拡張
何より一番の問題は...
そもそもこの機能をサポートするエディタ及びビュワーは無い(僕が
確認した限りでは)
かわいそう
まあ扱いづらいし仕方がないね...
NETSCAPE2.0 アプリケーション拡張
拡張ブロックの1つ
アニメーションのループ回数を定義
ブロックを識別するための文字列を持っている
アプリケーション識別名(NETSCAPE)
アプリケーション確証符号(2.0)
ANIMEXTS1.0 アプリケーション拡張
拡張ブロックの1つ
アニメーションのループ回数を定義
構造は「NETSCAPE2.0 アプリケーション拡張」とほぼ同じ
アプリケーション識別名とアプリケーション確証符号だけが異
なる
Netscap...
NETSCAPE 2.0 ANIMEXTS 1.0
https://goo.gl/nEewFE https://goo.gl/KrgqDd
応用編
応用編
狭域配色表を使えば1つの画像で256色よりも多くの色を表現できる
上手いことやればフルカラーなGIFを実現できるのでは…?
True‑Color GIF
できる
遅延時間 0s , 処分方法 0 or 1 で狭域配色表を使って描写してい
く
ビュワーによって遅延時間が 0s (瞬時に描写)のままのものもあれ
ば 0.10s に強制的に変更されるものもある
そもそもG...
True‑Color GIF
https://habrahabr.ru/post/149728
他の選択肢
APNG
Animated PNGなるものがある
PNGの拡張
PNGの画質でアニメーションができる
2004年にMozillaが開発
https://people‑mozilla.org/~dolske/apng/demo.html
APNG
しかし...
2007年にPNGグループによってAPNGを公式仕様に含めない事が
決定される
さよなら
4大ブラウザでサポートしているのはFirefox, Safari
Can I use... Support tables for ...
APNG
でも最近になって動きが...
LINEのスタンプがAPNGに対応(2016/06)
Chromiumでサポート(2017/03)
まだChromeには入っていない
今後に注目
LINEクリエイターズスタンプ公式ブログ: http://...
以上です! ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

GIF in Depth

268 views

Published on

Dentoo.LT #17 登壇資料です

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GIF in Depth

  1. 1. GIF in Depth by mizdra Dentoo.LT #17
  2. 2. 自己紹介 mizdra B2 JavaScript ポケモン乱数ツールを作ってる人 近状: Scala勉強してます
  3. 3. 今日話す内容 GIFの仕様 ちょっとマニアックな部分を断片的に
  4. 4. ところで…
  5. 5. 自己紹介 mizdra B2 JavaScript ポケモン乱数ツールを作ってる人 近状: Scala勉強してます
  6. 6. このアイコンもGIFです mizdra with GIF
  7. 7. GIFとは 軽量な画像フォーマットの1つ CompuServe社によって提唱, 開発される BMPの代替
  8. 8. GIFの歴史 主流の画像フォーマットの中でBMPに次いで古い インターネット石器時代の回線は低速だったため, ほぼ無圧縮な BMPに代わる軽量なフォーマットとして開発される
  9. 9. GIFの歴史 GIF89a(modified) というものもあるがライセンス関連の情報が追 加されただけ GIF89 も存在すると解説するサイトも見られるがそんなものはない 機能 GIF87a(1987) GIF89a(1989) インターレース 透過 アニメーション 今日話すのはGIF89a https://www.w3.org/Graphics/GIF/spec‑gif89a.txt 日本語: https://goo.gl/h5HNhi
  10. 10. GIFの仕様 多数のブロックから構成される 先頭に開始部と論理画面記述部, 最後に終了部がある 開始部 論理画面記述部 <Block 1> <Block 2> <Block 3> ... 終了部
  11. 11. ブロック一覧(その1) ブロック名 説明 開始部 ファイルの開始を表わす 論理画面記述部 ファイル全体の描写領域に関する情報を定義 終了部 ファイルの終了を表わす 広域配色表 ファイル全体のカラーパレッド 狭域配色表 フレームごとのカラーパレッド 画像記述部 フレームごとの描写領域に関する情報を定義 配色表式画像データ フレームごとの描写する画像データを表わす
  12. 12. ブロック一覧(その2) ブロック名 説明 アプリケーション拡 張 拡張ブロック, 独自仕様の追加などに利用 グラフィック制御拡 張 描画関係のブロックの描写方法を定義 平文拡張 描写する文字データを表わす 注釈拡張 描写されないコメント, ライセンス表記等に利 用
  13. 13. よくあるGIFの構造 一般的な静止画としてのGIFの最小構成 画像のサイズ, 配色表, 画像データを定義しただけ 構造 説明 開始部 ファイルの開始を表わす 論理画面記述部 描写領域に関する情報を定義 広域配色表 ファイル全体のカラーパレッド 画像記述部 フレームごとの描写領域に関する情報を定義 配色表式画像データ フレームごとの描写する画像データを表わす 終了部 ファイルの終了を表わす
  14. 14. 広域配色表 色数は論理画面記述部で定義  2^n 色( 1 <= n <= 8 ) 1色3B(バイト)のRGB R(1B) G(1B) B(1B) R(1B) G(1B) B(1B) ...
  15. 15. 広域配色表 最大256色 フルカラーではない 写真には不向き 逆にアイコンなどには向いている 上の色から順に0, 1, 2, ...と番号を振り, その番号で配色表式画像デ ータから参照される 色の表現が1Bで済む
  16. 16. 画像記述部 画像データの大きさや描写位置を扱う 画像分離符(1B) 画像左端位置(2B) 画像上端位置(2B) 画像幅(2B) 画像高さ(2B) B(1B) 狭域配色表フ ラグ(1b) 飛び越し配置フ ラグ(1b) 整列フラ グ(1b) 予約 (2b) 狭域配色表の 寸法(3b)
  17. 17. 画像のサイズについて 実をいうと論理画面記述部でも画像のサイズを定義している 重複定義? 画像記述部の大きさは配色表式画像データで描写される画像の大き さを定義 一方, 論理画面記述部はGIFファイル全体の大きさを定義 馬鹿でかい白地の背景に黒点がポツンとある画像では画像記述部を 黒点の大きさに合わせることで配色表式画像データを小さくできる
  18. 18. 配色表式画像データ LZW(Lempel–Ziv–Welch)という圧縮方式で圧縮されている 圧縮効率と高速化を重視 LZW最小符号寸法(1B) 画像データ(任意の長さ)
  19. 19. LZWについて 辞書式圧縮 簡単にいうとデータ列を読み込みながら番号付きで辞書という空間 に登録しておき, 同じデータが出現したら辞書の番号を参照するよ うにする仕組み GIFでの辞書長はLZW最小符号寸法で定義される(最大長: 4096) 辞書の頭のほうは広域配色表or 狭域配色表のRGB列が順に格納さ れている 最大長を超えたら辞書を初期化し, 再びデータ列を読み込みながら 辞書に登録していく GIFではLZWに独自の拡張が行われている
  20. 20. LZW圧縮の詳細
  21. 21. をするはずだったが... そんな時間はない 今回は割愛 詳しく知りたい人は https://kano.arkoak.com/2014/07/27/lzw http://nodamushi.hatenablog.com/entry/20090531/124377 5161
  22. 22. LZW特許問題について 当時LZW圧縮技術の特許を持っていたユニシス社がGIFが普及し始 めたところで特許料を要求する方針に転換した(1994) 商用ソフトに限って特許料を要求したので多くの場合は特許料 を支払いそれ程騒ぎにはならなかった 商用ソフトに加え, フリーソフトにも特許料を要求するように (1999) ライセンス料: $5000 多くのフリーソフトがGIFのサポートを取りやめることに
  23. 23. Burn All GIFs: http://burnallgifs.org/archives/
  24. 24. 実は特許を回避する方法もある ユニシス社の特許はLZWにあり, GIFフォーマット自体はライセンス フリー 特許とは別の方法を取ればライセンス違反にはならない 参考: ユニシス特許に抵触しないGIF画像のデコード: https://web.archive.org/web/20130522085428/http://home page1.nifty.com/uchi/gif.htm 辞書を使用せずに解凍を行う
  25. 25. 次はアニメーションGIF
  26. 26. アニメーションGIFとは 動画のような画像 フレームと呼ばれる画像をコマ送りにしている http://i.imgur.com/hXZ3NNL.gif in http://hayabusa.open2ch.net/test/read.cgi/livejupiter/1468677521
  27. 27. よくあるアニメーションGIFの構造 構造 説明 開始部 ファイルの開始を表わす 論理画面記述部 描写領域に関する情報を定義 広域配色表 ファイル全体のカラーパレッド フレームブロック(1) [次のスライドで説明] フレームブロック(2) ... 終了部 ファイルの終了を表わす
  28. 28. フレームブロック 説明のために勝手に名前を付けた 1フレームはこの3つのブロックからなる 構造 説明 グラフィック制御拡張 描画関係のブロックの描写方法を定義 画像記述部 フレームごとの描写領域に関する情報を定 義 狭域配色表(オプショ ン) フレームごとのカラーパレッド 配色表式画像データ フレームごとの描写する画像データを表わ す
  29. 29. グラフィック制御拡張 拡張導入符(1B) グラフィック制御ラベル(1B) ブロック寸法(1B) 予約(3b) 処分方法(3b) 利用者入力フラグ(1b) 透過色フラグ(1b) 遅延時間(2B) 透過色指標(1B) ブロック終了符(1B)
  30. 30. 遅延時間について 1/100 秒単位で指定可能 ただし... 性能の観点からビュワーによってはあまりにも短い遅延時間が 指定できなくなっている 例: Chrome/Safari/Firefoxでは 0.01s が 0.10s で描写される アニメーションGIFを作る時は要注意 実は違う。クロスブラウザでのgif アニメーション再生速度の合わせ方。 (フェンリル| デベロッパーズブログ): https://blog.fenrir‑inc.com/jp/2011/08/gif_animate.html
  31. 31. 処分方法について フレームを表示した後, 破棄する/残す等の処分方法を定義 軽量化のための工夫 値 説明 0, 1 そのまま残す 2 フレームの領域を背景色で上書き 3 処分してそのフレームが描写される前の状態に戻す
  32. 32. 狭域配色表 構造は広域配色表と同じ フレーム毎に広域配色表とは別の色(最大256色)を持てる 狭域配色表が無ければ広域配色表が使われる
  33. 33. その他
  34. 34. 平文拡張 文字を画像の中に埋め込むことができる ASCIIとして格納するので画素の集合として持つよりデータの節約 になる 構成 テキストの位置 格子の幅/高さ 文字区間の幅/高さ 前景色(文字色)/背景色
  35. 35. 平文拡張 だがこれにも問題がある フォントどうするの問題 フォントファミリ フォントの大きさ 仕様では定義されていない
  36. 36. 平文拡張 何より一番の問題は... そもそもこの機能をサポートするエディタ及びビュワーは無い(僕が 確認した限りでは) かわいそう まあ扱いづらいし仕方がないね...
  37. 37. NETSCAPE2.0 アプリケーション拡張 拡張ブロックの1つ アニメーションのループ回数を定義 ブロックを識別するための文字列を持っている アプリケーション識別名(NETSCAPE) アプリケーション確証符号(2.0)
  38. 38. ANIMEXTS1.0 アプリケーション拡張 拡張ブロックの1つ アニメーションのループ回数を定義 構造は「NETSCAPE2.0 アプリケーション拡張」とほぼ同じ アプリケーション識別名とアプリケーション確証符号だけが異 なる Netscape独自の拡張を一般化したものだと思われるが詳細は不明 このブロックを生成するエディタは無い(僕が確認した限りでは) でもちゃんとChromeでも認識してくれる
  39. 39. NETSCAPE 2.0 ANIMEXTS 1.0 https://goo.gl/nEewFE https://goo.gl/KrgqDd
  40. 40. 応用編
  41. 41. 応用編 狭域配色表を使えば1つの画像で256色よりも多くの色を表現できる 上手いことやればフルカラーなGIFを実現できるのでは…?
  42. 42. True‑Color GIF できる 遅延時間 0s , 処分方法 0 or 1 で狭域配色表を使って描写してい く ビュワーによって遅延時間が 0s (瞬時に描写)のままのものもあれ ば 0.10s に強制的に変更されるものもある そもそもGIFでTrue‑Colorをやるな問題
  43. 43. True‑Color GIF https://habrahabr.ru/post/149728
  44. 44. 他の選択肢
  45. 45. APNG Animated PNGなるものがある PNGの拡張 PNGの画質でアニメーションができる 2004年にMozillaが開発 https://people‑mozilla.org/~dolske/apng/demo.html
  46. 46. APNG しかし... 2007年にPNGグループによってAPNGを公式仕様に含めない事が 決定される さよなら 4大ブラウザでサポートしているのはFirefox, Safari Can I use... Support tables for HTML5, CSS3, etc: http://caniuse.com/#feat=apng
  47. 47. APNG でも最近になって動きが... LINEのスタンプがAPNGに対応(2016/06) Chromiumでサポート(2017/03) まだChromeには入っていない 今後に注目 LINEクリエイターズスタンプ公式ブログ: http://creator‑ mag.line.me/ja/archives/1058044573.html 「アニメーションPNG(APNG)」がGoogle ChromeのベースであるChromiumでサポー ト開始‑ GIGAZINE: http://gigazine.net/news/20170315‑google‑chrome‑ chromium‑apng/
  48. 48. 以上です! ご清聴ありがとうございました!

×