High Performance Images - Berlin WebPerf Meetup 20151027

Today's average website is 62% pure image data. We use images to convey emotion, elicit an action or simply to amuse our peers. They show holiday photos, pie charts or animated cats.

To the unitiated, nothing much has changed since the JPEG file format was standardized in 1992 and GIFs became capable of showing multiple frames of cat mischief.

But under the hood, the complex realm of raster and vector images is ever changing: new encoders use cues from the fields of computer vision and machine learning to optimize image data, old formats learn new tricks and completely new image formats try to take the stage.

To deliver a great user experience, we need to learn to create high performance images and implement an image management strategy: leveraging the ideal image file formats and use advanced techniques to handle the challenges of responsive designs and situational performance.

High performance images increase the perceived performance of your website, improve the user experience and drive conversions.

-------------------

This is the slide deck version of my talk "High Performance Images" as given at the Berlin Web Performance Meetup at 20151027: http://www.meetup.com/de/Berlin-Web-Performance-Group/events/225722896/

Transcript

1. High%Performance%Images Tobias%Baldauf%7%@tbaldauf Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 1
2. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 2
3. Hero%Images Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 3
4. Hero%Image%Delay%-%HID h"p:/ /www.stevesouders.com/blog/2015/05/12/hero9image9custom9metrics/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 4
5. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 5
6. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 6
7. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 7
8. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 8
9. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 9
10. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 10
11. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 11
12. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 12
13. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 13
14. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 14
15. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 15
16. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 16
17. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 17
18. Tools Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 18
19. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 19
20. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 20
21. LQIP h"p:/ /www.guypo.com/introducing3lqip3low3quality3image3placeholders/ h"p:/ /code.facebook.com/posts/991252547593574/the9technology9behind9preview9photos/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 21
22. SQIP Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 22
23. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 23
24. JPEG Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 24
25. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 25
26. JPEG%XR Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 26
27. mozjpeg Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 27
28. To#measure#dissimilarity: DSSIM / /github.com/pornel/dssim Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 28
29. PYSSIM / /github.com/jterrace/pyssim supports'complex'wavelet'structural'similarity Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 29
30. cjpeg&dssim h"p:/ /github.com/technopagan/cjpeg3dssim Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 30
31. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 31
32. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 32
33. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 33
34. AIC Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 34
35. h"p:/ /quasimondo.com/ZorroSVG/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 35
36. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 36
37. JPEG%XT Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 37
38. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 38
39. jpeg%extensions@listserv.uni%stu2gart.de Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 39
40. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 40
41. Compress(JPEGs(with(mozjpeg(today Enhance'it'with'cjpeg.dssim'or'Adept'accordingly Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 41
42. Follow%JPEG%XT%development%and%deploy%ASAP Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 42
43. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 43
44. Tobias'Baldauf @tbaldauf who.tobias.is Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 44