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

Picture Perfect - An Image Optimization Talk

Picture Perfect - An Image Optimization Talk

Learn the tips and tricks that help production sites deliver images that have optimal Largest Contentful Paint and minimum Cumulative Layout Shift.

Addy Osmani

June 02, 2022
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. Addy Osmani
    Picture Perfect
    Toronto WebPerf
    https://unsplash.com/photos/uf-IaeduFfk

    View Slide

  2. View Slide

  3. Optimizing images. How hard could it be?

    View Slide

  4. View Slide

  5. Image optimization is an evolving topic.

    View Slide

  6. Major changes in the image landscape
    • WebP support in all modern browsers

    • AVIF image decode support landing in Chrome & Firefox

    • JPEGXL decoding behind a
    fl
    ag in Chrome

    • Lazy-loading images in Chrome, FF, Safari TP. A default in WordPress

    • Compute img/video aspect ratio from width/height attributes

    • FF support for preload, Chrome: imagesrcset and imagesizes on link rel=preload

    • width/height on elements for

    • and more!
    2020-2021

    View Slide

  7. The modern element


    alt="A delicious donut"


    width="400"


    height="400"


    srcset="donut-400w.jpg 400w,


    donut-800w.jpg 800w"


    sizes="(max-width: 640px) 400px,


    800px"


    loading="lazy"


    decoding="async"


    style="background-size: cover;


    background-image:


    url(data:image/svg+xml;base64,[svg text]);">


    Lazy-load
    Async decode
    SET DIMENSIONS TO AVOID


    LAYOUT SHIFTS
    Placeholder

    View Slide

  8. 50%
    of the brain is
    involved in visual
    processing
    Time to get
    the sense of a
    visual scene
    0.01s
    How much we
    recall of what we
    see or do vs. 20%
    of what we read.
    80%
    Increase in
    willingness to
    read due to color
    visuals.
    80%
    Neuroscience
    How much audiences
    more likely to be
    persuaded by a talk
    with visuals vs. a
    purely verbal one
    17%
    To process a
    symbol and
    100ms to attach
    meaning to it.
    150ms
    Sources: goo.gle/imgsci

    View Slide

  9. View Slide

  10. There are many ways
    to load an image.
    https://goo.gle/3eLzPux

    View Slide

  11. Images impact Web Vitals in a number of ways

    View Slide

  12. Optimal image serving for Web Vitals
    • For a fast Largest Contentful Paint
    • Request your key hero image early

    • Use , srcset + e
    ff i
    cient modern image formats

    • Avoid wasting pixels (compress, don't serve overly high DPR images)

    • Lazy-load o
    ff
    screen images (reduce network contention for key resources)

    • For a low Cumulative Layout Shift
    • Set dimensions (width, height) on your images

    • Use CSS aspect-ratio or aspect-ratio boxes to reserve space otherwise

    • For a low impact First Input Delay
    • Avoid images causing network contention with other critical resources like CSS and JS.

    View Slide

  13. Largest Contentful Paint Element
    Lighthouse Audit
    function getLCPDebugTarget(entries) {


    const lastEntry = entries[entries.length - 1];


    return lastEntry.element;


    }


    LCP API (RUM)
    web.dev/debug-web-vitals-in-the-
    fi
    eld/
    User devices have
    di
    ff
    erent screen
    resolutions, which results
    in di
    ff
    erent page layouts
    and thus di
    ff
    erent
    elements being visible
    within the viewport.

    Content may be
    personalized for the
    current user, so the LCP
    candidate element could
    vary wildly from user to
    user.
    🔬 ⛰

    View Slide

  14. Images & Developer tooling
    Identify images that could be served in a more modern format

    View Slide

  15. Serving Modern Image Formats





















    View Slide

  16. Picking an image format
    Compression
    • Compression

    • Speed

    • Limitations

    • Animation

    • Features

    • Tooling

    View Slide

  17. JPEG 80 vs AVIF 70 vs WEBP 85
    54% size reduction vs JPEG 26% size reduction vs JPEG
    https://www.industrialempathy.com/posts/avif-webp-quality-settings/

    View Slide

  18. When lossy compression is good enough, both AVIF and
    JPEG XL deliver significantly better results than the
    existing web codecs, including WebP.

    View Slide

  19. Original
    1.7MB
    How much can we get out of ~70KB?

    View Slide

  20. JPEG
    68.3KB

    View Slide

  21. JPEG
    68.3KB

    View Slide

  22. WEBP
    67.7KB

    View Slide

  23. HEIC
    69.7KB

    View Slide

  24. AVIF
    67.6KB

    View Slide

  25. JXL
    67.0KB

    View Slide

  26. Picking an image format
    Speed & Features

    View Slide

  27. Image Optimization Tooling
    Squoosh
    • Imagemin
    • ImageMagick
    • Sharp / Jimp
    • Thumbor
    • ImageOptim
    • XnConvert
    • Image CDNs

    View Slide

  28. Images & Developer tooling
    Image format debugging

    View Slide

  29. Identify images that can be better sized
    Properly size images

    View Slide

  30. Images without dimensions

    View Slide

  31. Layout Shifts from images without dimensions
    Lighthouse audit
    function getCLSDebugTarget(entries) {


    const largestShift = entries.reduce((


    return a && a.value > b.value ? a :


    });


    if (largestShift && largestShift.sour


    const largestSource = largestShift.


    return a.node && a.previousRect.w


    b.previousRect.width * b.prev


    });


    if (largestSource) {


    return largestSource.node;


    }


    }




    PerformanceObserver

    View Slide

  32. Lots of factors determine the best image size
    • Many factors determine the best image size

    • Screen size and resolution

    • Viewport

    • Layout and responsive breakpoints

    • Device pixel ratio (physical resolution)

    • Art direction
    Can one size
    fi
    t all?

    View Slide

  33. Responsive Images: srcset and sizes


    alt="A delicious pink donut."


    width="400"


    height="400"


    srcset="donut-400w.jpg 400w,


    donut-800w.jpg 800w"


    sizes="(max-width: 640px) 400px,


    800px">

    View Slide

  34. by width and density
    Responsive images

    View Slide

  35. Device Pixel Ratio (DPR) / Pixel Density Capping
    Responsive images

    View Slide

  36. Image Aspect Ratio
    Reserve space for responsive and lazy-loaded images
    Padding-top hack Mapped aspect-ratio Explicit aspect-ratio

    View Slide

  37. Enhanced image preview in DevTools
    File size, rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio

    View Slide

  38. Image lazy-loading
    Defer o
    ff
    screen images

    View Slide

  39. Image lazy-loading
    Eager image fetching

    View Slide

  40. Lazy-loading responsive images




















    loading="lazy"


    width="400"


    height="400">
    Lazy-loading images

    View Slide

  41. Image lazy-loading
    Lazy image fetching

    View Slide

  42. Image discovered late - loaded via JS
    LCP image
    preloaded

    View Slide

  43. Preload Largest Contentful Paint image
    Lighthouse audit

    View Slide

  44. Request your image early








    href="donut.jpg"


    imagesrcset="


    poster_400px.jpg 400w,


    poster_800px.jpg 800w,


    poster_1600px.jpg 1600w"


    imagesizes="50vw">


    View Slide

  45. Blurry placeholder images
    Approximate the
    fi
    nal image before it loads in

    View Slide

  46. Placeholder using background-image


    alt="A delicious donut"


    width="400"


    height="400"


    srcset="donut-400w.jpg 400w,


    donut-800w.jpg 800w"


    sizes="(max-width: 640px) 400px,


    800px"


    loading="lazy"


    decoding="async"


    style="background-size: cover;


    background-image:


    url(data:image/svg+xml;base64,[svg text]);">


    Placeholder Final image

    View Slide

  47. https://unsplash.com/photos/qDY9ahp0Mto

    View Slide

  48. Next.js Image Component
    • Automatic srcsets for images
    • Enforced sizing to prevent layout shift
    • Automatic lazy-loading of o
    ff
    screen assets
    • Framework-speci
    fi
    c asset prioritization optimizations
    • Flexible layout options
    • Customizable loader support for any image server or CDN
    Features and bene
    fi
    ts
    Up to 60% faster
    LCP and up to
    100% reduced CLS

    View Slide

  49. Next.js Image Component
    Features and bene
    fi
    ts
    • Automatic srcsets for images

    • Enforced sizing to prevent layout shift

    • Automatic lazy-loading of o
    ff
    screen assets

    • Framework-speci
    fi
    c asset prioritization optimizations

    • Flexible layout options

    • Customizable loader support for any image server or CDN
    Up to 60% faster LCP and up
    to 100% reduced CLS

    View Slide

  50. Images in Next.js without Next Image
    import Head from 'next/head';


    export default function Index() {


    return (





    Create Next App










    alt="Donut" height={700} width={700} />




    alt="Donut" height={700} width={700} />










    View Slide

  51. Next.js Image Component

    View Slide

  52. Images in Next.js with Next Image
    import Head from 'next/head';


    import Image from 'next/image';


    export default function Index() {


    return (





    Next.js Image Component










    alt="Donut" height={700} width={700} />




    alt="Donut" height={700} width={700} />







    View Slide

  53. Next.js Image Component

    View Slide

  54. Next.js Image Component

    View Slide

  55. 31% improvement in LCP increased sales by 8%
    Optimizations to improve LCP included resizing their hero image, optimizing SVGs and using media
    queries to limit loading o
    ff
    screen images.
    Their optimizations to LCP included a 2.5s saving from switching their
    fi
    rst large image from being
    behind JavaScript (client-side hydration) to being directly in the main HTML document.
    70% improvement in LCP correlated with a 76%
    reduction in load abandonment
    They determined shifts were caused after their hero images were loaded and snapped in for the
    fi
    rst view. They used Aspect Ratio Boxes to reserve space before their image was loaded.
    Optimizations to CLS helped increase News page
    views per session by 15%
    French Fashion house Chloè used Link Preload to preload their 1x and 2x Hero images, which were
    previously bottlenecked by a render-blocking script.
    Preloading 1x and 2x Hero images bottlenecked by render-
    blocking script improved LCP by 500ms (based on CrUX)

    View Slide

  56. Thank you!
    @addyosmani

    View Slide

  57. Archive
    Slides that won't make the cut this time.
    • We can still summarize or include as notes.

    View Slide

  58. View Slide

  59. Automating Image Optimization in frameworks
    Image Components
    • Modern image components that build on , like Next.js (for
    React) and Nuxt image (for Vue) try to bake in as many of these concepts as
    possible by default.

    • You can of course also do this manually just using the element directly.

    • If using 11ty for your static sites, try the 11ty high-performance blog template.

    View Slide

  60. Avoid the download and shrink pattern
    Better to use srcset, sizes, to serve images w/right dimensions

    View Slide

  61. Compression

    View Slide

  62. Speed

    View Slide

  63. Limitations

    View Slide

  64. Features

    View Slide

  65. Codec Comparison
    https://www.industrialempathy.com/posts/avif-webp-quality-settings/#visual-veri
    fi
    cation

    View Slide

  66. View Slide

  67. [email protected]
    206KB
    Size reduction
    4% vs JPEG
    DSSIM
    0.00103

    View Slide

  68. [email protected]
    88KB
    Size reduction
    59% vs JPEG
    DSSIM
    0.00140

    View Slide

  69. [email protected]
    80KB
    Size reduction
    % vs JPEG
    DSSIM

    View Slide

  70. JPEG 80 vs WebP 85
    (26% size reduction vs JPEG)

    View Slide

  71. JPEG 80 vs AVIF 70
    (54% size reduction vs JPEG)

    View Slide

  72. Low Fidelity Comparison
    https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg

    View Slide

  73. LCP image in the loading filmstrip
    WebPageTest

    View Slide

  74. CLS

    View Slide

  75. Images & Developer tooling
    Largest Contentful Paint element

    View Slide

  76. Images & Developer tooling
    Image Intrinsic Size

    View Slide

  77. by width and density
    Responsive images

    View Slide

  78. Device Pixel Ratio (DPR) / Pixel Density Capping
    Responsive images

    View Slide

  79. Device Pixel Ratio (DPR) / Pixel Density Capping
    Responsive images

    View Slide

  80. Responsive Breakpoints from Cloudinary
    Responsive images

    View Slide

  81. Serving modern image formats
    Compression

    View Slide

  82. Images & Developer tooling
    Cloudinary's image analyst tooling

    View Slide

  83. Animation

    View Slide

  84. Basic element


    alt="A delicious pink donut."


    width="400"


    height="400">


    View Slide

  85. Lazy-loading images


    alt="A delicious pink donut."


    loading="lazy"


    width="400"


    height="400">


    View Slide

  86. Lazy-loading responsive images


















    View Slide

  87. Request your image early








    href="donut.jpg"


    imagesrcset="


    poster_400px.jpg 400w,


    poster_800px.jpg 800w,


    poster_1600px.jpg 1600w"


    imagesizes="50vw">


    View Slide

  88. Request your image early


    href="donut.jpg"


    imagesrcset="


    poster_400px.jpg 400w,


    poster_800px.jpg 800w,


    poster_1600px.jpg 1600w"


    imagesizes="50vw">


    View Slide

  89. Image decoding


    alt="A delicious donut"


    width="400"


    height="400"


    srcset="donut-400w.jpg 400w,


    donut-800w.jpg 800w"


    sizes="(max-width: 640px) 400px,


    800px"


    loading="lazy"


    decoding="async">


    View Slide

  90. Responsive Breakpoint Generator

    View Slide

  91. Optimal image serving for Web Vitals
    • For a fast Largest Contentful Paint
    • Request your key hero image early

    • Use srcset + e
    ffi
    cient modern image formats

    • Avoid wasting pixels (compress, don't serve overly high DPR images)

    • Lazy-load o
    ff
    screen images (reduce network contention for key resources)

    • For a low Cumulative Layout Shift
    • Set dimensions (width, height) on your images

    • Use CSS aspect-ratio or aspect-ratio boxes to reserve space otherwise

    • For a low impact First Input Delay
    • Avoid images causing network contention with other critical resources like CSS and JS.

    View Slide