Fastandbeautiful belfast
•Download as PPTX, PDF•
0 likes•122 views
This document discusses optimizing images for fast delivery on mobile websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on current usage. Quality recommends compressing to 85% without significant quality loss. Format suggests using webp and svg where supported. Sizing involves generating responsive images at appropriate breakpoints. Lazy loading delays image loading to above the fold content. Together, these techniques can significantly improve performance without compromising quality.
More Related Content
What's hot
What's hot (20)
Similar to Fastandbeautiful belfast
Similar to Fastandbeautiful belfast (14)
More from Doug Sillars
More from Doug Sillars (20)
Recently uploaded
Recently uploaded (20)
Fastandbeautiful belfast
- 1. Delivering Fast and Beautiful Images Doug Sillars @DougSillars DSC Belfast October 22, 2020
- 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars Performance Audits: Web/Native Workshops: Performance/Images/Video http://bit.ly/HighPerformanceAndroidApps Head of Developer Relations api.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 Dominate the Web HTTPArchive mobile websites 04/2019
- 7. 4 Simple Image Optimizations
- 8. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 9. 4 Simple Image Optimizations Httparchive.org Webpagetest.org
- 10. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 11. 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” 5M mobile sites Analyzed May 1, 2019 48% score 1 10% score 0 32% score < 0.5
- 15. Image Quality Use “In The Wild” 5M mobile sites Analyzed May 1, 2019 48% score 1 10% score 0 32% score < 0.5 May 2020: 52% score 1 31% < 0.5
- 16. Automate Quality vs. File Size • Butteraugli • SSIM: Structural SIMilarity https://github.com/technopagan/cjpeg-dssim cjpeg-dssim jpegoptim riga.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
- 19. Results: • Test Load on Motorola G4:
- 20. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 21. 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
- 22. 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
- 23. Scalable Vector Graphics (SVG)
- 24. Scalable Vector Graphics (SVG)
- 25. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 26. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 27. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
- 28. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 31. SSIM + WebP 986 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
- 32. File Format: Web <picture> <source width = "100%" type="image/webp" srcset=”riga.webp"> <img width = "100%" src=”riga_cjpeg_dssim.jpg" alt=”Riga, Latvia"> </picture>
- 33. Image Format Use “In The Wild” 5M mobile sites Analyzed 5/1/19 18% score 1 28% score 0 62% score <0.5
- 34. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 35. Image Sizing -
- 36. Image Sizing
- 37. Image Sizing -
- 39. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 40. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 41. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
- 42. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
- 43. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
- 47. Responsive Images Use “In The Wild” 5M mobile sites Analyzed 5/1/19 58% score 1 8% score 0 26% score <0.5
- 48. Responsive Images Use “In The Wild” 5M mobile sites Analyzed 5/1/19 58% score 1 8% score 0 26% score <0.5 2020: 66% score 1 20% score < 0.5
- 49. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 52. Lazy Loading Use “In The Wild” 5M mobile sites Analyzed 5/1/19 56% score 1 8% score 0 28% score <0.5
- 53. Lazy Loading Use “In The Wild” 5M mobile sites Analyzed 5/1/19 56% score 1 8% score 0 28% score <0.5 2020: 59% Score 1 28% Score <0.5
- 55. Animated GIFs
- 56. Animated GIFs Animated GIF 3.8 MB 270% larger
- 57. Animated GIFs “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” -GIF89a Specification https://www.w3.org/Graphics/GIF/spec-gif89a.txt
- 58. Animated GIFs
- 59. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 60. Animated GIFs: Social Media
- 61. Animated GIFs: Social Media
- 62. Conclusion Images CAN Be Beautiful AND Fast
Editor's Notes
- 47% smaller!
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 47% smaller! Or 65% smaller from original!