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
   

   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
   mail@tobias-baldauf.de
   mail@tobias-baldauf.de -
   - @tbaldauf@social.tchncs.de
   @tbaldauf@social.tchncs.de 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
   mail@tobias-baldauf.de
   mail@tobias-baldauf.de -
   - @tbaldauf@social.tchncs.de
   @tbaldauf@social.tchncs.de
   

   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
    mail@tobias-baldauf.de
    mail@tobias-baldauf.de -
    - @tbaldauf@social.tchncs.de
    @tbaldauf@social.tchncs.de 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