Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to WebP
Search
Shogo Sensui
March 23, 2015
Technology
0
27
Introduction to WebP
2015年3月23日に開催された #KaumoCTOMeetup の「Introduction to WebP」の発表資料です。
Shogo Sensui
March 23, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.1k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
110
Web Share API
1000ch
0
120
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
40
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
64
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
66
Web Standards Interop 2022
1000ch
0
300
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
790
Other Decks in Technology
See All in Technology
What's new in Go 1.24?
ciarana
1
110
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
190
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
470
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
210
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
250
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.1k
AIエージェント開発のノウハウと課題
pharma_x_tech
6
4k
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
660
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Faster Mobile Websites
deanohume
306
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
What's in a price? How to price your products and services
michaelherold
244
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
KATA
mclloyd
29
14k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Transcript
Introduction to WebP A new image format for the Web
WebP - A new image format for the Web by @1000ch 1
@1000ch Web アプリケーション開発を専門とするソフトウェア エンジニア。企業で働く傍ら、技術顧問として複数企業 のエンジニアリングに関わり、高品質で維持しやすい Web アプリケーションを作るための活動を続けてい る。 WebP -
A new image format for the Web by @1000ch 2
WebP とは? Google が開発する新しい画像フォーマット 可逆/非可逆圧縮・アルファチャネル・アニメーションなど豊富な機能 高圧縮率でファイルサイズがとても軽い WebP - A new
image format for the Web by @1000ch 3
どのくらい軽量なのか 可逆圧縮 → PNG 比で約 26 %小さい 非可逆圧縮 → JPEG
比で約 25 %~ 34 %小さい アルファチャネル付きの非可逆圧縮 → PNG 比で3倍以上小さい WebP - A new image format for the Web by @1000ch 4
1000ch.jpg (圧縮レベル80で33KB) WebP - A new image format for the
Web by @1000ch 5
1000ch.webp (圧縮レベル80で15KB) WebP - A new image format for the
Web by @1000ch 6
利用に向けて WebP - A new image format for the Web
by @1000ch 7
サポート環境 Chrome/Firefox/Safari を含む最新モダンブラウザ macOS 11 Big Sur or later Windows
10 or later WebP - A new image format for the Web by @1000ch 8
iOS 14.0 未満の Safari だと… WebP - A new image
format for the Web by @1000ch 9
iOS 14.0 未満の Chrome だと… WebP - A new image
format for the Web by @1000ch 10
非対応ブラウザのために 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
各種変換ツール WebP - A new image format for the Web
by @1000ch 12
CLI ツール cwebp: Homebrew からもインストール可 cwebp-bin: cwebp の Node.js ラッパー
WebP - A new image format for the Web by @1000ch 13
GUI ツール Squoosh: 画像の最適化やフォーマットの変換などを行う Web アプリ WebPonize - PNG/JPEG/GIF を
WebP に変換する macOS アプリ WebP - A new image format for the Web by @1000ch 14
WebPonize Drag & Drop! WebP - A new image format
for the Web by @1000ch 15
WebPonize の機能 ImageOptim にそっくりなインターフェース ドラッグアンドドロップで変換できる、複数ファイルのドロップも OK PNG・JPEG・GIF(アニメーションGIF)に対応している オプションで圧縮率やアルファチャネルを設定できる WebP -
A new image format for the Web by @1000ch 16