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.