Turin webperf meetup
Download as PPTX, PDF1 like395 views
This document discusses optimizing images for fast delivery on websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on typical file size savings. It analyzes real-world usage of the optimizations across 500,000 mobile sites. The document encourages testing optimizations using tools like WebPageTest and analyzing trends using HttpArchive. Overall, it promotes delivering beautiful yet fast images through techniques like responsive images and lazy loading.
Turin webperf meetup
- 1. Delivering Beautiful and Fast Images Doug Sillars @DougSillars Turin WebPerf July 24, 2018
- 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars https://www.slideshare.net/dougsillars/ Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video
- 4. 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
- 5. 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
- 6. Images make up 50% of Web Content HTTPArchive mobile websites 15/02/18
- 7. Image Performance Analysis https://Webpagetest.org https://httparchive.org
- 8. 4 Simple Image Optimizations
- 9. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 10. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 11. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 12. Image Quality Lossy Image size is reduced by removing pixel information https://developers.google.com/speed/docs/insights/OptimizeImages
- 13. Image Quality magick -quality 85 riga.jpg riga85.jpg http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg Lighthouse: Recommends 85% quality on all images https://developers.google.com/speed/docs/insights/OptimizeImages
- 14. Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 15. Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
- 22. Automate Quality vs. File Size • Butteraugli • SSIM: Structural SIMilarity https://github.com/technopagan/cjpeg-dssim cjpeg-dssim jpegoptim ireland.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg
- 25. Results: • Test Load on Motorola G4:
- 26. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 27. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 28. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 29. Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 30. Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 31. Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 32. Scalable Vector Graphics (SVG)
- 33. Scalable Vector Graphics (SVG)
- 34. Scalable Vector Graphics (SVG) https://github.com/google/brotli
- 35. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 36. Convert File Format http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg convert ireland_cjpeg_dssim.jpg ireland.webp
- 37. SSIM + WebP 433-505 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
- 38. Image Format: WebP <picture> <source width = "100%" type="image/webp" srcset="ireland.webp"> <img width = "100%" src="ireland_cjpeg_dssim.jpg" alt="Mizen Head, Ireland"> </picture>
- 40. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 41. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 42. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 43. Image Sizing -
- 44. Image Sizing
- 45. Image Sizing -
- 47. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 48. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 50. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
- 51. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
- 56. Responsive Images + Image Format Create responsive WebP mogrify -format webp *.jpg
- 57. Responsive Images + Client Hints
- 58. Responsive Images + Client Hints
- 59. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 60. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 61. Sample Website
- 62. Sample Website
- 63. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 67. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 68. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 70. Preview Images
- 71. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
- 72. Preview Images
- 73. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 74. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 75. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 76. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 77. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 78. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 80. Animated GIFs
- 81. Animated GIFs Animated GIF 3.8 MB 270% larger
- 82. Animated GIFs
- 83. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 84. Animated GIFs Video Tags: <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> Video is not pre-loaded, will be last to download 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/
- 85. Animated GIFs
- 86. Summary Testing: WebPageTest https://www.webpagetest.org HttpArchive https://httparchive.org Images: ImageMagick https://www.imagemagick.org SSIM https://github.com/technopagan/cjpeg-dssim LazySizes https://github.com/aFarkas/lazysizes Responsive Breakpoints http://www.responsivebreakpoints.com/ Cloudinary https://www.cloudinary.com Tooling
- 87. Conclusion Images and Video can be Beautiful AND Fast
- 88. Contest – Win a €100 Amazon Gift Card Optimize Images for Fast Page Load Submit your entry by August 1 for a chance to win! Code and tips: https://github.com/dougsillars/dougsillars.github.io Entry form: http://bit.ly/FastImages https://dougsillars.github.io