Introduction to WebP

A new image format for the Web

WebP - A new image format for the Web by @1000ch

@1000ch

Web アプリケーション開発を専門とするソフトウェアエンジニア。企業で働く傍ら、技術顧問として複数企業のエンジニアリングに関わり、高品質で維持しやすい Web アプリケーションを作るための活動を続けている。

WebP - A new image format for the Web by @1000ch

WebP とは？

  • Google が開発する新しい画像フォーマット
  • 可逆/非可逆圧縮・アルファチャネル・アニメーションなど豊富な機能
  • 高圧縮率でファイルサイズがとても軽い
WebP - A new image format for the Web by @1000ch

どのくらい軽量なのか

  • 可逆圧縮 → PNG 比で約 26 %小さい
  • 非可逆圧縮 → JPEG 比で約 25 %~ 34 %小さい
  • アルファチャネル付きの非可逆圧縮 → PNG 比で3倍以上小さい
WebP - A new image format for the Web by @1000ch

1000ch.jpg (圧縮レベル80で33KB)

WebP - A new image format for the Web by @1000ch

1000ch.webp (圧縮レベル80で15KB)

WebP - A new image format for the Web by @1000ch

利用に向けて

WebP - A new image format for the Web by @1000ch

サポート環境

  • Chrome/Firefox/Safari を含む最新モダンブラウザ
  • macOS 11 Big Sur or later
  • Windows 10 or later
WebP - A new image format for the Web by @1000ch

iOS 14.0 未満の Safari だと…

WebP - A new image format for the Web by @1000ch

iOS 14.0 未満の Chrome だと…

WebP - A new image format for the Web by @1000ch

非対応ブラウザのために

  • 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

各種変換ツール

WebP - A new image format for the Web by @1000ch

CLI ツール

  • cwebp: Homebrew からもインストール可
  • cwebp-bin: cwebp の Node.js ラッパー
WebP - A new image format for the Web by @1000ch

GUI ツール

  • Squoosh: 画像の最適化やフォーマットの変換などを行う Web アプリ
  • WebPonize - PNG/JPEG/GIF を WebP に変換する macOS アプリ
WebP - A new image format for the Web by @1000ch

WebPonize

Drag & Drop!

WebP - A new image format for the Web by @1000ch

WebPonize の機能

  • ImageOptim にそっくりなインターフェース
  • ドラッグアンドドロップで変換できる、複数ファイルのドロップも OK
  • PNG・JPEG・GIF（アニメーションGIF）に対応している
  • オプションで圧縮率やアルファチャネルを設定できる
WebP - A new image format for the Web by @1000ch