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
18
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
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
32
Web Share API
1000ch
0
15
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
17
開発生産性と組織 / Productivity and Organization
1000ch
0
990
なぜ私達は働くのか / Why We Work?
1000ch
0
37
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
23
Web Standards Interop 2022
1000ch
0
240
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
690
HTML Optimization for Web Performance
1000ch
0
650
Other Decks in Technology
See All in Technology
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
660
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
100
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
580
JSON攻略法.pdf
miyakemito
8
5.1k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
570
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
1k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
180
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
150
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Designing for humans not robots
tammielis
248
25k
The Pragmatic Product Professional
lauravandoore
25
5.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
BBQ
matthewcrist
80
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Visualization
eitanlees
136
14k
Raft: Consensus for Rubyists
vanstee
132
6.3k
GitHub's CSS Performance
jonrohan
1025
450k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Web Components: a chance to create the future
zenorocha
305
41k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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