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

Picture Perfect - How To Instantly Load Images

Picture Perfect - How To Instantly Load Images

Images have been a key part of the web for decades. Our brains interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement. Just think about landing pages and product photos, feature panels and hero areas. To be effective, all these images need to be carefully orchestrated to appear on the screen fast — but as it turns out, loading images efficiently at scale isn’t a project for a quiet afternoon.

Image optimization, loading behavior and rendering in the browser require understanding of image formats and image compression techniques, image decoding and browser rendering, image CDNs and adaptive media loading, not to mention effective caching and preloading. In this talk, you'll learn the tips and tricks that help production sites deliver images that have optimal Largest Contentful Paint and minimum Cumulative Layout Shift.

Addy Osmani

August 01, 2022
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. PICTURE PERFECT
    A D D Y O S M A N I
    MODERN IMAGE OPTIMIZATION

    View full-size slide

  2. Video by KoolShooters from Pexels
    PERFECT PICTURES ON THE WEB

    View full-size slide

  3. Optimizing images. How hard could it be?

    View full-size slide

  4. Video by fauxels from Pexels
    IMAGES
    ARE KEY

    View full-size slide

  5. Image optimization is an evolving topic.

    View full-size slide

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

    • AVIF image decode support landing in Chrome, Firefox and Safari

    • JPEGXL decoding behind a
    fl
    ag in Chrome

    • Lazy-loading images in Chrome, FF, Safari. 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-2022

    View full-size slide

  7. Fidelity vs. File-size


    Lossy vs. lossless
    Video by cottonbro from Pexels
    COMPRESSION

    View full-size slide

  8. ORIGINAL PNG - 700KB

    View full-size slide

  9. Original - 700KB
    Squoosh.app

    View full-size slide

  10. MOZJPEG - Q75 - 53KB

    View full-size slide

  11. WEBP - Q75 - 50.6KB

    View full-size slide

  12. AVIF - Q30 - 28.8KB

    View full-size slide

  13. AVIF - Q38 - 46.9KB

    View full-size slide

  14. AVIF - LOSSLESS - 610KB

    View full-size slide

  15. WEBP - LOSSLESS - 535KB

    View full-size slide

  16. Avid (4:4:4) @ 19.8KB
    THE 20KB CHALLENGE

    View full-size slide

  17. JPEG - Q18 - 20KB
    4:4:4

    View full-size slide

  18. 8x8 BLOCKS
    HALOS
    DETAIL LOSS
    https://goo.gle/2Wsr16A
    JPEG
    DISTORTIONS

    View full-size slide

  19. WEBP - Q24 - 20KB
    NO LOSSY 4:4:4

    View full-size slide

  20. AVIF - Q25 - 19.8KB
    4:4:4

    View full-size slide

  21. Modern image formats
    • AVIF is a solid
    fi
    rst choice if lossy, low-
    fi
    delity compression is acceptable
    and saving bandwidth is the number one priority. Assuming encode/decode
    speeds meet your needs.
    • WebP is more widely supported and may be used for rendering regular
    images where advanced features like wide color gamut or text overlays are
    not required.
    • AVIF may not be able to compress non-photographic images as well as PNG.
    Compression savings from WebP may be lower than JPEG for high-
    fi
    delity lossy
    compression.

    • If both AVIF and WebP are not viable options, consider evaluating MozJPEG
    (optimize JPEG images), OxiPNG (non-photographic images), or JPEG 2000
    (lossy or lossless photographic images)

    • Progressive enhancement via lets the browser choose the
    fi
    rst
    supported format in the order of preference. This implementation is considerably
    simpli
    fi
    ed when using image CDN’s where the Accept Header and content
    negotiation (e.g. auto-format and quality) can serve the best image.

    View full-size slide

  22. SPEED
    Encode vs. Decode


    Static vs. Dynamic


    Loading

    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. MEASURE


    & OPTIMIZE

    View full-size slide

  27. Images impact Web Vitals in a number of ways

    View full-size slide

  28. Speed Metrics Changelog https://goo.gle/csmlog

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. https://twitter.com/TimVereecke/status/1372210487191085063 https://twitter.com/OliverJAsh/status/1441095716227543042

    View full-size slide

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

    View full-size slide

  33. Serving Modern Image Formats


















    View full-size slide

  34. Picking an image format
    • Compression

    • Speed

    • Limitations

    • Animation

    • Features

    • Tooling

    View full-size slide

  35. 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 full-size slide

  36. When lossy compression is good enough, AVIF can
    deliver significantly better results than the existing web
    codecs, including WebP.

    View full-size slide

  37. Picking an image format
    Speed & Features

    View full-size slide

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

    View full-size slide

  39. Images & Developer tooling
    Image format debugging

    View full-size slide

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

    View full-size slide

  41. Images without dimensions

    View full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. by width and density
    Responsive images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Image lazy-loading
    Defer o
    ff
    screen images

    View full-size slide

  50. Image lazy-loading
    Eager image fetching

    View full-size slide

  51. Lazy-loading responsive images




















    loading="lazy"


    width="400"


    height="400">
    Lazy-loading images

    View full-size slide

  52. Image lazy-loading
    Lazy image fetching

    View full-size slide

  53. Only lazy-load offscreen images

    View full-size slide

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

    View full-size slide

  55. Preload Largest Contentful Paint image
    Lighthouse audit

    View full-size slide

  56. Request your image early








    href="donut.jpg"


    imagesrcset="


    poster_400px.jpg 400w,


    poster_800px.jpg 800w,


    poster_1600px.jpg 1600w"


    imagesizes="50vw">


    View full-size slide

  57. https://twitter.com/patmeenan/status/1443219921522073601

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

  60. Video by KoolShooters from Pexels
    IMAGES ARE SO


    COMPLICATED

    View full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. Next.js Image Component

    View full-size slide

  65. 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 full-size slide

  66. Next.js Image Component

    View full-size slide

  67. Next.js Image Component

    View full-size slide

  68. THE BEST OPTIMIZATIONS


    IMPROVE USER-EXPERIENCE
    AND BUSINESS OUTCOMES.

    View full-size slide

  69. 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 full-size slide

  70. AUTOMATE


    BEST PRACTICES
    Video by Mikhail Nilov from Pexels

    View full-size slide

  71. Thank you!
    @addyosmani

    View full-size slide