Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats

1. Picture from Simon Howden freedigitalphotos.net!
responsive
images &
performance
Maximiliano Firtman
@firt

2. mobile+web developer & trainer

3. training

7. questions
yes, please
QA at the end

8. responsive images & performance
the problem
new file formats
http client hints
what’s next

9. Let’s Start!

10. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
A picture is worth a thousand words…

11. … if it appears in time

12. What’s the problem with
images on the Web?

13. Source: HTTP Archive

14. Mobile devices with high resolution

15. …higher than desktop screens

16. using cellular networks

17. We have 4G! We don't need to
worry about performance...
(
)

18. cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
Only 21% is on 4G, worldwide

19. cellular

20. cellular
50% of users are on 2G networks

21. cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~30% of the time 4G was not used

22. RTT - latency
cellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max

23. rendering images is expensive

24. Responsive Images are
here to help

25. Responsive Images
• Provides with multiple image sources depending on:
• display density
• size of the image element in the page
• image type

27. Responsive Images
• srcset (HTML)
• image-set (CSS)
• picture
• server-side techniques
(such as using WURFL)

28. <img src="photo.png" width="300"
srcset="photo_lo.png 1x,
photo_hi.png 2x,
photo_uhi.png 3x">

29. <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>

30. Responsive Images
• The browser will pick the best image
• We won’t send pixels that will never
be rendered

31. Is that all?
(
)

32. No, we need to push images
further in performance
(
)

33. Image Formats

34. Image Formats
• Pick the right one for each situation
(JPEG, GIF, PNG, SVG)
• Optimize the file with tools

36. Lossless format: PNG
• iPhone 7+
• Desktop
3Mb
1.5Mb

37. Lossless format: Zopfli PNG
• iPhone 7+
• Desktop
2.3Mb
1.2Mb
https://github.com/imagemin/zopflipng-bin
-20%

38. Lossy format: JPEG
• iPhone 7+
• Desktop
927Kb
300Kb
90% compression

39. Lossy format: JPEG 2000 (JPX)
• iPhone 7+
• Desktop
752Kb
221Kb
90% compression
-19%

40. Lossy format: JPEG XR (JXR)
• iPhone 7+
• Desktop
665Kb
217Kb
90% compression
-29%

41. Lossless/Lossy format: WebP
• iPhone 7+
• Desktop
402Kb
213Kb
90% compression
-35%

42. How to serve multiple
formats?

43. <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>

44. Multiple formats, resolutions and
viewport sizes
• It can create more than 36 combinations!

45. <picture>
…
<source type=“image/webp"
srcset=“image_lo.webp 1x, image_hi.webp 2x,
image_uhi.webp 3x”
media=“(min-width: 400px)”
>
…
</picture>

46. 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

47. Hello HTTP Client Hints
<meta http-equiv="Accept-CH"
content="DPR, Viewport-Width, Downlink">

48. Meet HTTP Client Hints
• Every image request will include headers:
• DPR
• Width
• Viewport-Width
• Downlink
• Save-Data

49. Save Data please!
• Every image request will include headers:
• Save-Data

50. What about Animated GIFs?

51. The Animated GIF nightmare
• GIF is a very old format
• Extremely Inefficient
• 8 bits only

52. Animation format: Animated PNG
• 8, 24 and 32 bits available
• Transparent animations
APNG
• Polyfill available

53. Animation format: Animated WebP
• Lossy or lossless

54. Animation format: Muted Inline Videos
• Compression (MP4 H265, WebM V9)
• Only with muted videos
• On iOS 10, with webkit-playsinline
• Polyfill available
10+53+

55. What’s next

56. New format: BPG
• iPhone 7+
• Desktop
224Kb
121Kb
Better Portable Graphics (lossy and lossless)
-70%lossy

57. New format: BPG
• iPhone 7+
• Desktop
224Kb
121Kb
Better Portable Graphics
-70%
• JavaScript decoder
lossy

58. New format: FLIF
• iPhone 7+
• Desktop
1.5Mb
0.8Mb
Free Lossless Image Format - Alpha!
-43%lossless

59. New format: FLIF
• iPhone 7+
• Desktop
1.5Mb
0.8Mb
Free Lossless Image Format - Alpha!
-43%lossless
Great for Responsive using Progressiveness

60. Use Service Workers
• You can convert files on the fly
• There is a BPG SW-based decoder
future

62. 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

63. Foto de freefoto.com
firtman@gmail.com
@firt
firt.mobi/hpmwfirt.mobi/mh5