1. Images and video make up 75% of web content and large file sizes can significantly slow down page loads and reduce user engagement. 2. Optimizing images by choosing efficient formats, compressing while maintaining quality, lazy loading, and responsive loading techniques can dramatically reduce file sizes while preserving visual quality. 3. For video, choosing appropriate streaming formats and bitrates to match network conditions and preloading content helps minimize startup delays that can cause users to abandon the video experience.

1. Delivering Beautiful and Fast
Images and Video Doug Sillars
@DougSillars
April 25
Hamburg WebPerf

3. 0.5
0.6
0.7
0.8
0.9
Standing in Line Standing on the
edge of a virtual
cliff
Experiencing
Mobile Delays
Solving a Math
Problem
https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf
Stress

4. Large Downloads Induce Delays in Rendering
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart & Amazon (Desktop 2001)
4% Mobile Users Throw Their Phones
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters
http://bit.ly/mobileWebStress
http://www.globaldots.com/how-website-speed-affects-conversion-rates/
https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html

5. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18

6. Image Format Usage in Bytes
HTTPArchive mobile websites 15/02/18

7. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18
JPGPNG
GIF

8. Image Compression
Lossless compression:
Default transformation:
remove EXIF data
(can be overridden)

9. Image Compression
Lossy
Image size is reduced by
removing pixel information

10. 100%
977 KB
http://res.cloudinary.com/dougsillars/image/upload/v1520504964/IMG_20180301_114117_tzasan.jpg

11. 80%
844 KB
q_80
http://res.cloudinary.com/dougsillars/image/upload/q_80/v1520504964/IMG_20180301_114117_tzasan.jpg

12. 50%
508 KB
q_50
http://res.cloudinary.com/dougsillars/image/upload/q_50/v1520504964/IMG_20180301_114117_tzasan.jpg

13. 20%
284 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1520504964/IMG_20180301_114117_tzasan.jpg

14. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

15. Automate Quality vs. File Size
• SSIM: Structural SIMilarity
• Butteraugli
• q_auto

16. SSIM
525 KB
q_auto
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1520504964/IMG_20180301_114117_tzasan.jpg

17. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

18. Image Quality Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

19. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

20. SSIM + auto format
345 KB
q_auto,
f_auto
http://res.cloudinary.com/dougsillars/image/upload/f_auto,q_auto/v1520504964/IMG_2
0180301_114117_tzasan.jpg

21. Image Quality and Formats
Optimising on quality
and format can yield
large KB savings!

22. Image Format Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

23. Images & Screens
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

24. Responsive Images
https://twitter.com/paulcalvano/status/928751141843808256

25. Responsive Breakpoint Generation
http://www.responsivebreakpoints.com/

26. Responsive Breakpoints

27. Responsive Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________

28. Responsive Images Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

29. Summary: Image Optimizations
http://res.cloudinary.com/dougsillars/image/upload/c_scale,f_auto,q_auto,w_750/v15210125
92/IMG_20180125_120214_aqewlq.jpg
1.3 MB 45 KB
Quality
Format
Resized

30. Vector Images
Images drawn as shapes
infinitely scalable
Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

31. Preview Images

32. Preview Images
SVG
979 bytes!
Jpg/Webp
~50KB
https://github.com/technopagan/sqip
<img src=“IMG_20160619_173136306.jpg”
style="background-size: cover; background-image:
url(data:image/svg+xml;base64,<svg text>);"

33. Lazy Load Images
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

34. Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

35. Animated GIFs
Original MP4
1.4 MB

36. Animated GIFs
Animated GIF
3.8 MB
270% larger

37. Animated GIFs

38. Animated GIFs
MP4: 256 colors
247KB
93% smaller

39. Animated GIFs
Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop muted controls = "false” src="goats.mp4" />
Img tags are fast!
<picture>
<source type="video/mp4" srcset=”goats.mp4">
<source type="image/webp" srcset=”goats.webp">
<img src=”goats.gif">
</picture>
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/

40. Video

41. 41
Buffer Rage
a state of uncontrollable fury or violent
anger induced by delayed or interrupted
streaming video content
http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic

42. Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

43. Video Startup Delay
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

44. Optimizing Video Delivery
What Leads to Startup Delay?
Manifest File:
List of Available
Streams
Player Chooses a Stream Stream Manifest:
List of Video Segments
Player Downloads
Segments into buffer
Video Plays

45. Optimizing Video Delivery
What Leads to Startup Delay?
#EXTM3U#
EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
Example Manifest file:

46. Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects
8.5 MBPS stream Stream Manifest:
List of Video Segments
Buffer takes a long
time to fill
Video Does Not Play
Player immediately changes the
stream choice to 600KBPS

47. Optimizing Content Delivery
What Leads to Startup Delay?
Example Manifest file:
#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=962000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=1280x720
#EXT-X-STREAM-INF:BANDWIDTH=602000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=960x540
#EXT-X-STREAM-INF:BANDWIDTH=444000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=640x360
#EXT-X-STREAM-INF:BANDWIDTH=315000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=480x270
#EXT-X-STREAM-INF:BANDWIDTH=216000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=320x180

48. Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with playback

49. Optimizing Content Delivery
Balancing the Network with Playback
Static Network Speed
Large jumps in Bandwidth can
lead to:
1. Multiple segment downloads
2. Stalls
3. Perceptible quality changes

50. Optimizing Content Delivery
Balancing the Network with Playback
Variable Network Conditions
Player is able to
balance the network
speed with the
available bitrates to
prevent stalling

51. Optimizing Content Delivery
Video Requests are deferred
Use the “preload” attribute with discretion

52. Summary
Web:
WebPageTest https://www.webpagetest.org
WebsiteSpeedTest https://Webspeedtest.cloudinary.com
Native:
Video Optimizer https://developer.att.com/Video-Optimizer
High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps
Images:
Cloudinary https://www.cloudinary.com
http://www.responsivebreakpoints.com/
Tooling

53. Conclusion
Images and Video
can be Beautiful AND Fast
http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1539/l_cloudinary_logo_yftjkp,x_550,y_-
375/v1521506977/20160416_151750_oiwfvh.jpg

54. After Party Hack
Optimize Images for Fast Page Load
Top 3 optimised sites will win
£150, £100, £50 Amazon Gift cards