Picture Perfect - An Image Optimization Talk

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Optimizing images. How hard could it be?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Image optimization is an evolving topic.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

The modern element A delicious donut

Lazy-load Async decode SET DIMENSIONS TO AVOID LAYOUT SHIFTS Placeholder

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Images impact Web Vitals in a number of ways

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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. 🔬 ⛰

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Serving Modern Image Formats Cute puppy

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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/

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

JPEG 68.3KB

Slide 21

Slide 21 text

JPEG 68.3KB

Slide 22

Slide 22 text

WEBP 67.7KB

Slide 23

Slide 23 text

HEIC 69.7KB

Slide 24

Slide 24 text

AVIF 67.6KB

Slide 25

Slide 25 text

JXL 67.0KB

Slide 26

Slide 26 text

Picking an image format Speed & Features

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Images & Developer tooling Image format debugging

Slide 29

Slide 29 text

Identify images that can be better sized Properly size images

Slide 30

Slide 30 text

Images without dimensions

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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?

Slide 33

Slide 33 text

Responsive Images: srcset and sizes A delicious pink donut.

Slide 34

Slide 34 text

by width and density Responsive images

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Image lazy-loading Defer o ff screen images

Slide 39

Slide 39 text

Image lazy-loading Eager image fetching

Slide 40

Slide 40 text

Lazy-loading responsive images

Lazy-loading images

Slide 41

Slide 41 text

Image lazy-loading Lazy image fetching

Slide 42

Slide 42 text

Image discovered late - loaded via JS LCP image preloaded

Slide 43

Slide 43 text

Preload Largest Contentful Paint image Lighthouse audit

Slide 44

Slide 44 text

Request your image early

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Placeholder using background-image A delicious donut

Placeholder Final image

Slide 47

Slide 47 text

https://unsplash.com/photos/qDY9ahp0Mto

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Images in Next.js without Next Image import Head from 'next/head'; export default function Index() { return (

Create Next App

Slide 51

Slide 51 text

Next.js Image Component

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Next.js Image Component

Slide 54

Slide 54 text

Next.js Image Component

Slide 55

Slide 55 text

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)

Slide 56

Slide 56 text

Thank you! @addyosmani

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Compression

Slide 62

Slide 62 text

Speed

Slide 63

Slide 63 text

Limitations

Slide 64

Slide 64 text

Features

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

JPEG@80 213KB

Slide 67

Slide 67 text

WEBP@90 206KB Size reduction 4% vs JPEG DSSIM 0.00103

Slide 68

Slide 68 text

AVIF@75 88KB Size reduction 59% vs JPEG DSSIM 0.00140

Slide 69

Slide 69 text

JXL@61 80KB Size reduction % vs JPEG DSSIM

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

LCP image in the loading filmstrip WebPageTest

Slide 74

Slide 74 text

CLS

Slide 75

Slide 75 text

Images & Developer tooling Largest Contentful Paint element

Slide 76

Slide 76 text

Images & Developer tooling Image Intrinsic Size

Slide 77

Slide 77 text

by width and density Responsive images

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Responsive Breakpoints from Cloudinary Responsive images

Slide 81

Slide 81 text

Serving modern image formats Compression

Slide 82

Slide 82 text

Images & Developer tooling Cloudinary's image analyst tooling

Slide 83

Slide 83 text

Animation

Slide 84

Slide 84 text

Basic element A delicious pink donut.

Slide 85

Slide 85 text

Lazy-loading images A delicious pink donut.

Slide 86

Slide 86 text

Lazy-loading responsive images

Slide 87

Slide 87 text

Request your image early

Slide 88

Slide 88 text

Request your image early

Slide 89

Slide 89 text

Image decoding A delicious donut

Slide 90

Slide 90 text

Responsive Breakpoint Generator

Slide 91

Slide 91 text

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.