Wirebook › Bonus lesson
What happens when you squish a video too much?
A one-minute video straight off a phone camera would be more than ten gigabytes if every pixel of every picture were saved as it is. Nobody could send that. So before a video is saved or sent, it gets squished, a bit like squashing a giant marshmallow into a tiny cube, and when you press play it boings back to full size. But squish too hard and bits of the picture fall out like crumbs, and too hard again and it goes splat into blocks. Here you can squish a real (tiny) picture yourself and see exactly what falls out.
Squishing means choosing what to throw away
A video squisher (its proper name is a codec, like H.264 or HEVC) cuts every picture into small squares, usually 8 pixels by 8. For each square it asks: what's the main colour, and what wiggles sit on top of it? A smooth patch of sky is nearly all main colour. A square with a whisker in it has lots of tiny, sharp wiggles. The squisher writes down the main colour carefully, keeps the big wiggles, and rounds the tiny ones down to nothing. Those rounded-away wiggles are the crumbs. This is called lossy compression, because some detail is lost on purpose.
It works so well because our eyes are fussy about big shapes and forgiving about tiny details, especially in something that's moving. A gentle squish throws away wiggles you'd never miss and the file is already many times smaller. The squish slider above decides how much rounding happens: the harder you squish, the more wiggles get rounded to zero, and the fewer numbers are left to save.
Why it boings back the same size, but not the same picture
When you press play, the video player unsquishes each square: main colour plus whatever wiggles were kept. It always fills every pixel, so a 1080p video comes back as a full 1920×1080 picture, just like the marshmallow boinging back to full size. But the crumbs aren't in the file any more, so the player can't put them back. It fills the gaps with the smoothest guess. That's why a squished video can look soft or smudgy even though it's still "full HD": the number of pixels stayed the same, the detail didn't.
Too far: blocks and smudgy crumbs
Squish hard enough and each square only keeps its main colour. Now you can see the squares themselves, so the picture looks like it's built from big flat blocks. Around sharp edges, like the cat's outline, you get fuzzy halos too, because the few wiggles that survived don't quite fit the edge any more (video people call it mosquito noise, because it buzzes around edges). Put together, these are called compression artefacts. You'll spot them in a video call on a slow connection, in a dark scene on a streaming service, or in a meme that's been shared a hundred times.
Why a still video squishes better than a wiggly one
A video is about 30 pictures a second, but most of them look almost the same as the one before. So a video only stores a full picture now and then (a keyframe, here every two seconds). For the pictures in between it just writes down what moved: this square slid two pixels left. A cat sitting still is cheap. A wiggling cat, confetti, falling snow or splashing water change everywhere at once, so the in-between pictures cost much more. Tick the wiggling box and watch the file grow. That's also why those scenes are often the first to go blocky.
Three ways to land a jump
An in-between picture is only a list of changes: these pixels are now orange, these are now sky. It means nothing on its own, because it doesn't say what the rest of the picture looks like. So when you skip ahead, the player has a problem, and it can solve it in three ways.
A careful player goes back to the last keyframe and replays every change list up to the moment you asked for. The picture is perfect, but it has to rebuild up to a keyframe's worth of pictures first. That's the short spinner you see after skipping. A snapping player just lands on the nearest keyframe, which is instant and perfect, but not quite where you tapped. Many phone galleries and quick-scrub previews do this, which is why a video sometimes refuses to stop exactly where you want. A rough player starts drawing the new changes on top of whatever was already on screen. You get a picture straight away, but it's wrong: bits of the old scene smear through, and moving things leave trails, until the next keyframe arrives and wipes the slate clean in one go. Video people call these smears glitches, and some artists make them on purpose (it's called datamoshing). You'll also see them for real when a video call or a stream loses a few pieces and the picture smears until the next keyframe.
Keyframes cost the most space, so where to put them is a trade. Close together, every jump is quick and clean, but the file is bigger. Far apart, the file is smaller, but jumps wait longer or smear for longer. Slide the spacing above and watch both numbers. Notice that going from every 2 seconds to every 10 saves only a few percent, which is why most videos settle on a keyframe every second or two, plus an extra one whenever the scene cuts to something new.
Packing instead of squishing
Slide all the way to pack and nothing is thrown away. Lossless packing just finds a shorter way to write the same thing (here it guesses each pixel from the one next to it and only writes down the surprise), so it unpacks into exactly the same picture. That's how ZIP files work, and why zipping photos barely makes them smaller. For real camera footage it only shrinks a video by about a third, because cameras see a little grainy noise everywhere and noise can't be guessed. Squishing wins by a mile, which is why every phone, app and streaming service squishes.
Why a video forwarded ten times looks worse
Every time a messaging app or social site receives a video, it usually squishes it again to save space, and it often resizes or crops it a little first, so the 8×8 squares land in new places. Each new squish rounds away a few more wiggles, and once crumbs have fallen out they never come back. Press Forward a few times above and watch the number of matching pixels slowly drop. Saving again with exactly the same squish and the same squares barely changes anything; it's the moving squares that hurt. If you want to share a video in good quality, send the original file rather than a copy of a copy.
Squishing on purpose
When an email or chat app says a video is too big, you can choose the squish yourself instead of letting the app go splat. The trick is to work out how many bits per second fit, then make the picture a bit smaller (720p instead of 4K) so each pixel gets more of them. The free video size calculator does the sums and writes the commands, and there's a step-by-step guide on squishing a video to a target size. To see the same squishing happen live on a slow connection, try why a video call goes blurry.