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
42
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
65
新しいメルカリ 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
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
340
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
250
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
520
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
990
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
370
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
183
22k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Six Lessons from altMBA
skipperchong
27
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Adopting Sorbet at Scale
ufuk
75
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
How STYLIGHT went responsive
nonsquared
99
5.4k
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