1 of 70
WebP Rewind
2010-2020
2 of 70
3 of 70
Happening now!
4 of 70
How did we get there?
Happening now!
5 of 70
Story time!
Let’s get back to around 2009
6 of 70
See the problem?
Image credit: VersionMuseum
7 of 70
8 of 70
And it got worse...
Image credit: Imgur (in WebP format!)
9 of 70
The idea
2010 : On2 acquisition, VP8 released
VP8 is here for video, let’s use it for image.
10 of 70
The idea
2010 : On2 acquisition, VP8 released
VP8 is here for video, let’s use it for image.
It’s there anyway. It’s free. Users’ interest first .
11 of 70
Support - History [ caniuse ]
| |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
2017 |
2018 |
2019 |
2020 |
| libwebp |
v0.1.2 |
v0.1.3 |
v0.2.1 |
|
|
|
|
|
|
|
|
| Chrome Android |
|
9 4.0 |
23 4.3 |
|
|
|
|
|
|
|
|
Off we go!
12 of 70
Support - History [ caniuse ]
| |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
2017 |
2018 |
2019 |
2020 |
| libwebp |
v0.1.2 |
v0.1.3 |
v0.2.1 |
|
|
|
|
|
|
|
|
| Chrome Android |
|
9 4.0 |
23 4.3 |
|
|
|
|
|
|
|
|
| Opera* |
|
11.10 |
12.10 |
|
|
|
|
|
|
|
|
Fast forward to 2020...
13 of 70
Support - History [ caniuse ]
| |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
2017 |
2018 |
2019 |
2020 |
| libwebp |
v0.1.2 |
v0.1.3 |
v0.2.1 |
v0.3.1 |
v0.4.0 |
v0.4.4 |
v0.5.2 |
v0.6.1 |
v1.0.0 |
|
v1.1.0 |
| Chrome Android |
|
9 4.0 |
23 4.3 |
32 |
|
|
|
|
|
|
|
| Opera* |
|
11.10 |
12.10 |
|
19 |
|
|
|
|
|
|
| UC browser |
|
|
|
|
|
|
12.12 |
|
|
|
|
| MS-Edge |
|
|
|
|
|
|
|
|
18 |
|
|
| Firefox |
|
|
|
|
|
|
|
|
|
65 |
|
| Safari |
|
|
|
|
|
|
|
|
|
|
14 |
The blog-post
Trouble times
consolidation
maintenance
14 of 70
Support - History [ caniuse ]
| |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
2017 |
2018 |
2019 |
2020 |
| libwebp |
v0.1.2 |
v0.1.3 |
v0.2.1 |
v0.3.1 |
v0.4.0 |
v0.4.4 |
v0.5.2 |
v0.6.1 |
v1.0.0 |
|
v1.1.0 |
| Chrome Android |
|
9 4.0 |
23 4.3 |
32 |
|
|
|
|
|
|
|
| Opera* |
|
11.10 |
12.10 |
|
19 |
|
|
|
|
|
|
| UC browser |
|
|
|
|
|
|
12.12 |
|
|
|
|
| MS-Edge |
|
|
|
|
|
|
|
|
18 |
|
|
| Firefox |
|
|
|
|
|
|
|
|
|
65 |
|
| Safari |
|
|
|
|
|
|
|
|
|
|
14 |
The blog-post
Trouble times
consolidation
maintenance
15 of 70
Shout-out to lesser visible allies
CDNs (Akamai, Cloudflare, Cloudinary, …)
Mobile Apps (+Android Studio)
Mobile Game devs
16 of 70
Other formats? Busy decade(s)!
animated
still
images
17 of 70
Was it worth it?
The lossy case
18 of 70
Was it worth it?
Transfer
decode
JPEG
Not at scale!
19 of 70
Was it worth it?
Transfer
decode
JPEG
Transfer
decode
WebP
😎
20 of 70
Was it worth it?
Transfer
decode
JPEG
Transfer
decode
WebP
😎
Transfer
decode
WebP
incr.
user engagement be like...
😎
21 of 70
Athens, 2015
1 GB = 10 €
22 of 70
And most importantly
It was useful for transitioning into
optimized and responsive Web
cnn.com:
23 of 70
Lesson learnt
Early Errors
2010-2014
24 of 70
Lesson learnt
Early Errors
image/webp = ???
25 of 70
Lesson learnt
Early Errors
Hardware = meh
26 of 70
Lesson learnt
Nice surprises
27 of 70
Hindsight look-back
Image Codec
Vs
Video Codec
28 of 70
Digitalization of the World, circa 2000
2000
2020
29 of 70
“Capture”
“Web”
2020
30 of 70
Capture
“Web”
Video-image codec
31 of 70
“Web”
Alpha
Lossless
Thumbnail preview
Interruptibility
animation
32 of 70
Deploying at scale.
33 of 70
Deploying at scale.
The hardest is the first B users.
34 of 70
Deploying at scale.
Keep it simple and useful
FLEXIBILITY = LIABILITY
35 of 70
Deploying at scale.
open-sourced bulletproof implementation
offered royalty-free
speaking of which...
36 of 70
Contributors. Thanks!
- Aidan O'Loan
- Alan Browning
- Charles Munger
- Cheng Yi
- Christian Duvivier
- Djordje Pesut
- Hui Su
- James Zern
- Jan Engelhardt
- Jehan
- Johann Koenig
- Jovan Zelincevic
- Noel Gordon
- Oliver Wolff
- Owen Rodley
- Parag Salasakar
- Pascal Massimino
- Paweł Hajdan, Jr
- Pierre Joye
- Sam Clegg
- Scott Hancher
- Scott LaVarnway
- Scott Talbot
- Slobodan Prijic
- Jyrki Alakuijala
- Konstantin Ivlev
- Lode Vandevenne
- Lou Quillio
- Mans Rullgard
- Marcin Kowalczyk
- Martin Olsson
- Maryla Ustarroz
- Mikołaj Zalewski
- Mislav Bradac
- Nico Weber
- Somnath Banerjee
- Sriraman Tallam
- Tamar Levy
- Timothy Gu
- Urvang Joshi
- Vikas Arora
- Vincent Rabaud
- Vlad Tsyrklevich
- Yang Zhang
- Yannis Guyon
37 of 70
Or, is it?
38 of 70
WebP v2?
More of the same
39 of 70
why?
The world has changed.
Good connectivity and resource mindfulness are more critical than ever
40 of 70
why?
Service workers and WASM make it much easier to introduce codecs at scale
…. especially if you don’t rely on hardware.
41 of 70
WebP v2 - features and ideas
(still) keep it simple and useful
42 of 70
10b ought to be enough for everyone
43 of 70
Custom color space, not necessarily YCbCr
tight-fit the color transform matrix.
RGB Cube
44 of 70
Custom color space
Not that infrequent
45 of 70
Entropy coding: ANS everywhere
Software-friendly
Multi-symbol decoding
Adaptive probabilities
46 of 70
Full incremental / suspendable
GetNextByte() can exit the codec and return later
47 of 70
Full incremental / suspendable
Available bytes
Not-yet-received bytes
Stopping at rows:
Stopping anywhere:
Decoded bitstream
Left to do
Decoded bitstream
Left to do
No redo, no state
Next row of pixels
Redo Area
webp-v1
webp-v2
48 of 70
Floating partitioning
Arbitrary blocks
positions?
Multi-pass FTW
49 of 70
Floating partitioning
Big flat blocks first
(easy!)
50 of 70
Floating partitioning
“Directional” blocks
51 of 70
Floating partitioning
Same-variance blocks
52 of 70
Floating partitioning
53 of 70
Parsing order != decoding order
Strategy: try to maximize the left-sample availability
| |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| |
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
1
4
2
8
5
3
6
7
54 of 70
Borrow building bricks from AV1/AV2
Transforms
Residuals coding
Filters (simplified, for still images)
Tiles
...
55 of 70
Lossless
More predictors
Improved color-caches
16bit-signed
Intra Block-copy
56 of 70
Lossy alpha mask
57 of 70
Lossy alpha mask
58 of 70
lossy/lossless mix
Lossy-coded
Lossless-coded
59 of 70
Previews
Cheap thumbnail using few vertices + triangulation + colormap
60 of 70
Previews
Squint! 3...2...1...
294 bytes
base64:AAGUcRsz9PysYqADOlisiFRXUn1aXEkX+if3GOxbD5+s/30apmYm1Ggr83TsVHpTeKRVFYY8YcHm8WO1PQL6R2t4wPBjO9MHs3YuQ7gX5Xj4xedOQp8PyBpCTC+r5NALt3M0kjLXAGIJTRQ1hHXy9SXwRfFvO0sjecQcigeOxUuxRWA9DV1bm7iRVlVZmEkMTt7vaqlICYX1kqg+3UVAVqiYGE79l8BrUxbdp27cyIuadtBWC6GQ20vkOvQvw8x10XS0ck1/1mltjIarkOifuXwohOKpfBmS5mxkSzPhGM+UzsgPVH/IYhcpLvG3+Z9MLFSxUVUv8V8ltbh9/COggOIoODp5YOURn4gbU7deUjg/YAZWGcJD/YFIE7S85yuWs8FWMp5C
61 of 70
Previews
ta-dah!
Decoder: ~300 lines of WebGL
62 of 70
Squoosh demo time!
https://squoosh.app/ (WASM power)
63 of 70
0.37bpp
q ~= 30
64 of 70
65 of 70
WebP
JPEG
66 of 70
WebP2
AVIF
67 of 70
Timeline
In 10 years?
Next week?
68 of 70
Thanks!
Questions?
mailto:skal@google.com
69 of 70
Extra stuff
~200-250 bytes
126 bytes
70 of 70
Extra stuff
