Optimising Image Loading
0 likes1,869 views
This document discusses various techniques for optimizing image loading, including choosing image formats, JPEG compression, SVG optimization, responsive images using srcset, lazy loading images, and progressive loading. It provides examples and recommendations for optimizing images to reduce file sizes and improve page load performance. Tools mentioned for image optimization include ImageOptim, SVGOMG, and libraries like imagemin and libvips.
Optimising Image Loading
- 5. Choosing an image format vector rastervs. graphics
- 7. JPEG: quality q=100 q=75 q=30 q=10 507 KB 165 KB 59 KB 38 KB
- 16. SVG optimisation 552 byte 235 byte - 57,42%
- 17. SVG sprites
- 19. Responsive Images 110px 110px 100px 100px 110 x 110 100 x 100 - = 2100
- 20. Responsive Images 1620px 1620px 800px 800px 1620 x 1620 (2 x 800) x (2 x 800) - = 64400
- 21. Fixed size, varying density fixed size This is used as 1x src & by browsers that don’t support srcset image url pixel density descriptor
- 22. Varying size For browsers that don’t support srcset fallback image url window width image element width image width descriptor
- 23. Varying on type If WebP is supported, use this … otherwise use this
- 24. Art Direction in practise
- 25. Art Direction If the media query matches, use this … otherwise use this
- 26. Lazy loading
- 27. Scroll down
- 30. Tools • image compression (optimization): • imagemin: Minify images seamlessly • libvips: an (2D) image processing library • ImageOptim: image compression software (web service or download) • SVGOMG: SVG optimisation toll by Jake Archibald • SVGO: SVG Optimizer • Image analysis: • WebPageTest.org • Page Speed Insights • Website Speed Test • Chrome DevTools (using Lighthouse)
- 31. References • Image Optimization by Ilya Grigorik • Essential Image Optimization by Addy Osmani • Tips For Optimising SVG Delivery For The Web by Sara Soueidan • An Overview of SVG Sprite Creation Techniques by Sara Soueidan • How Medium does progressive image loading by José M. Perez • How to lazy-load images to improve loading time and save bandwidth by José M. Pérez • The anatomy of responsive images by Jake Archibald • W3C Editor’s Dragt: HTML 5.3 4.7 Embedded content • Sitepoint: Five Techniques to Lazy Load Images for Website Performance • CSS Tricks: Lazy Loading Images • httparchive.org