Recomendados
Más contenido relacionado
Último
Último (7)
Destacado
Destacado (20)
GIF in Depth
- 1. GIF in Depth by mizdra Dentoo.LT #17
- 4. ところで…
- 9. GIFの歴史 GIF89a(modified) というものもあるがライセンス関連の情報が追 加されただけ GIF89 も存在すると解説するサイトも見られるがそんなものはない 機能 GIF87a(1987) GIF89a(1989) インターレース 透過 アニメーション 今日話すのはGIF89a https://www.w3.org/Graphics/GIF/spec‑gif89a.txt 日本語: https://goo.gl/h5HNhi
- 10. GIFの仕様 多数のブロックから構成される 先頭に開始部と論理画面記述部, 最後に終了部がある 開始部 論理画面記述部 <Block 1> <Block 2> <Block 3> ... 終了部
- 11. ブロック一覧(その1) ブロック名 説明 開始部 ファイルの開始を表わす 論理画面記述部 ファイル全体の描写領域に関する情報を定義 終了部 ファイルの終了を表わす 広域配色表 ファイル全体のカラーパレッド 狭域配色表 フレームごとのカラーパレッド 画像記述部 フレームごとの描写領域に関する情報を定義 配色表式画像データ フレームごとの描写する画像データを表わす
- 12. ブロック一覧(その2) ブロック名 説明 アプリケーション拡 張 拡張ブロック, 独自仕様の追加などに利用 グラフィック制御拡 張 描画関係のブロックの描写方法を定義 平文拡張 描写する文字データを表わす 注釈拡張 描写されないコメント, ライセンス表記等に利 用
- 13. よくあるGIFの構造 一般的な静止画としてのGIFの最小構成 画像のサイズ, 配色表, 画像データを定義しただけ 構造 説明 開始部 ファイルの開始を表わす 論理画面記述部 描写領域に関する情報を定義 広域配色表 ファイル全体のカラーパレッド 画像記述部 フレームごとの描写領域に関する情報を定義 配色表式画像データ フレームごとの描写する画像データを表わす 終了部 ファイルの終了を表わす
- 14. 広域配色表 色数は論理画面記述部で定義 2^n 色( 1 <= n <= 8 ) 1色3B(バイト)のRGB R(1B) G(1B) B(1B) R(1B) G(1B) B(1B) ...
- 15. 広域配色表 最大256色 フルカラーではない 写真には不向き 逆にアイコンなどには向いている 上の色から順に0, 1, 2, ...と番号を振り, その番号で配色表式画像デ ータから参照される 色の表現が1Bで済む
- 19. LZWについて 辞書式圧縮 簡単にいうとデータ列を読み込みながら番号付きで辞書という空間 に登録しておき, 同じデータが出現したら辞書の番号を参照するよ うにする仕組み GIFでの辞書長はLZW最小符号寸法で定義される(最大長: 4096) 辞書の頭のほうは広域配色表or 狭域配色表のRGB列が順に格納さ れている 最大長を超えたら辞書を初期化し, 再びデータ列を読み込みながら 辞書に登録していく GIFではLZWに独自の拡張が行われている
- 20. LZW圧縮の詳細
- 23. Burn All GIFs: http://burnallgifs.org/archives/
- 25. 次はアニメーションGIF
- 27. よくあるアニメーションGIFの構造 構造 説明 開始部 ファイルの開始を表わす 論理画面記述部 描写領域に関する情報を定義 広域配色表 ファイル全体のカラーパレッド フレームブロック(1) [次のスライドで説明] フレームブロック(2) ... 終了部 ファイルの終了を表わす
- 28. フレームブロック 説明のために勝手に名前を付けた 1フレームはこの3つのブロックからなる 構造 説明 グラフィック制御拡張 描画関係のブロックの描写方法を定義 画像記述部 フレームごとの描写領域に関する情報を定 義 狭域配色表(オプショ ン) フレームごとのカラーパレッド 配色表式画像データ フレームごとの描写する画像データを表わ す
- 29. グラフィック制御拡張 拡張導入符(1B) グラフィック制御ラベル(1B) ブロック寸法(1B) 予約(3b) 処分方法(3b) 利用者入力フラグ(1b) 透過色フラグ(1b) 遅延時間(2B) 透過色指標(1B) ブロック終了符(1B)
- 30. 遅延時間について 1/100 秒単位で指定可能 ただし... 性能の観点からビュワーによってはあまりにも短い遅延時間が 指定できなくなっている 例: Chrome/Safari/Firefoxでは 0.01s が 0.10s で描写される アニメーションGIFを作る時は要注意 実は違う。クロスブラウザでのgif アニメーション再生速度の合わせ方。 (フェンリル| デベロッパーズブログ): https://blog.fenrir‑inc.com/jp/2011/08/gif_animate.html
- 31. 処分方法について フレームを表示した後, 破棄する/残す等の処分方法を定義 軽量化のための工夫 値 説明 0, 1 そのまま残す 2 フレームの領域を背景色で上書き 3 処分してそのフレームが描写される前の状態に戻す
- 33. その他
- 39. NETSCAPE 2.0 ANIMEXTS 1.0 https://goo.gl/nEewFE https://goo.gl/KrgqDd
- 40. 応用編
- 42. True‑Color GIF できる 遅延時間 0s , 処分方法 0 or 1 で狭域配色表を使って描写してい く ビュワーによって遅延時間が 0s (瞬時に描写)のままのものもあれ ば 0.10s に強制的に変更されるものもある そもそもGIFでTrue‑Colorをやるな問題
- 44. 他の選択肢
- 46. APNG しかし... 2007年にPNGグループによってAPNGを公式仕様に含めない事が 決定される さよなら 4大ブラウザでサポートしているのはFirefox, Safari Can I use... Support tables for HTML5, CSS3, etc: http://caniuse.com/#feat=apng
- 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/