Introduction to WebP

2015年3月23日に開催された #KaumoCTOMeetup の「Introduction to WebP」の発表資料です。

Transcript

1. Introduction to WebP A new image format for the Web WebP - A new image format for the Web by @1000ch 1
2. @1000ch Web アプリケーション開発を専門とするソフトウェア エンジニア。企業で働く傍ら、技術顧問として複数企業 のエンジニアリングに関わり、高品質で維持しやすい Web アプリケーションを作るための活動を続けてい る。 WebP - A new image format for the Web by @1000ch 2
3. WebP とは？ Google が開発する新しい画像フォーマット 可逆/非可逆圧縮・アルファチャネル・アニメーションなど豊富な機能 高圧縮率でファイルサイズがとても軽い WebP - A new image format for the Web by @1000ch 3
4. どのくらい軽量なのか 可逆圧縮 → PNG 比で約 26 %小さい 非可逆圧縮 → JPEG 比で約 25 %~ 34 %小さい アルファチャネル付きの非可逆圧縮 → PNG 比で3倍以上小さい WebP - A new image format for the Web by @1000ch 4
5. 1000ch.jpg (圧縮レベル80で33KB) WebP - A new image format for the Web by @1000ch 5
6. 1000ch.webp (圧縮レベル80で15KB) WebP - A new image format for the Web by @1000ch 6
7. 利用に向けて WebP - A new image format for the Web by @1000ch 7
8. サポート環境 Chrome/Firefox/Safari を含む最新モダンブラウザ macOS 11 Big Sur or later Windows 10 or later WebP - A new image format for the Web by @1000ch 8
9. iOS 14.0 未満の Safari だと… WebP - A new image format for the Web by @1000ch 9
10. iOS 14.0 未満の Chrome だと… WebP - A new image format for the Web by @1000ch 10
11. 非対応ブラウザのために vwebp で表示し、dwebp でデコードしたり、Chrome Frame を使ってきた WebPJS で .webp を dataURI に変換する Accept: image/webp がない場合に、異なる画像フォーマットを返却する <picture> 要素と <source type="image/webp"> 要素で条件分岐する やりようはいくらでもある WebP - A new image format for the Web by @1000ch 11
12. 各種変換ツール WebP - A new image format for the Web by @1000ch 12
13. CLI ツール cwebp: Homebrew からもインストール可 cwebp-bin: cwebp の Node.js ラッパー WebP - A new image format for the Web by @1000ch 13
14. GUI ツール Squoosh: 画像の最適化やフォーマットの変換などを行う Web アプリ WebPonize - PNG/JPEG/GIF を WebP に変換する macOS アプリ WebP - A new image format for the Web by @1000ch 14
15. WebPonize Drag & Drop! WebP - A new image format for the Web by @1000ch 15
16. WebPonize の機能 ImageOptim にそっくりなインターフェース ドラッグアンドドロップで変換できる、複数ファイルのドロップも OK PNG・JPEG・GIF（アニメーションGIF）に対応している オプションで圧縮率やアルファチャネルを設定できる WebP - A new image format for the Web by @1000ch 16