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
39
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
62
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
64
Web Standards Interop 2022
1000ch
0
290
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
790
Other Decks in Technology
See All in Technology
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
140
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
640
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.5k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
4.9k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
430
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
150
Goで作って学ぶWebSocket
ryuichi1208
3
2.7k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
3
340
AIエージェント入門
minorun365
PRO
31
17k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Embracing the Ebb and Flow
colly
84
4.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Six Lessons from altMBA
skipperchong
27
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
We Have a Design System, Now What?
morganepeng
51
7.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
KATA
mclloyd
29
14k
Designing for humans not robots
tammielis
250
25k
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