responsive images and performance
TRANSCRIPT
Picture from Simon Howden freedigitalphotos.net!
Picture from Simon Howden freedigitalphotos.net!
responsive images &
performance
Maximiliano Firtman @firt
mobile+web developer & trainer
training
questions
yes, please
QA at the end
responsive images & performance
the problem new file formats http client hints what’s next
Let’s Start!
http://www.flickr.com/photos/steenslag/22689920/-borrowedfromSteveSouders
A picture is worth a thousand words…
… if it appears in time
What’s the problem with images on the Web?
Source: HTTP Archive
Mobile devices with high resolution
…higher than desktop screens
using cellular networks
We have 4G! We don't need to worry about performance...
(
)
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
Only 21% is on 4G, worldwide
cellular
cellular
50% of users are on 2G networks
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~30% of the time 4G was not used
RTT - latencycellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max
rendering images is expensive
Responsive Images are here to help
Responsive Images
• Provides with multiple image sources depending on: • display density • size of the image element in the page • image type
Responsive Images
• srcset (HTML) • image-set (CSS) • picture • server-side techniques (such as using WURFL)
<img src="photo.png" width="300" srcset="photo_lo.png 1x, photo_hi.png 2x, photo_uhi.png 3x">
<picture> <source media="(min-width: 300px)" src="hi.jpg"> <source media="(min-width: 600px)" src="mid.jpg"> <source src="lo.jpg"> <img src="fallback.jpg" alt=""> </picture>
Responsive Images
• The browser will pick the best image • We won’t send pixels that will never be rendered
Is that all?
(
)
No, we need to push images further in performance
(
)
Image Formats
Image Formats
• Pick the right one for each situation (JPEG, GIF, PNG, SVG) • Optimize the file with tools
Lossless format: PNG
• iPhone 7+ • Desktop
3Mb 1.5Mb
Lossless format: Zopfli PNG
• iPhone 7+ • Desktop
2.3Mb 1.2Mb
https://github.com/imagemin/zopflipng-bin
-20%
Lossy format: JPEG
• iPhone 7+ • Desktop
927Kb 300Kb
90% compression
Lossy format: JPEG 2000 (JPX)
• iPhone 7+ • Desktop
752Kb 221Kb
90% compression
-19%
Lossy format: JPEG XR (JXR)
• iPhone 7+ • Desktop
665Kb 217Kb
90% compression
-29%
Lossless/Lossy format: WebP
• iPhone 7+ • Desktop
402Kb 213Kb
90% compression
-35%
How to serve multiple formats?
<picture>
<source type="image/webp" src="image.webp"><source type="image/vnd.ms-photo" src="image.jxr"><source type="image/jp2" src="image.jp2"><source type="image/png" src=“image.zf.png"><img src=“image.zf.png" alt=“description">
</picture>
Multiple formats, resolutions and viewport sizes
• It can create more than 36 combinations!
<picture>…<source type=“image/webp" srcset=“image_lo.webp 1x, image_hi.webp 2x, image_uhi.webp 3x” media=“(min-width: 400px)”>…</picture>
Meet HTTP Client Hints
• It’s an extension to HTTP • The browser will expose data to the server • Reduce the need of client-side media queries
Hello HTTP Client Hints
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink">
Meet HTTP Client Hints
• Every image request will include headers: • DPR • Width • Viewport-Width • Downlink • Save-Data
Save Data please!
• Every image request will include headers: • Save-Data
What about Animated GIFs?
The Animated GIF nightmare
• GIF is a very old format • Extremely Inefficient • 8 bits only
Animation format: Animated PNG
• 8, 24 and 32 bits available • Transparent animations
APNG
• Polyfill available
Animation format: Animated WebP
• Lossy or lossless
Animation format: Muted Inline Videos
• Compression (MP4 H265, WebM V9) • Only with muted videos • On iOS 10, with webkit-playsinline
• Polyfill available10+53+
What’s next
New format: BPG
• iPhone 7+ • Desktop
224Kb 121Kb
Better Portable Graphics (lossy and lossless)
-70%lossy
New format: BPG
• iPhone 7+ • Desktop
224Kb 121Kb
Better Portable Graphics
-70%
• JavaScript decoder
lossy
New format: FLIF
• iPhone 7+ • Desktop
1.5Mb 0.8Mb
Free Lossless Image Format - Alpha!
-43%lossless
New format: FLIF
• iPhone 7+ • Desktop
1.5Mb 0.8Mb
Free Lossless Image Format - Alpha!
-43%lossless
Great for Responsive using Progressiveness
Use Service Workers
• You can convert files on the fly • There is a BPG SW-based decoder
future
final thoughts
- performance is key for success - don’t send pixels that won’t be rendered - find the balance: file size, memory, resolution - use new formats and client hints
