Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Actually Actionable Image Optimization

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.

Tobias Baldauf

May 25, 2023
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. 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 [email protected] [email protected] - - @[email protected] @[email protected] 2/16 2/16
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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/
  8. 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
  9. 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/
  10. 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/