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.

96270e4c3e5e9806cf7245475c00b275?s=128

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
  2. Video by KoolShooters from Pexels PERFECT PICTURES ON THE WEB

  3. None
  4. Optimizing images. How hard could it be?

  5. Video by fauxels from Pexels IMAGES ARE KEY

  6. Image optimization is an evolving topic.

  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 <source> elements for <picture> • and more! 2020-2022
  8. Fidelity vs. File-size Lossy vs. lossless Video by cottonbro from

    Pexels COMPRESSION
  9. None
  10. ORIGINAL PNG - 700KB

  11. Original - 700KB Squoosh.app

  12. MOZJPEG - Q75 - 53KB

  13. WEBP - Q75 - 50.6KB

  14. AVIF - Q30 - 28.8KB

  15. AVIF - Q38 - 46.9KB

  16. AVIF - LOSSLESS - 610KB

  17. WEBP - LOSSLESS - 535KB

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

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

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

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

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

  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 <picture> 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.
  25. SPEED Encode vs. Decode Static vs. Dynamic Loading

  26. The modern <img> element <img src="donut-800w.jpg" 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
  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
  28. None
  29. There are many ways to load an image. https://goo.gle/3eLzPux

  30. MEASURE & OPTIMIZE

  31. Images impact Web Vitals in a number of ways

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

  33. Optimal image serving for Web Vitals • For a fast

    Largest Contentful Paint • Request your key hero image early • Use <picture>, 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.
  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. 🔬 ⛰
  35. https://twitter.com/TimVereecke/status/1372210487191085063 https://twitter.com/OliverJAsh/status/1441095716227543042

  36. Images & Developer tooling Identify images that could be served

    in a more modern format
  37. Serving Modern Image Formats <picture> <source srcset="puppy.avif" type="image/avif"> <source srcset="puppy.webp"

    type="image/webp"> <source srcset="puppy.jpg" type="image/jpeg"> <img src="puppy.jpg" alt="Cute puppy"> </picture>
  38. Picking an image format • Compression • Speed • Limitations

    • Animation • Features • Tooling
  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/
  40. When lossy compression is good enough, AVIF can deliver significantly

    better results than the existing web codecs, including WebP.
  41. Picking an image format Speed & Features

  42. Image Optimization Tooling • Squoosh • Imagemin • ImageMagick •

    Sharp / Jimp • Thumbor • ImageOptim • XnConvert • Image CDNs
  43. None
  44. None
  45. None
  46. None
  47. Images & Developer tooling Image format debugging

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

  49. Images without dimensions

  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
  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?
  52. Responsive Images: srcset and sizes <img src="donut-800w.jpg" alt="A delicious pink

    donut." width="400" height="400" srcset="donut-400w.jpg 400w, donut-800w.jpg 800w" sizes="(max-width: 640px) 400px, 800px">
  53. <img srcset> by width and density Responsive images

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

  55. Image Aspect Ratio Reserve space for responsive and lazy-loaded images

    Padding-top hack Mapped aspect-ratio Explicit aspect-ratio
  56. Enhanced image preview in DevTools File size, rendered size, rendered

    aspect ratio, intrinsic size, intrinsic aspect ratio
  57. Image lazy-loading Defer o ff screen images

  58. Image lazy-loading Eager image fetching

  59. Lazy-loading responsive images <!-- Lazy-load images in <picture>. <img> is

    the one driving image loading --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy"> </picture> <img src="donut.jpg" alt="A delicious pink donut." loading="lazy" width="400" height="400"> Lazy-loading images
  60. Image lazy-loading Lazy image fetching

  61. Only lazy-load offscreen images

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

  63. Preload Largest Contentful Paint image Lighthouse audit

  64. Request your image early <link rel="preload" as="image" href="donut.jpg"> <link rel="preload"

    as="image" href="donut.webp" type="image/webp"> <link rel="preload" as="image" href="donut.jpg" imagesrcset=" poster_400px.jpg 400w, poster_800px.jpg 800w, poster_1600px.jpg 1600w" imagesizes="50vw">
  65. https://twitter.com/patmeenan/status/1443219921522073601

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

    loads in
  67. Placeholder using background-image <img src="donut-800w.jpg" 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
  68. Video by KoolShooters from Pexels IMAGES ARE SO COMPLICATED

  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
  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
  71. Images in Next.js without Next Image import Head from 'next/head';

    export default function Index() { return ( <div> <Head><title>Create Next App</title></Head> <main> <div> <img src="/donut1.jpeg" alt="Donut" height={700} width={700} /> <img src="/donut2.jpeg" alt="Donut" height={700} width={700} /> </div> </main>
  72. Next.js Image Component

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

    import Image from 'next/image'; export default function Index() { return ( <div> <Head><title>Next.js Image Component</title></Head> <main> <div> <Image src="/donut1.jpeg" alt="Donut" height={700} width={700} /> <Image src="/donut2.jpeg" alt="Donut" height={700} width={700} /> </div>
  74. Next.js Image Component

  75. Next.js Image Component

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

  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)
  78. AUTOMATE BEST PRACTICES Video by Mikhail Nilov from Pexels

  79. Thank you! @addyosmani