Tech Talk // Tech 'n' Drinks // 14.12.2017

1. Optimising Image
Loading

2. httparchive.org

3. Image analysis tools

4. Image optimisation

5. Choosing an image format
vector rastervs.
graphics

6. httparchive.org

7. JPEG: quality
q=100 q=75
q=30 q=10
507 KB 165 KB
59 KB 38 KB

8. JPEG: compression modes

9. Progressive JPEG

11. SVG optimisation I

12. SVG optimisation II

13. SVG optimisation III

14. SVG optimisation IV

15. SVG optimisation V

16. SVG optimisation
552 byte
235 byte
- 57,42%

17. SVG sprites

18. Responsive Images

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

28. Progressive image loading

29. lazysizes by example

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