# Every Pixel Has a Price — narration script Runtime 8:43. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode. ## 0:00 · The heaviest thing on the page - `0:01` The median home page in 2025 loaded about a megabyte of images on a desktop, and nine hundred kilobytes on a phone. Half of all pages send more, some much more, making users wait. - `0:17` Fortunately, images can be worth the wait. 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. Images need to earn their place and shouldn't just slow users down. - `0:40` So the first question about any image is: do you need it at all? For those you do, can it be optimized? And only then, when is the best time to get it: now or later? ## 0:55 · Dots or drawings - `0:55` A computer can store a picture two ways. As a grid of dots, each with its own color. That's a raster: JPEG, PNG, GIF, WebP, AVIF. Or as drawing instructions: a circle here, a path there. That's a vector, and on the web, vector means SVG. - `1:17` Zoom in, and the difference shows. The raster logo turns into a staircase of squares, as that's all it ever can be. The SVG stays sharp, because the browser simply draws the circle again, bigger. - `1:32` An SVG can be very small: nine hundred bytes, against nearly ten thousand for the PNG. But the browser has to draw it, or more technically, render it. 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. And vectors only work for pictures someone can describe as shapes: logos, icons, charts, and diagrams. Send those as SVG. - `2:08` 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. - `2:20` Each image type makes sense for different purposes: vectors for drawings, and rasters for photographs. Picking the right type for the job is the first decision you need to make. ## 2:34 · Pixel math - `2:34` Every raster image follows the same arithmetic: width, times height, times the bytes each pixel needs for its color. - `2:46` A full-color pixel needs three bytes: one each for red, green, and blue. So our daisy, eight hundred pixels by five hundred thirty-three, is one point two eight million bytes of raw color. - `3:01` That math is constant over time. 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. What has changed is our screens. - `3:18` Phones and laptops pack two or three device pixels into every CSS pixel, in each direction. So an image meant to look sharp at twice the density needs twice the width, and twice the height. That's four times the pixels. - `3:36` The lake, at sixteen hundred wide instead of eight hundred, is five point one million bytes of raw color instead of one point three. Doubling the width quadrupled the cost. - `3:50` And compression only helps with the network transfer. To draw an image, the browser unpacks it back into raw pixels. A phone photo shrunk by CSS to fit a small column still has to be decoded, and holds its full size in memory. ## 4:07 · Lossless and lossy - `4:08` Given the size, we rarely send the raw pixels of an image. Instead, we encode them in an image format, and each format compresses the data in either a lossless or a lossy fashion. - `4:23` Lossless compression finds patterns and writes them down more briefly, and gives back every pixel exactly. Lossy compression goes further: it throws away detail your eye is unlikely to miss. - `4:39` For a photograph, the difference in approach can be enormous. The daisy as a lossless PNG is seven hundred eleven thousand bytes, more than half the raw size. As a JPEG it's twenty-seven thousand. As AVIF, twelve thousand. Under one percent of the raw pixels, and to most eyes, the same flower. - `5:03` Choosing the format for a photograph, and tuning its compression, is the key to balancing image quality against performance. ## 5:13 · A short tour - `5:14` GIF: or is it jif? The web has argued about that for decades. Whatever you call it, it's one of the oldest formats on the web. - `5:25` GIF is quite limited. 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. Fun fact: GIF has had a renaissance, because animated GIFs are used as reactions in chat. Far from technically superior, it's a great reminder that technology often succeeds for reasons far more complicated than fitness or technical quality. - `5:59` 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. - `6:15` JPEG was made for photographs. It's lossy, it can't be see-through, and pushed too hard it breaks into blocks. JPEGs can be made progressive: the whole picture appears blurry at first, then sharpens. - `6:31` PNG is lossless, with real soft transparency: an edge can be half see-through, so a logo sits cleanly on any background. Perfect for screenshots and sharp graphics. Wasteful for photographs. - `6:48` WebP and AVIF do everything the older formats did, usually in far fewer bytes, and every current browser supports both. - `6:59` And JPEG XL is arriving. As of late 2026, Chrome and Firefox have turned it on, and Safari supports part of it. But its value is still uncertain, because AVIF already does about as well for most web photos. JPEG XL's real strengths are very high quality, and shrinking existing JPEGs with no further loss. ## 7:25 · Same bytes, different picture - `7:25` So is the answer always the smallest file? Look at this chart. On the left, a PNG. On the right, a JPEG squeezed to the very same size. - `7:38` Same bytes. But the JPEG's letters blur and ring, and the PNG's are crisp. JPEG is built for photographs, where every pixel differs from its neighbor. A chart is flat color and sharp edges, and that's something JPEG handles poorly. - `7:57` Go the other way, with a photograph, and squeeze too hard, and the damage is just as plain. When it comes to images, don't go byte crazy. The goal is the smallest file that still looks right. - `8:12` So ask what the picture is. Is it drawn from shapes? Use SVG. Is it a photograph? Use AVIF or WebP, with JPEG as a fallback. Is it a screenshot or pixel art? Use PNG, or lossless WebP. - `8:30` Every pixel has a price. Pay it only for the pixels your readers will see, in the format that suits the image.