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. Actually
    Actionable
    Image Optimization
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    [email protected]
    [email protected] -
    - @[email protected]
    @[email protected] 1/16
    1/16

    View Slide

  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
    [email protected]
    [email protected] -
    - @[email protected]
    @[email protected] 2/16
    2/16

    View Slide

  3. *
    * https://r0k.us/graphics/kodak/
    https://r0k.us/graphics/kodak/

    View Slide

  4. 4/16
    4/16
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    [email protected]
    [email protected] -
    - @[email protected]
    @[email protected]

    View Slide

  5. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  12. Demo
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    Endlich Anwendbare Bildoptimierung - WWRuhr 05.23
    [email protected]
    [email protected] -
    - @[email protected]
    @[email protected] 12/16
    12/16

    View Slide

  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

    View Slide

  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/

    View Slide

  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/

    View Slide

  16. Thanks!

    View Slide