Actually Actionable Image Optimization

AVIF, JXL, DSSIM, DPR, CLS, LQIP, srcset, loading=lazy, fetchpriority ... it's not easy to embed a simple photo on a website in a performant way. In this talk, we'll take an active look together at what a real-world usable workflow for high performance images can look like.

From image IDs, cache-keys and metadata for CLS over file formats, automated lossy compression and the picture element, loading strategies and UX we'll look at all important components and their complex interaction - always focused on web performance & real-world maintainability.

Transcript

1. Actually Actionable Image Optimization Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 mail@tobias-baldauf.de mail@tobias-baldauf.de - - @tbaldauf@social.tchncs.de @tbaldauf@social.tchncs.de 1/16 1/16
2. Tobias Baldauf Web since 1999 Perf since 2011 at Akamai, trivago & Speed Kit Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 mail@tobias-baldauf.de mail@tobias-baldauf.de - - @tbaldauf@social.tchncs.de @tbaldauf@social.tchncs.de 2/16 2/16
3. * * https://r0k.us/graphics/kodak/ https://r0k.us/graphics/kodak/
4. 4/16 4/16 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 mail@tobias-baldauf.de mail@tobias-baldauf.de - - @tbaldauf@social.tchncs.de @tbaldauf@social.tchncs.de
6. Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://developer.mozilla.org/en- https://developer.mozilla.org/en- US/docs/Web/HTTP/Headers/Cache-Control US/docs/Web/HTTP/Headers/Cache-Control 6/16 6/16
7. In: ~9MB Out: ~550KB Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://github.com/ImageMagick/ImageMagick https://github.com/ImageMagick/ImageMagick 7/16 7/16
8. In: ~550KB Out: ~78KB Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://github.com/mozilla/mozjpeg https://github.com/mozilla/mozjpeg 8/16 8/16
9. In: ~550KB Out: ~48KB Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://jakearchibald.com/2020/avif-has-landed/ https://jakearchibald.com/2020/avif-has-landed/ 9/16 9/16
10. Y U NO DSSIM? Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://github.com/cloudinary/ssimulacra2 https://github.com/cloudinary/ssimulacra2 10/16 10/16
11. 11/16 11/16 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/ https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
12. Demo Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 mail@tobias-baldauf.de mail@tobias-baldauf.de - - @tbaldauf@social.tchncs.de @tbaldauf@social.tchncs.de 12/16 12/16
13. AND Y U NO L/SQIP? Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://evanw.github.io/thumbhash/ https://evanw.github.io/thumbhash/ 13/16 13/16
14. LCP IMG 14/16 14/16 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://addyosmani.com/blog/lazy-loading/ https://addyosmani.com/blog/lazy-loading/
15. BLF IMGs 15/16 15/16 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 Endlich Anwendbare Bildoptimierung - WWRuhr 05.23 * * https://web.dev/browser-level-image-lazy-loading/ https://web.dev/browser-level-image-lazy-loading/
16. Thanks!