SlideShare a Scribd company logo
1 of 48
Download to read offline
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
MAY 2019
NEXT-GENERATION
IMAGE FORMATS

FOR THE INTERNET
Jon Sneyers
jon@cloudinary.com
N E X T- G E N E R AT I O N I M A G E F O R M AT S 

F O R T H E I N T E R N E T
JPEG
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G
ISO/IEC JTC1/SC29/WG1 aka “Joint Photographic Experts Group”
International
Standardization
Organization
International
Electrotechnical
Commission
International
Telecommunication
UnionJoint Technical Committee 1:

Information Technology
Subcommittee 29:

Coding of audio, picture, multimedia and hypermedia information
Working Group 1:

Coding of still pictures
“Joint”
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G
JPEG is great!
4
In 1986, the Joint Photographic Experts Group started developing what became the 1992 JPEG standard.

It is still the most widely used image format, and arguably the most successful image format ever.
Features:
• Lossy compression:
• YCbCr, optional chroma subsampling (4:2:0)
• 8x8 DCT (discrete cosine transform)
• Sequential and progressive mode
• Standard:
• 8-bit and 12-bit lossy
• lossless mode up to 16-bit
• up to 4 components (not really specified what they are)
• two choices of entropy coders: Huffman (no patents) or Arithmetic Coding (patent-encumbered)
de facto standard:
grayscale, RGB or CMYK
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G
But…
5
With a good JPEG encoder like the (de facto) JPEG standard is still quite good!
BUT… it has limitations:
• Only lossy
• Bad for non-photographs (sharp edges, text)
• No alpha channel (transparency)
• Only 8-bit (problem for wide-gamut)
• No animation
• Not quite state-of-the-art entropy coding (Huffman)
• At lower bitrates: obvious compression artifacts (blockiness, color banding, ringing, DCT noise)
}Use PNG instead
⟶ This is why GIF is still around
N E X T- G E N E R AT I O N I M A G E F O R M AT S 

F O R T H E I N T E R N E T
ALTERNATIVES

TO JPEG
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR
• JPEG XT
• WebP
• BPG
• HEIF (HEIC)
• AVIF
So far, none of them has really succeeded (yet)
(although some of them have had some success)
7
}Video codecs used as image codec
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000 (1997-…)
• JPEG XR
• JPEG XT
• WebP
• BPG
• HEIF (HEIC)
• AVIF
8
👍
• Supports lossless
• Alpha
• High bit depth
• Less blockiness
👎
• Slow
• Blur
• Not that much better
• Initially no open
source software
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR (2007-2012)
• JPEG XT
• WebP
• BPG
• HEIF (HEIC)
• AVIF
9
👍
• Supports lossless
• Alpha
• High bit depth
• Less blockiness
• Faster than J2K
👎
• Worse than J2K
• Single vendor
pushing it (Microsoft)
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR
• JPEG XT (2013-2016)
• WebP
• BPG
• HEIF (HEIC)
• AVIF
10
👍
• Backwards compatible
• Supports lossless
• Alpha
• High bit depth
👎
• Backwards compatible
• Little incentive to
upgrade decoders
• No compression
improvement
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR
• JPEG XT
• WebP (2010-2019)
• BPG
• HEIF (HEIC)
• AVIF
11
👍
• Supports lossless
• Alpha
• Animation
• Open source
• Royalty-free
👎
• Only 8-bit
• No progressive mode
• Obligatory 4:2:0
• Max dimensions are
16383x16383
• No formal standard
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR
• JPEG XT
• WebP
• BPG (2014-2018)
• HEIF (HEIC) (2013-2017)
• AVIF
12
👍
• Supports lossless
• Alpha, Depth
• High bit depth
• Animation
• Very good compression
👎
• No progressive mode
• Patent mess
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
There have been many attempts to replace JPEG
• JPEG 2000
• JPEG XR
• JPEG XT
• WebP
• BPG
• HEIF (HEIC)
• AVIF (2018-…)
13
👍
• Supports lossless
• Alpha
• Up to 12-bit
• Animation
• Very good compression
• Royalty-free
👎
• No progressive mode
• Slow
• Complicated
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
14
Patent
mess
Limitations
(8 bit, 4:2:0)
Complexity
No progressive, only sequential
Compression improvement: “meh”
15
A LT E R N AT I V E S T O J P E G
Attempts to replace JPEG
1. JPEG
2. GIF
3. PNG
4. TIFF
5. BMP
6. PPM
7. JPEG 2000
8. WebP
9. JPEG XR
10. JPEG XT
11. BPG
12. FLIF
13. HEIC
14. AVIF
1. JPEG
2. GIF
3. PNG
4. TIFF
5. BMP
6. PPM
7. JPEG 2000
8. WebP
9. JPEG XR
10. JPEG XT
11. BPG
12. FLIF
13. HEIC
14. AVIF
15. JPEG XL
xkcd.com/927
N E X T- G E N E R AT I O N I M A G E F O R M AT S 

F O R T H E I N T E R N E T
JPEG XL
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE 17
Pik Image Compression
♠
Alexander Rhatushnyak, Evgenii Kliuchnikov, Jan Wassenberg, Jeffrey Lim,
Jyrki Alakuijala, Krzysztof Potempa, Lode Vandevenne, Renata Khasanova,
Robert Obryk, Sami Boukortt, Thomas Fischbacher, Zoltan Szabadka
= +
proposal 2
proposal 3
proposal 4
proposal 5
proposal 6
proposal 1
proposal 7
>
ISO/IEC JTC1/SC29/WG1
J P E G X L
History
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G
How it works
18
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works
19
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Features / Goals
20
• Royalty-free, Free & Open Source software available from the start
• All the features expected for a modern image codec:
• Alpha (and other extra channels like Depth)
• High bit depth (up to 16-bit)
• Supports lossless
• State-of-the-art compression
• Animation
• Progressive mode / “Responsive by design”
• Legacy-friendly
• High quality
• Can replace JPEG, PNG and GIF
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
21
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
22
In the 1990s…
Internet was slow
for everyone
Screen sizes and
resolutions didn’t
vary much
14.4 - 33.6 kbit/s
14 to 21 inch
800x600 or 1024x768
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
23
Today
Internet speed and screen sizes and resolutions vary a lot!
Smartwatch
2 inch, 360x480
8K Smart TV
80 inch, 7680x4320
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
24
❌
✅
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
25
w4x.jpg, 1.9 MBw2x.jpg, 490 KBw1x.jpg, 110 KBw0.5x.jpg, 30 KB
LQIP.gif
271 bytes
Current
approach:
many files
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Responsive by design
26
w.jxl, 1.7 MBw.jxl, first 806 KBw.jxl, first 206 KBw.jxl, first 50 KB
w.jxl
first 200 bytes
JPEG XL
approach:
one file!
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: Squeeze
27
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: Squeeze
28
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: Squeeze
29
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: Squeeze
30
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: Squeeze
31
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
32
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
33
JPEG PNG GIF
New format
Pixels
Legacy decoder
New encoder
Additional loss and/or more bytes than original!
Existing image files
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
34
sunset.jpg
6173 bytes
sunset.webp
11110 bytes
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
35
JPEG PNG GIF
New format
Pixels
Legacy decoder
New encoder
Additional loss and/or more bytes than original!
Existing image files
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
36
JPEG PNG8 GIF
JPEG XL
No additional loss, always smaller than original!
Existing image files
PNG24
Pixels Palette pixelsDCT coefficients
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
37
sunset.jpg
6173 bytes
sunset.jxl
3320 bytes
sunset.jpg
6173 bytes reversible
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Legacy-friendly
38
sunset.jpg
6173 bytes
sunset.jxl
3320 bytes
sunset.jpg
6173 bytes reversible
Improved dequantization
(reduces blockiness / color banding)
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
High quality
39
40TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
High quality
• Video codecs focus on low bitrates
• They have a lot of pixels to encode!
• You only see a single frame for 16-42 ms
• A lot of smoothing and “distilling”
• Great for video
• Not so good for high-quality still images
Original HEIC
41TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
High quality
• Visually lossless = lossy, but human eyes cannot see the difference
• XYB color space models human vision
• Adaptive quantization (guided by a perceptual metric)
Distribution of cone cells in the fovea
42TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
How it works: adaptive quantization
• JPEG:

Same quality in every region
• JPEG XL:

Quality can be different in
different regions; it is adjusted
automatically based on
perceptual metrics
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Universal
43
44
45TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
J P E G X L
Universal
JPEG XL is designed to be a universal and future-proof image codec
• Any kind of image content: photographs, illustrations, screenshots, rendered images, document
scans, medical imaging, game graphics, UI elements, …
• Support for extra channels like alpha, depth, spot colors, …
• No limits on the image dimensions
• High bit depth / wide gamut / HDR
• Covers the whole quality spectrum from very low bitrates all the way to lossless
• Various trade-offs between encode/decode speed and compression density
46
J P E G X L
Universal
Non-photographic 8-bit photo 12-bit photo
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
Conclusion
47
Responsive by design
Legacy-friendlyUniversal
TRANSFORMING THE DIGITAL MEDIA EXPERIENCE
High quality
ThankYou
Questions?
jon@cloudinary.com

More Related Content

What's hot

[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 

What's hot (20)

「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
Design patterns for microservice architecture
Design patterns for microservice architectureDesign patterns for microservice architecture
Design patterns for microservice architecture
 
How and Why GraalVM is quickly becoming relevant for developers (ACEs@home - ...
How and Why GraalVM is quickly becoming relevant for developers (ACEs@home - ...How and Why GraalVM is quickly becoming relevant for developers (ACEs@home - ...
How and Why GraalVM is quickly becoming relevant for developers (ACEs@home - ...
 
Introduction to GraalVM
Introduction to GraalVMIntroduction to GraalVM
Introduction to GraalVM
 
あなたが知らない リレーショナルモデル
あなたが知らない リレーショナルモデルあなたが知らない リレーショナルモデル
あなたが知らない リレーショナルモデル
 
React introduction
React introductionReact introduction
React introduction
 
Ormとの付き合い方
Ormとの付き合い方Ormとの付き合い方
Ormとの付き合い方
 
iot_ppt.pptx
iot_ppt.pptxiot_ppt.pptx
iot_ppt.pptx
 
Building an Enterprise Knowledge Graph @Uber: Lessons from Reality
Building an Enterprise Knowledge Graph @Uber: Lessons from RealityBuilding an Enterprise Knowledge Graph @Uber: Lessons from Reality
Building an Enterprise Knowledge Graph @Uber: Lessons from Reality
 
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
 
Mutiny + quarkus
Mutiny + quarkusMutiny + quarkus
Mutiny + quarkus
 
GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0
 
DDD Tactical Design with Clean Architecture - Ivan Paulovich
DDD Tactical Design with Clean Architecture - Ivan PaulovichDDD Tactical Design with Clean Architecture - Ivan Paulovich
DDD Tactical Design with Clean Architecture - Ivan Paulovich
 
RLSを用いたマルチテナント実装 for Django
RLSを用いたマルチテナント実装 for DjangoRLSを用いたマルチテナント実装 for Django
RLSを用いたマルチテナント実装 for Django
 
Tips about hibernate with spring data jpa
Tips about hibernate with spring data jpaTips about hibernate with spring data jpa
Tips about hibernate with spring data jpa
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
 
GraphQL
GraphQLGraphQL
GraphQL
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 

Similar to Imagecon 2019 - Jon Sneyers

Introduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and ProcessesIntroduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and Processes
PrestoCentre
 
Android Media Player Development
Android Media Player DevelopmentAndroid Media Player Development
Android Media Player Development
Talentica Software
 
Battle of the Codecs
Battle of the CodecsBattle of the Codecs
Battle of the Codecs
James Uren
 
Single-Loop Software Architecture for JPEG 2000
Single-Loop Software Architecture for JPEG 2000Single-Loop Software Architecture for JPEG 2000
Single-Loop Software Architecture for JPEG 2000
David Bařina
 

Similar to Imagecon 2019 - Jon Sneyers (20)

Build your own low latency live platform
Build your own low latency live platformBuild your own low latency live platform
Build your own low latency live platform
 
Jpeg and mpeg ppt
Jpeg and mpeg pptJpeg and mpeg ppt
Jpeg and mpeg ppt
 
The next generation JPEG standards
The next generation JPEG standardsThe next generation JPEG standards
The next generation JPEG standards
 
JPEG PLENO - Towards a New Standard for Plenoptic Image Compression
JPEG PLENO - Towards a New Standard for Plenoptic Image CompressionJPEG PLENO - Towards a New Standard for Plenoptic Image Compression
JPEG PLENO - Towards a New Standard for Plenoptic Image Compression
 
Image processing
Image processingImage processing
Image processing
 
How does Netflix Get Built and Triumphed?
How does Netflix Get Built and Triumphed?How does Netflix Get Built and Triumphed?
How does Netflix Get Built and Triumphed?
 
Advanced Video Production with FOSS
Advanced Video Production with FOSSAdvanced Video Production with FOSS
Advanced Video Production with FOSS
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
 
Introduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and ProcessesIntroduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and Processes
 
JPEG emerging standards
JPEG emerging standardsJPEG emerging standards
JPEG emerging standards
 
GDC 2009: iPhone Development: Exploring The New Frontier
GDC 2009: iPhone Development: Exploring The New FrontierGDC 2009: iPhone Development: Exploring The New Frontier
GDC 2009: iPhone Development: Exploring The New Frontier
 
85 videocompress
85 videocompress85 videocompress
85 videocompress
 
JPEG2000 Alliance IBC 2009
JPEG2000 Alliance IBC 2009JPEG2000 Alliance IBC 2009
JPEG2000 Alliance IBC 2009
 
How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down... How to train your content- so it doesn't slow you down...
How to train your content- so it doesn't slow you down...
 
intoPIX - All you wanted to know about Jpeg 2000
intoPIX - All you wanted to know about Jpeg 2000intoPIX - All you wanted to know about Jpeg 2000
intoPIX - All you wanted to know about Jpeg 2000
 
Integrating with the Photography Ecosystem on Mac OS X
Integrating with the Photography Ecosystem on Mac OS XIntegrating with the Photography Ecosystem on Mac OS X
Integrating with the Photography Ecosystem on Mac OS X
 
Android Media Player Development
Android Media Player DevelopmentAndroid Media Player Development
Android Media Player Development
 
Optimisation and Compression Intro
Optimisation and Compression IntroOptimisation and Compression Intro
Optimisation and Compression Intro
 
Battle of the Codecs
Battle of the CodecsBattle of the Codecs
Battle of the Codecs
 
Single-Loop Software Architecture for JPEG 2000
Single-Loop Software Architecture for JPEG 2000Single-Loop Software Architecture for JPEG 2000
Single-Loop Software Architecture for JPEG 2000
 

More from Cloudinary

More from Cloudinary (15)

Imagecon 2019 - Jen Looper
Imagecon 2019 - Jen LooperImagecon 2019 - Jen Looper
Imagecon 2019 - Jen Looper
 
Imagecon 2019 - Aaron Gustafson
Imagecon 2019 - Aaron GustafsonImagecon 2019 - Aaron Gustafson
Imagecon 2019 - Aaron Gustafson
 
Imagecon 2019 - Amy Balliett
Imagecon 2019 - Amy BalliettImagecon 2019 - Amy Balliett
Imagecon 2019 - Amy Balliett
 
Imagecon Itai
Imagecon ItaiImagecon Itai
Imagecon Itai
 
ImageCon CTO keynote
ImageCon CTO keynoteImageCon CTO keynote
ImageCon CTO keynote
 
ImageCon keynote product
ImageCon keynote productImageCon keynote product
ImageCon keynote product
 
Drawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the WebDrawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the Web
 
Images For Everyone
Images For EveryoneImages For Everyone
Images For Everyone
 
Beyond Resizing: The Image Performance Checklist
Beyond Resizing: The Image Performance ChecklistBeyond Resizing: The Image Performance Checklist
Beyond Resizing: The Image Performance Checklist
 
Moving Metrics with Better Mobile Images
Moving Metrics with Better Mobile ImagesMoving Metrics with Better Mobile Images
Moving Metrics with Better Mobile Images
 
Images in the Era of the Algorithm
Images in the Era of the AlgorithmImages in the Era of the Algorithm
Images in the Era of the Algorithm
 
Media Processing Workflows using AWS Step Functions and Machine Learning on A...
Media Processing Workflows using AWS Step Functions and Machine Learning on A...Media Processing Workflows using AWS Step Functions and Machine Learning on A...
Media Processing Workflows using AWS Step Functions and Machine Learning on A...
 
The Physics of Fast Image Compression
The Physics of Fast Image CompressionThe Physics of Fast Image Compression
The Physics of Fast Image Compression
 
Delivering Responsive Images
Delivering Responsive Images Delivering Responsive Images
Delivering Responsive Images
 
Measuring Image Performance
Measuring Image PerformanceMeasuring Image Performance
Measuring Image Performance
 

Recently uploaded

Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
daisycvs
 
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
lizamodels9
 
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabiunwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
lizamodels9
 
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
lizamodels9
 
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Sheetaleventcompany
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
amitlee9823
 
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 

Recently uploaded (20)

Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
 
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort ServiceMalegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
 
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
 
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
Russian Call Girls In Rajiv Chowk Gurgaon ❤️8448577510 ⊹Best Escorts Service ...
 
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabiunwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
 
Whitefield CALL GIRL IN 98274*61493 ❤CALL GIRLS IN ESCORT SERVICE❤CALL GIRL
Whitefield CALL GIRL IN 98274*61493 ❤CALL GIRLS IN ESCORT SERVICE❤CALL GIRLWhitefield CALL GIRL IN 98274*61493 ❤CALL GIRLS IN ESCORT SERVICE❤CALL GIRL
Whitefield CALL GIRL IN 98274*61493 ❤CALL GIRLS IN ESCORT SERVICE❤CALL GIRL
 
Business Model Canvas (BMC)- A new venture concept
Business Model Canvas (BMC)-  A new venture conceptBusiness Model Canvas (BMC)-  A new venture concept
Business Model Canvas (BMC)- A new venture concept
 
Unveiling Falcon Invoice Discounting: Leading the Way as India's Premier Bill...
Unveiling Falcon Invoice Discounting: Leading the Way as India's Premier Bill...Unveiling Falcon Invoice Discounting: Leading the Way as India's Premier Bill...
Unveiling Falcon Invoice Discounting: Leading the Way as India's Premier Bill...
 
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
 
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
Call Girls From Raj Nagar Extension Ghaziabad❤️8448577510 ⊹Best Escorts Servi...
 
Falcon's Invoice Discounting: Your Path to Prosperity
Falcon's Invoice Discounting: Your Path to ProsperityFalcon's Invoice Discounting: Your Path to Prosperity
Falcon's Invoice Discounting: Your Path to Prosperity
 
PHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation FinalPHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation Final
 
Falcon Invoice Discounting platform in india
Falcon Invoice Discounting platform in indiaFalcon Invoice Discounting platform in india
Falcon Invoice Discounting platform in india
 
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Organizational Transformation Lead with Culture
Organizational Transformation Lead with CultureOrganizational Transformation Lead with Culture
Organizational Transformation Lead with Culture
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
 
Value Proposition canvas- Customer needs and pains
Value Proposition canvas- Customer needs and painsValue Proposition canvas- Customer needs and pains
Value Proposition canvas- Customer needs and pains
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
 
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Nelamangala Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 

Imagecon 2019 - Jon Sneyers

  • 1. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE MAY 2019 NEXT-GENERATION IMAGE FORMATS
 FOR THE INTERNET Jon Sneyers jon@cloudinary.com
  • 2. N E X T- G E N E R AT I O N I M A G E F O R M AT S 
 F O R T H E I N T E R N E T JPEG
  • 3. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G ISO/IEC JTC1/SC29/WG1 aka “Joint Photographic Experts Group” International Standardization Organization International Electrotechnical Commission International Telecommunication UnionJoint Technical Committee 1:
 Information Technology Subcommittee 29:
 Coding of audio, picture, multimedia and hypermedia information Working Group 1:
 Coding of still pictures “Joint”
  • 4. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G JPEG is great! 4 In 1986, the Joint Photographic Experts Group started developing what became the 1992 JPEG standard.
 It is still the most widely used image format, and arguably the most successful image format ever. Features: • Lossy compression: • YCbCr, optional chroma subsampling (4:2:0) • 8x8 DCT (discrete cosine transform) • Sequential and progressive mode • Standard: • 8-bit and 12-bit lossy • lossless mode up to 16-bit • up to 4 components (not really specified what they are) • two choices of entropy coders: Huffman (no patents) or Arithmetic Coding (patent-encumbered) de facto standard: grayscale, RGB or CMYK
  • 5. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G But… 5 With a good JPEG encoder like the (de facto) JPEG standard is still quite good! BUT… it has limitations: • Only lossy • Bad for non-photographs (sharp edges, text) • No alpha channel (transparency) • Only 8-bit (problem for wide-gamut) • No animation • Not quite state-of-the-art entropy coding (Huffman) • At lower bitrates: obvious compression artifacts (blockiness, color banding, ringing, DCT noise) }Use PNG instead ⟶ This is why GIF is still around
  • 6. N E X T- G E N E R AT I O N I M A G E F O R M AT S 
 F O R T H E I N T E R N E T ALTERNATIVES
 TO JPEG
  • 7. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR • JPEG XT • WebP • BPG • HEIF (HEIC) • AVIF So far, none of them has really succeeded (yet) (although some of them have had some success) 7 }Video codecs used as image codec
  • 8. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 (1997-…) • JPEG XR • JPEG XT • WebP • BPG • HEIF (HEIC) • AVIF 8 👍 • Supports lossless • Alpha • High bit depth • Less blockiness 👎 • Slow • Blur • Not that much better • Initially no open source software
  • 9. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR (2007-2012) • JPEG XT • WebP • BPG • HEIF (HEIC) • AVIF 9 👍 • Supports lossless • Alpha • High bit depth • Less blockiness • Faster than J2K 👎 • Worse than J2K • Single vendor pushing it (Microsoft)
  • 10. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR • JPEG XT (2013-2016) • WebP • BPG • HEIF (HEIC) • AVIF 10 👍 • Backwards compatible • Supports lossless • Alpha • High bit depth 👎 • Backwards compatible • Little incentive to upgrade decoders • No compression improvement
  • 11. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR • JPEG XT • WebP (2010-2019) • BPG • HEIF (HEIC) • AVIF 11 👍 • Supports lossless • Alpha • Animation • Open source • Royalty-free 👎 • Only 8-bit • No progressive mode • Obligatory 4:2:0 • Max dimensions are 16383x16383 • No formal standard
  • 12. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR • JPEG XT • WebP • BPG (2014-2018) • HEIF (HEIC) (2013-2017) • AVIF 12 👍 • Supports lossless • Alpha, Depth • High bit depth • Animation • Very good compression 👎 • No progressive mode • Patent mess
  • 13. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG There have been many attempts to replace JPEG • JPEG 2000 • JPEG XR • JPEG XT • WebP • BPG • HEIF (HEIC) • AVIF (2018-…) 13 👍 • Supports lossless • Alpha • Up to 12-bit • Animation • Very good compression • Royalty-free 👎 • No progressive mode • Slow • Complicated
  • 14. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE A LT E R N AT I V E S T O J P E G Attempts to replace JPEG 14 Patent mess Limitations (8 bit, 4:2:0) Complexity No progressive, only sequential Compression improvement: “meh”
  • 15. 15 A LT E R N AT I V E S T O J P E G Attempts to replace JPEG 1. JPEG 2. GIF 3. PNG 4. TIFF 5. BMP 6. PPM 7. JPEG 2000 8. WebP 9. JPEG XR 10. JPEG XT 11. BPG 12. FLIF 13. HEIC 14. AVIF 1. JPEG 2. GIF 3. PNG 4. TIFF 5. BMP 6. PPM 7. JPEG 2000 8. WebP 9. JPEG XR 10. JPEG XT 11. BPG 12. FLIF 13. HEIC 14. AVIF 15. JPEG XL xkcd.com/927
  • 16. N E X T- G E N E R AT I O N I M A G E F O R M AT S 
 F O R T H E I N T E R N E T JPEG XL
  • 17. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE 17 Pik Image Compression ♠ Alexander Rhatushnyak, Evgenii Kliuchnikov, Jan Wassenberg, Jeffrey Lim, Jyrki Alakuijala, Krzysztof Potempa, Lode Vandevenne, Renata Khasanova, Robert Obryk, Sami Boukortt, Thomas Fischbacher, Zoltan Szabadka = + proposal 2 proposal 3 proposal 4 proposal 5 proposal 6 proposal 1 proposal 7 > ISO/IEC JTC1/SC29/WG1 J P E G X L History
  • 18. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G How it works 18
  • 19. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works 19
  • 20. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Features / Goals 20 • Royalty-free, Free & Open Source software available from the start • All the features expected for a modern image codec: • Alpha (and other extra channels like Depth) • High bit depth (up to 16-bit) • Supports lossless • State-of-the-art compression • Animation • Progressive mode / “Responsive by design” • Legacy-friendly • High quality • Can replace JPEG, PNG and GIF
  • 21. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 21
  • 22. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 22 In the 1990s… Internet was slow for everyone Screen sizes and resolutions didn’t vary much 14.4 - 33.6 kbit/s 14 to 21 inch 800x600 or 1024x768
  • 23. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 23 Today Internet speed and screen sizes and resolutions vary a lot! Smartwatch 2 inch, 360x480 8K Smart TV 80 inch, 7680x4320
  • 24. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 24 ❌ ✅
  • 25. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 25 w4x.jpg, 1.9 MBw2x.jpg, 490 KBw1x.jpg, 110 KBw0.5x.jpg, 30 KB LQIP.gif 271 bytes Current approach: many files
  • 26. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Responsive by design 26 w.jxl, 1.7 MBw.jxl, first 806 KBw.jxl, first 206 KBw.jxl, first 50 KB w.jxl first 200 bytes JPEG XL approach: one file!
  • 27. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: Squeeze 27
  • 28. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: Squeeze 28
  • 29. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: Squeeze 29
  • 30. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: Squeeze 30
  • 31. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: Squeeze 31
  • 32. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 32
  • 33. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 33 JPEG PNG GIF New format Pixels Legacy decoder New encoder Additional loss and/or more bytes than original! Existing image files
  • 34. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 34 sunset.jpg 6173 bytes sunset.webp 11110 bytes
  • 35. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 35 JPEG PNG GIF New format Pixels Legacy decoder New encoder Additional loss and/or more bytes than original! Existing image files
  • 36. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 36 JPEG PNG8 GIF JPEG XL No additional loss, always smaller than original! Existing image files PNG24 Pixels Palette pixelsDCT coefficients
  • 37. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 37 sunset.jpg 6173 bytes sunset.jxl 3320 bytes sunset.jpg 6173 bytes reversible
  • 38. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Legacy-friendly 38 sunset.jpg 6173 bytes sunset.jxl 3320 bytes sunset.jpg 6173 bytes reversible Improved dequantization (reduces blockiness / color banding)
  • 39. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L High quality 39
  • 40. 40TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L High quality • Video codecs focus on low bitrates • They have a lot of pixels to encode! • You only see a single frame for 16-42 ms • A lot of smoothing and “distilling” • Great for video • Not so good for high-quality still images Original HEIC
  • 41. 41TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L High quality • Visually lossless = lossy, but human eyes cannot see the difference • XYB color space models human vision • Adaptive quantization (guided by a perceptual metric) Distribution of cone cells in the fovea
  • 42. 42TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L How it works: adaptive quantization • JPEG:
 Same quality in every region • JPEG XL:
 Quality can be different in different regions; it is adjusted automatically based on perceptual metrics
  • 43. TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Universal 43
  • 44. 44
  • 45. 45TRANSFORMING THE DIGITAL MEDIA EXPERIENCE J P E G X L Universal JPEG XL is designed to be a universal and future-proof image codec • Any kind of image content: photographs, illustrations, screenshots, rendered images, document scans, medical imaging, game graphics, UI elements, … • Support for extra channels like alpha, depth, spot colors, … • No limits on the image dimensions • High bit depth / wide gamut / HDR • Covers the whole quality spectrum from very low bitrates all the way to lossless • Various trade-offs between encode/decode speed and compression density
  • 46. 46 J P E G X L Universal Non-photographic 8-bit photo 12-bit photo TRANSFORMING THE DIGITAL MEDIA EXPERIENCE