What Really Happens When You Zip A File
An animated walkthrough of file compression internals, moving from a repetitive text file to the ZIP container format and the DEFLATE algorithm inside it. It distinguishes ZIP as a container format from DEFLATE as the compression method, then traces LZ77-style back-references using the string ABCDABCDEFABCDEF to show how repeated sequences become distance-length pairs. Useful for software engineers wanting an accurate mental model of lossless compression rather than a vague notion of duplicate removal.
Narrated · 9:16 · every frame verified for overlaps, spacing and edges before rendering
The prompt that made it
Create a polished 60–90 second technical animation explaining **“What actually happens when you ZIP a file?”** Audience: software engineers and technically curious developers. Style: clean, modern, dark technical visualization. Use monospace text for data, smooth transformations, arrows, highlighting, and minimal decoration. Make the animation feel like a professional computer-science explainer, not a generic cartoon. ### Scene 1 — The problem Start with: ``` report.txt 120 KB ``` Show simplified repetitive content: ``` hello world hello world hello world configuration configuration ``` Ask visually: ``` “Can we represent this using fewer bytes?” ``` Do not imply compression simply deletes duplicate data. ### Scene 2 — ZIP vs DEFLATE Show: ``` report.txt ↓ ZIP it ↓ report.zip ``` Then zoom inside the ZIP file and show: ``` ZIP ├── file metadata ├── compressed data └── directory information ``` Clearly label: ``` ZIP = container/file format DEFLATE = compression method ``` Do not treat ZIP and DEFLATE as the same thing. ### Scene 3 — LZ77-style compression Use this example: ``` ABCDABCDEFABCDEF ``` Display characters individually. Process the data from left to right. When the first `ABCD` appears, show it being stored normally. When the second `ABCD` appears, highlight the previous occurrence and draw a backward reference. Replace the repeated sequence conceptually with: ``` <distance=4, length=4> ``` Then visually explain: ``` “Go back 4 positions and copy 4 symbols.” ``` Make the backward reference extremely clear. Do NOT represent this as run-length encoding. ### Scene 4 — Sliding window Show a bounded sliding window moving across the input. Example: ``` ┌──────────────────────────┐ │ ... ABCD ... │ └──────────────────────────┘ ↓ current ABCD ``` Highlight a matching sequence inside the previous window. Show the current sequence becoming a length/distance reference. Communicate that the compressor searches previously seen data within a bounded window for useful matches. ### Scene 5 — Huffman coding After LZ77-style matching, show a stream containing literals and length/distance symbols: ``` A B C <length,distance> <length,distance> ``` Explain that frequently occurring symbols can use shorter bit representations. Show a simple frequency visualization: ``` A ██████████ B ██████ C ███ D ██ ``` Then show a simple Huffman tree and visually demonstrate: ``` frequent → shorter code rare → longer code ``` This is a simplified educational example; do not imply the displayed tree is the exact tree for the previous data. ### Scene 6 — DEFLATE Bring everything together: ``` Original data ↓ LZ77-style matching ↓ literals + length/distance pairs ↓ Huffman coding ↓ compressed bitstream ``` Label the complete pipeline: ``` DEFLATE ``` Make it visually obvious that DEFLATE combines LZ77-style compression with Huffman coding. ### Scene 7 — ZIP container Show the compressed DEFLATE data being placed inside a ZIP container: ``` ┌────────────────────────────┐ │ ZIP │ │ │ │ file metadata │ │ compressed DEFLATE data │ │ directory information │ │ │ └────────────────────────────┘ ``` Then show: ``` report.txt 120 KB ↓ DEFLATE ↓ report.zip 38 KB ``` Clearly indicate that the sizes are illustrative only. ### Scene 8 — Decompression Reverse the process: ``` report.zip ↓ DEFLATE decoder ↓ Huffman decoding ↓ LZ77 references resolved ↓ original bytes reconstructed ↓ report.txt ``` End with: ``` LOSSLESS COMPRESSION Same bytes. Smaller representation. ``` ### Technical accuracy Maintain these facts: * ZIP is a container/file format. * DEFLATE is a compression format commonly used inside ZIP. * DEFLATE combines LZ77-style matching with Huffman coding. * Repeated sequences can be represented using length/distance references. * The LZ77 sliding window is bounded. * Huffman coding gives shorter codes to more frequent symbols in the simplified example. * ZIP compression is lossless. * Decompression reconstructs the original bytes exactly. Use simplified examples for visualization, but never sacrifice the underlying technical accuracy. Keep text minimal, transitions smooth, and the data transformations visually obvious.
Make the next one in this series
- Show how Huffman coding assigns shorter codes to frequent bytes after LZ77 tokenization
- Compare DEFLATE with modern compressors like Zstandard and Brotli on speed versus ratio
- Visualize why already-compressed files like JPEGs barely shrink when zipped again
