WEBVTT 1 00:00:01.200 --> 00:00:10.660 The median home page in 2025 loaded about a megabyte of images on a desktop, and nine hundred kilobytes on a phone. 2 00:00:11.057 --> 00:00:16.825 Half of all pages send more, some much more, making users wait. 3 00:00:17.025 --> 00:00:20.657 Fortunately, images can be worth the wait. 4 00:00:20.845 --> 00:00:34.763 A photograph shows what a paragraph can't and can be very persuasive, but be careful: a study of real shopping visits found that the visits ending in a sale often had fewer images, not more. 5 00:00:35.160 --> 00:00:40.173 Images need to earn their place and shouldn't just slow users down. 6 00:00:40.374 --> 00:00:45.028 So the first question about any image is: do you need it at all? 7 00:00:45.169 --> 00:00:48.267 For those you do, can it be optimized? 8 00:00:48.408 --> 00:00:54.838 And only then, when is the best time to get it: now or later? 9 00:00:55.538 --> 00:00:58.115 A computer can store a picture two ways. 10 00:00:58.115 --> 00:01:00.679 As a grid of dots, each with its own color. 11 00:01:00.751 --> 00:01:07.042 That's a raster: JPEG, PNG, GIF, WebP, AVIF. 12 00:01:07.067 --> 00:01:10.863 Or as drawing instructions: a circle here, a path there. 13 00:01:10.863 --> 00:01:17.061 That's a vector, and on the web, vector means SVG. 14 00:01:17.261 --> 00:01:19.906 Zoom in, and the difference shows. 15 00:01:19.920 --> 00:01:25.270 The raster logo turns into a staircase of squares, as that's all it ever can be. 16 00:01:25.551 --> 00:01:31.911 The SVG stays sharp, because the browser simply draws the circle again, bigger. 17 00:01:32.111 --> 00:01:39.481 An SVG can be very small: nine hundred bytes, against nearly ten thousand for the PNG. 18 00:01:39.657 --> 00:01:44.427 But the browser has to draw it, or more technically, render it. 19 00:01:44.603 --> 00:01:55.132 In a sense, a vector is a storage format that must eventually become pixels, while a raster already has its pixels, but they are set. 20 00:01:55.180 --> 00:02:04.338 And vectors only work for pictures someone can describe as shapes: logos, icons, charts, and diagrams. 21 00:02:04.689 --> 00:02:07.845 Send those as SVG. 22 00:02:08.044 --> 00:02:20.651 A photograph is different: a realistic capture of the world, not easily described by simple shapes, but rather by millions of slightly different colored dots. 23 00:02:20.851 --> 00:02:28.605 Each image type makes sense for different purposes: vectors for drawings, and rasters for photographs. 24 00:02:28.815 --> 00:02:34.108 Picking the right type for the job is the first decision you need to make. 25 00:02:34.808 --> 00:02:45.836 Every raster image follows the same arithmetic: width, times height, times the bytes each pixel needs for its color. 26 00:02:46.035 --> 00:02:51.467 A full-color pixel needs three bytes: one each for red, green, and blue. 27 00:02:51.677 --> 00:03:01.056 So our daisy, eight hundred pixels by five hundred thirty-three, is one point two eight million bytes of raw color. 28 00:03:01.257 --> 00:03:04.181 That math is constant over time. 29 00:03:04.485 --> 00:03:15.210 A six hundred forty by four hundred eighty image, at one byte a pixel, was three hundred kilobytes in the nineteen nineties, and that hasn't changed. 30 00:03:15.514 --> 00:03:18.600 What has changed is our screens. 31 00:03:18.800 --> 00:03:26.461 Phones and laptops pack two or three device pixels into every CSS pixel, in each direction. 32 00:03:26.602 --> 00:03:33.578 So an image meant to look sharp at twice the density needs twice the width, and twice the height. 33 00:03:33.603 --> 00:03:36.423 That's four times the pixels. 34 00:03:36.622 --> 00:03:46.941 The lake, at sixteen hundred wide instead of eight hundred, is five point one million bytes of raw color instead of one point three. 35 00:03:47.338 --> 00:03:50.622 Doubling the width quadrupled the cost. 36 00:03:50.822 --> 00:03:54.083 And compression only helps with the network transfer. 37 00:03:54.479 --> 00:03:58.668 To draw an image, the browser unpacks it back into raw pixels. 38 00:03:58.810 --> 00:04:07.608 A phone photo shrunk by CSS to fit a small column still has to be decoded, and holds its full size in memory. 39 00:04:08.308 --> 00:04:12.753 Given the size, we rarely send the raw pixels of an image. 40 00:04:12.894 --> 00:04:23.329 Instead, we encode them in an image format, and each format compresses the data in either a lossless or a lossy fashion. 41 00:04:23.530 --> 00:04:31.400 Lossless compression finds patterns and writes them down more briefly, and gives back every pixel exactly. 42 00:04:31.796 --> 00:04:38.923 Lossy compression goes further: it throws away detail your eye is unlikely to miss. 43 00:04:39.123 --> 00:04:43.301 For a photograph, the difference in approach can be enormous. 44 00:04:43.442 --> 00:04:50.650 The daisy as a lossless PNG is seven hundred eleven thousand bytes, more than half the raw size. 45 00:04:50.733 --> 00:04:53.900 As a JPEG it's twenty-seven thousand. 46 00:04:53.926 --> 00:04:56.745 As AVIF, twelve thousand. 47 00:04:56.886 --> 00:05:03.339 Under one percent of the raw pixels, and to most eyes, the same flower. 48 00:05:03.539 --> 00:05:13.498 Choosing the format for a photograph, and tuning its compression, is the key to balancing image quality against performance. 49 00:05:14.199 --> 00:05:17.843 GIF: or is it jif? 50 00:05:18.054 --> 00:05:20.863 The web has argued about that for decades. 51 00:05:20.863 --> 00:05:25.505 Whatever you call it, it's one of the oldest formats on the web. 52 00:05:25.705 --> 00:05:27.712 GIF is quite limited. 53 00:05:27.737 --> 00:05:38.718 It has a palette of at most two hundred fifty-six colors, and each pixel is either fully see-through or fully solid, though the image can be animated. 54 00:05:38.859 --> 00:05:46.799 Fun fact: GIF has had a renaissance, because animated GIFs are used as reactions in chat. 55 00:05:47.195 --> 00:05:59.117 Far from technically superior, it's a great reminder that technology often succeeds for reasons far more complicated than fitness or technical quality. 56 00:05:59.317 --> 00:06:15.267 For a photograph, two hundred fifty-six colors wouldn't be enough, so the encoder fakes the rest with a speckle of dots, and those dots are why the daisy as a GIF is eight times the size of the JPEG. 57 00:06:15.467 --> 00:06:18.402 JPEG was made for photographs. 58 00:06:18.486 --> 00:06:24.347 It's lossy, it can't be see-through, and pushed too hard it breaks into blocks. 59 00:06:24.650 --> 00:06:31.603 JPEGs can be made progressive: the whole picture appears blurry at first, then sharpens. 60 00:06:31.803 --> 00:06:42.343 PNG is lossless, with real soft transparency: an edge can be half see-through, so a logo sits cleanly on any background. 61 00:06:42.484 --> 00:06:45.605 Perfect for screenshots and sharp graphics. 62 00:06:45.747 --> 00:06:48.357 Wasteful for photographs. 63 00:06:48.557 --> 00:06:58.981 WebP and AVIF do everything the older formats did, usually in far fewer bytes, and every current browser supports both. 64 00:06:59.181 --> 00:07:02.105 And JPEG XL is arriving. 65 00:07:02.269 --> 00:07:09.175 As of late 2026, Chrome and Firefox have turned it on, and Safari supports part of it. 66 00:07:09.235 --> 00:07:16.025 But its value is still uncertain, because AVIF already does about as well for most web photos. 67 00:07:16.363 --> 00:07:25.023 JPEG XL's real strengths are very high quality, and shrinking existing JPEGs with no further loss. 68 00:07:25.723 --> 00:07:28.658 So is the answer always the smallest file? 69 00:07:29.055 --> 00:07:30.412 Look at this chart. 70 00:07:30.495 --> 00:07:32.896 On the left, a PNG. 71 00:07:32.979 --> 00:07:38.422 On the right, a JPEG squeezed to the very same size. 72 00:07:38.622 --> 00:07:39.920 Same bytes. 73 00:07:40.004 --> 00:07:45.075 But the JPEG's letters blur and ring, and the PNG's are crisp. 74 00:07:45.472 --> 00:07:50.416 JPEG is built for photographs, where every pixel differs from its neighbor. 75 00:07:50.720 --> 00:07:56.894 A chart is flat color and sharp edges, and that's something JPEG handles poorly. 76 00:07:57.094 --> 00:08:03.489 Go the other way, with a photograph, and squeeze too hard, and the damage is just as plain. 77 00:08:03.700 --> 00:08:08.006 When it comes to images, don't go byte crazy. 78 00:08:08.147 --> 00:08:12.580 The goal is the smallest file that still looks right. 79 00:08:12.780 --> 00:08:14.636 So ask what the picture is. 80 00:08:14.638 --> 00:08:16.261 Is it drawn from shapes? 81 00:08:16.263 --> 00:08:17.587 Use SVG. 82 00:08:17.587 --> 00:08:18.980 Is it a photograph? 83 00:08:18.980 --> 00:08:23.647 Use AVIF or WebP, with JPEG as a fallback. 84 00:08:23.647 --> 00:08:26.211 Is it a screenshot or pixel art? 85 00:08:26.259 --> 00:08:30.449 Use PNG, or lossless WebP. 86 00:08:30.649 --> 00:08:32.923 Every pixel has a price. 87 00:08:33.006 --> 00:08:38.565 Pay it only for the pixels your readers will see, in the format that suits the image.