Picture Perfect - How To Instantly Load Images

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. Optimizing images. How hard could it be?
   

   View Slide

5. Video by fauxels from Pexels
   IMAGES
   ARE KEY
   

   View Slide

6. Image optimization is an evolving topic.
   

   View Slide

7. 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 Slide

8. Fidelity vs. File-size
   
   
   Lossy vs. lossless
   Video by cottonbro from Pexels
   COMPRESSION
   

   View Slide

9. View Slide

10. ORIGINAL PNG - 700KB
    

    View Slide

11. Original - 700KB
    Squoosh.app
    

    View Slide

12. MOZJPEG - Q75 - 53KB
    

    View Slide

13. WEBP - Q75 - 50.6KB
    

    View Slide

14. AVIF - Q30 - 28.8KB
    

    View Slide

15. AVIF - Q38 - 46.9KB
    

    View Slide

16. AVIF - LOSSLESS - 610KB
    

    View Slide

17. WEBP - LOSSLESS - 535KB
    

    View Slide

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

    View Slide

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

    View Slide

20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 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 Slide

25. SPEED
    Encode vs. Decode
    
    
    Static vs. Dynamic
    
    
    Loading
    

    View Slide

26. 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

27. 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

28. View Slide

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

    View Slide

30. MEASURE
    
    
    & OPTIMIZE
    

    View Slide

31. Images impact Web Vitals in a number of ways
    

    View Slide

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

    View Slide

33. 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

34. 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

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

    View Slide

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

    View Slide

37. Serving Modern Image Formats
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

38. Picking an image format
    • Compression
    
    • Speed
    
    • Limitations
    
    • Animation
    
    • Features
    
    • Tooling
    

    View Slide

39. 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

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

    View Slide

41. Picking an image format
    Speed & Features
    

    View Slide

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

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. Images & Developer tooling
    Image format debugging
    

    View Slide

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

    View Slide

49. Images without dimensions
    

    View Slide

50. 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

51. 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

52. 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

53. by width and density
    Responsive images
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. Image lazy-loading
    Defer o
    ff
    screen images
    

    View Slide

58. Image lazy-loading
    Eager image fetching
    

    View Slide

59. Lazy-loading responsive images
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    loading="lazy"
    
    
    width="400"
    
    
    height="400">
    Lazy-loading images
    

    View Slide

60. Image lazy-loading
    Lazy image fetching
    

    View Slide

61. Only lazy-load offscreen images
    

    View Slide

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

    View Slide

63. Preload Largest Contentful Paint image
    Lighthouse audit
    

    View Slide

64. Request your image early
    
    
    
    
    
    
    
    
    href="donut.jpg"
    
    
    imagesrcset="
    
    
    poster_400px.jpg 400w,
    
    
    poster_800px.jpg 800w,
    
    
    poster_1600px.jpg 1600w"
    
    
    imagesizes="50vw">
    
    
    

    View Slide

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

    View Slide

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

    View Slide

67. 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

68. Video by KoolShooters from Pexels
    IMAGES ARE SO
    
    
    COMPLICATED
    

    View Slide

69. 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

70. 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

71. 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

72. Next.js Image Component
    

    View Slide

73. 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

74. Next.js Image Component
    

    View Slide

75. Next.js Image Component
    

    View Slide

76. THE BEST OPTIMIZATIONS
    
    
    IMPROVE USER-EXPERIENCE
    AND BUSINESS OUTCOMES.
    

    View Slide

77. 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

78. AUTOMATE
    
    
    BEST PRACTICES
    Video by Mikhail Nilov from Pexels
    

    View Slide

79. Thank you!
    @addyosmani
    

    View Slide