(???) !doctype html>
(???) html>
(???) <head>
(???) <meta charset="utf-8" />
(???) <meta name="viewport" content="width=device-width, initial-scale=1.0" />
(???) <!-- <title>Data compression</title> -->
(???) <title>Datacompressie</title>
(???) <link href="/slides.css" rel="stylesheet" />
(???) <script src="/slides.js" type="module"></script>
(???) <!-- <script src="./compression/rle/rle-groceries.js" type="module"></script> -->
(???) <script src="./images/rainbow.js" type="module"></script>
(???) <script src="./compression/rle/rle-interactive.js" type="module"></script>
(???) <link href="./compression/rle/rle-interactive.css" rel="stylesheet" />
(???) <script src="./compression/lz/lz-interactive.js" type="module"></script>
(???) <link href="./compression/lz/lz-interactive.css" rel="stylesheet" />
(???) <!-- <script src="./compression/huffman/huffman-interactive.js" type="module"></script>
(???) <link href="./compression/huffman/huffman-interactive.css" rel="stylesheet" /> -->
(???) <script src="./transform/delta-interactive.js" type="module"></script>
(???) <link href="./transform/delta-interactive.css" rel="stylesheet" />
(???) <!-- <script src="./transform/xor-interactive.js" type="module"></script>
(???) <link href="./transform/xor-interactive.css" rel="stylesheet" /> -->
(???) <script src="/timer.js" type="module"></script>
(???) <script type="module">
(???) import mermaid from "./mermaid/node_modules/mermaid/dist/mermaid.esm.min.mjs";
(???) mermaid.initialize({
(???) startOnLoad: true,
(???) theme: "base",
(???) themeVariables: {
(???) primaryColor: "#27a2cc",
(???) primaryTextColor: "#f9f4f2",
(???) primaryBorderColor: "#0d47a1",
(???) lineColor: "#f9f4f2",
(???) secondaryColor: "#27a2cc",
(???) tertiaryColor: "#27a2cc",
(???) },
(???) });
(???) </script>
(???) <style>
(???) .mindmap-container {
(???) height: 95vh;
(???) margin: auto;
(???) width: 90vw;
(???) }
(???) </style>
(???) </head>
(???) <body>
(???) <main class="slides" tabindex="0" autofocus>
(???) <section class="paragraph" id="navigate-hint">
(???) <p>
(???) <kbd>←</kbd> prev<br />
(???) <kbd>→</kbd> next
(???) </p>
(???) </section>
(???) <section>Datacompressie</section>
(???) <section class="paragraph small" id="print-hint">
(???) Interactive version coming soon!<br /><br />
(???) <a href="https://joriszwart.nl/compression">
(???) joriszwart.nl/compression
(???) </a>
(???) </section>
(???) <section class="paragraph">Hallo, Linux Nijmegen!</section>
(???) <section class="paragraph">We gaan...</section>
(???) <section class="paragraph">
(???) boodschappen doen!
(???) <!-- letterlijk: mensen op een boodschap sturen, iedere persoon haalt 1 sinaasappel bij $winkel -->
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="about">
(???) <pre>
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) </section>
(???) <section class="paragraph">Dat kan efficiënter!</section>
(???) <section class="about">6× 1 sinaasappel</section>
(???) <section>
(???) Questions!
(???) <!-- van mij aan jullie: hoe gebruik je compressie? en hoe denk je dat het werkt? heb je zelf wel eens een compressor geschreven? -->
(???) <!-- Aansprekend: Jan Sloot :-) Pigeon-hole principle. -->
(???) <!-- leg uit: alle niveau's door elkaar, probeer niet per se alles te begrijpen, maar probeer ook niet af te haken, stel vragen als je lost raakt! -->
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(???) ingepakt - uitgepakt
(DIR) 00 × ––––––––––––––––––––––
(???) uitgepakt
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="small">
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(DIR) sinaasappel
(???) </pre>
(???) 78 karakters
(???) </section>
(???) <section class="paragraph">
(???) <pre class="small">
(UUE) × 1 sinaasappel
(???) </pre>
(???) 16 karakters
(???) </section>
(???) <section class="paragraph">
(???) <pre>
(???) 16 karakters - 78 karakters
(DIR) 00 × ––––––––––––––––––––––––––––––
(???) 78 karakters
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) 80% afgevallen
(???) <!-- eigenlijk -80 -->
(???) </section>
(???) <section id="about-joris" class="about">
(???) <a href="https://joriszwart.nl" target="_blank">
(???) <img
(???) src="/joriszwart-logo-uluru.png"
(???) alt="Joris Zwart logo"
(???) width="1000"
(???) height="125"
(???) />
(???) </a>
(???) </section>
(???) <section class="about big">🛎️</section>
(???) <section class="small">
(???) <p>Minder <u>data</u> met behoud van <u>informatie</u>.</p>
(???) </section>
(???) <section class="paragraph small">
(???) <div class="mindmap-container">
(???) <pre class="mermaid">
(???) indmap
(???) root((Datacompressie))
(???) (Redundantie)
(???) [Perceptueel]
(???) [Statistisch]
(???) [Structureel]
(???) (Entropie)
(???) (Lossless)
(???) [Run-Length Encoding]
(???) [Lempel–Ziv familie]
(???) [Sliding window]
(???) [Woordenboek]
(???) [Huffman]
(???) [Frequenties]
(???) [Prefixvrije codes]
(???) (Lossy)
(???) [Perceptuele modellen]
(???) [Auditief]
(???) [Visueel]
(???) [Transforms]
(???) [DCT]
(???) [Frequentiedomein]
(???) [Wavelets]
(???) [Kwantisatie]
(???) [Afronden]
(???) [Bitreductie]
(???) (Video & Audio)
(???) [Temporele redundantie]
(???) [I/P/B-frames]
(???) [Motion vectors]
(???) [Audio]
(???) [Psycho-akoestiek]
(???) [Bitrate-allocatie]
(???) (Trade‑offs)
(???) [Compressieratio]
(???) [CPU]
(???) [RAM]
(???) [Latency]
(???) (Moderne ontwikkelingen)
(???) [Edge-compressie]
(???) </pre>
(???) </div>
(???) </section>
(???) <section>
(???) Lossless vs. lossy
(???) <p class="small">Verliesvrij / verliesrijk</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="100"
(???) ></canvas>
(???) <p class="small">JPEG 100%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="95"
(???) ></canvas>
(???) <p class="small">JPEG 95%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="80"
(???) ></canvas>
(???) <p class="small">JPEG 80%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="50"
(???) ></canvas>
(???) <p class="small">JPEG 50%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="25"
(???) ></canvas>
(???) <p class="small">JPEG 25%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="10"
(???) ></canvas>
(???) <p class="small">JPEG 10%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="5"
(???) ></canvas>
(???) <p class="small">JPEG 5%</p>
(???) </section>
(???) <section class="paragraph">
(???) <canvas
(???) width="800"
(???) height="600"
(???) class="rainbow"
(???) data-quality="1"
(???) ></canvas>
(???) <p class="small">JPEG 1%</p>
(???) </section>
(???) <section class="paragraph">
(???) <!-- TODO dit werkt beter als een grafiek -->
(???) <table>
(???) <caption>
(???) JPEG trade-off
(???) </caption>
(???) <thead>
(???) <tr>
(???) <th>Quality</th>
(???) <th>Size</th>
(???) </tr>
(???) </thead>
(???) <tbody>
(???) <tr>
(???) <td class="center">100%</td>
(???) <td class="number">198,9 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">95%</td>
(???) <td class="number">37,9 kB</td>
(???) </tr>
(???) <tr></tr>
(???) <tr>
(???) <td class="center">80%</td>
(???) <td class="number">16,7 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">50%</td>
(???) <td class="number">10,5 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">25%</td>
(???) <td class="number">6,2 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">10%</td>
(???) <td class="number">4,4 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">5%</td>
(???) <td class="number">4,0 kB</td>
(???) </tr>
(???) <tr>
(???) <td class="center">1%</td>
(???) <td class="number">3,9 kB</td>
(???) </tr>
(???) </tbody>
(???) </table>
(???) </section>
(???) <section>PNG dan?</section>
(???) <section class="paragraph">
(???) Vandaag
(???) <p class="small">Lossless - verliesvrij</p>
(???) </section>
(???) <section class="paragraph">
(???) <div class="mindmap-container">
(???) <pre class="mermaid">
(???) indmap
(???) root((Datacompressie))
(???) (Redundantie)
(???) [Statistisch]
(???) [Structureel]
(???) (Entropie)
(???) (Lossless)
(???) [Run-Length Encoding]
(???) [Lempel–Ziv familie]
(???) [Sliding window]
(???) [Woordenboek]
(???) [Huffman]
(???) [Frequenties]
(???) [Prefixvrije codes]
(???) (Lossy)
(???) (Trade‑offs)
(???) [Compressieratio]
(???) [CPU]
(???) [RAM]
(???) [Latency]
(???) </pre>
(???) </div>
(???) </section>
(???) <section>
(???) RLE
(???) <p class="small">Run-Length Encoding</p>
(???) <!-- TODO ook Run-length limited als tegenstelde? -->
(???) </section>
(???) <section class="paragraph rle-interactive">
(???) <input type="text" class="input box-input" value="AAAABBB"/>
(???) <p>
(???) <span class="direction">⬇</span>
(???) <span class="small">Run-Length Encoding</span>
(???) </p>
(???) <input type="text" class="output box-input" value="4A 3B"/>
(???) <p class="hint small"> </p>
(???) <!-- typische voorbeeld: AAAAABBBBCC ✔️ -->
(???) <!-- typische voorbeeld: ABCDEF nope (maar later: met delta) -->
(???) </section>
(???) <section class="paragraph">
(???) Escape value
(???) <!-- om aan te geven run of een literal (want 1xa is inefficient)-->
(???) <!-- bijv niet gebruikte waarde -->
(???) <!-- TODO voorbeeld -->
(???) </section>
(???) <!-- <section> -->
(???) <!-- TODO voorbeeld -->
(???) <!-- - issue, als alle waarde voorkomen, geen escape, maar! RLE: escape
(???) waarde of 1 bit voor run
(???) </section> -->
(???) <!-- <section class="paragraph small">
(???) of literal (begint al op lz te lijken)
(???) </section> -->
(???) <section>Trade‑offs</section>
(???) <section class="paragraph">Supereenvoudige implementatie</section>
(???) <section class="paragraph">Snelle compressie</section>
(???) <section class="paragraph">Snelle decompressie</section>
(???) <section class="paragraph">
(???) <s>Ghusselede dtaa</s>
(???) </section>
(???) <section>Fun!</section>
(???) <section class="paragraph">
(???) ([A-Z])\1*/g
(???) <p class="small">Inpakken</p>
(???) <!-- codeer -->
(???) </section>
(???) <section class="paragraph">
(???) (\d+)×([A-Z])
(???) <p class="small">Uitpakken</p>
(???) <!-- decodeer -->
(???) </section>
(???) <section>Toepassingen</section>
(???) <section class="paragraph">
(???) BMP, PCX, GIF, JPEG, PNG, Webp (rle, lz, others), Video, Audio, Data, AI
(???) modellen
(???) </section>
(???) <section class="paragraph">HTTP</section>
(???) <!-- <section>C64 decompression sfx</section> -->
(???) <!-- TODO samenvatting na elke methode? RLE: herhaling, LZ: referenties, Huffman: bitsdinges -->
(???) <!-- <section class="paragraph">
(???) Analogie: vacuumkussen (lossless?), ingedikt sinaasappelsap (lossy),
(???) dixap. Ipv soep meenemen, het recept meenemen. Luchtig :-)
(???) </section> -->
(???) <!-- <section class="paragraph">
(???) Spelletje: briefjes met een ascii-tekening? vierkant -> aantal -, aantal
(???) spaties op schrijven, doorgeven (misschien als live website?a)
(???) </section> -->
(???) <section>
(???) LZ
(???) <p class="small">Lempel–Ziv '77</p>
(???) </section>
(???) <section class="paragraph">
(???) LZ77, LZ78, LZMA, LZW, ...
(???) <!-- eigenlijk een familie -->
(???) </section>
(???) <section class="paragraph lz-interactive">
(???) <input type="text" class="input box-input" />
(???) <p>
(???) <span class="direction">⬇</span>
(???) <span class="small">Lempel–Ziv</span>
(???) </p>
(???) <input type="text" class="output box-input" />
(???) <p class="hint small"> </p>
(???) <!-- typische voorbeeld: ABCABCABCDEF ✔️ -->
(???) <!-- typische voorbeeld: 1111112222 (needs escape) -->
(???) <!-- typische voorbeeld, slechte compressie ABDCDEFGHIJ -->
(???) </section>
(???) <section>Trade‑offs</section>
(???) <section class="paragraph">Generiek!</section>
(???) <section class="paragraph">Tekst</section>
(???) <section class="paragraph">CPU / RAM :-(</section>
(???) <section class="paragraph">Implementatie</section>
(???) <!-- <section class="paragraph">
(???) Dansje! -->
(???) <!-- TODO animated dancing figure outline -->
(???) <!-- </section> -->
(???) <!-- <section class="paragraph small">
(???) zip levels 0 = store, 5 = zoek eerste herhaling (dat is snel), 9 = zoek
(???) beste herhaling (langste)
(???) </section> -->
(???) <!-- <section>Intermezzo</section> -->
(???) <!-- <section>ZIP</section> -->
(???) <!-- <section>Store of Deflate (1. lz, 2. huffman)</section> -->
(???) <!-- <section class="small">
(???) TODO canterbury corpus met eigen RLE, eigen LZ en eigen Huffman (en zip
(???) op verschillende levels)
(???) </section> -->
(???) <!-- <section>
(???) Zip vs Rar vs Gzip vs Brotli vs Bzip
(???) in the one corner... zip! in the other! fight!
(???) </section> -->
(???) <section>
(???) Recap
(???) <ul class="small">
(???) <li>Run-Length Encoding: herhaling</li>
(???) <li>Lempel–Ziv: verwijzingen</li>
(???) </ul>
(???) </section>
(???) <!--
(???) <section class="paragraph small">
(???) Workshop?
(???) ik geef twee boodschappen (1 hoge, 1 lage entropie), probeer die zo kort mogelijk over te brengen (lossy en lossless)
(???) The quick brown fox jumps over the lazy dog
(???) zwarte bonen / witte bonen, gesorteerd / ongesorteerd, met zo min mogelijk bonen communiceren?
(???) </section> -->
(???) <!-- <section class="small">
(???) zip compression methods (store, deflate, ....)
(???) </section> -->
(???) <!--
(???) <section class="small">
(???) optimale offset, length - copy over (gratis rle met repeatings (bijv 2 *
(???) 'AB' -> 'ABAB')
(???) </section>
(???) -->
(???) <!-- <section class="small">
(???) ## **3. LZ77 / LZ78 / LZW** **Analogie:** *Een schrijver die zichzelf
(???) citeert* - In plaats van een zin opnieuw te typen, schrijft hij: **“Zie
(???) pagina 3, regel 12, lengte 14”** - Het document wordt kleiner omdat
(???) herhalingen worden vervangen door verwijzingen. - Naarmate het verhaal
(???) langer wordt, wordt het woordenboek rijker.
(???) </section> -->
(???) <!-- "i've written the compressor, decompressor comes later! :-)" (old usenet joke, 1991) -->
(???) <!-- <section class="paragraph">
(???) Dictionary. TODO vergelijk met afkortingen (contactadvertentie like,
(???) sans-serif)
(???) </section> -->
(???) <!-- <section class="paragraph">
(???) (show byte voorbeelden met length, offset) copy trick voor gevorderden!
(???) hoe kies je length, offset, kan ook dynamisch!
(???) </section> -->
(???) <section class="paragraph small">
(???) Symbolen, letters, karakters, bytes, sinaasappels...
(???) <p class="small"></p>
(???) </section>
(???) <section>Compressie = encoding</section>
(???) <section>Decompressie = decoding</section>
(???) <!--
(???) <section class="paragraph small">
(???) Compressie: encoding<br />
(???) Decompressie: decoding
(???) </section> -->
(???) <section>
(???) Huffman
(???) <p class="small">David A. Huffman, 1952</p>
(???) </section>
(???) <section class="paragraph">
(???) Lijkt op...
(???) <!-- maar niet helemaal -->
(???) </section>
(???) <section class="paragraph">
(???) <!-- iemand goed met morse? -->
(???) Morse code!
(???) <!-- <small>Not prefix free!</small> -->
(???) </section>
(???) <section class="paragraph">Naieve codering</section>
(???) <section class="paragraph">
(???) <!-- TODO beeper? -->
(???) <pre>
(???) ➡ - - - - ·
(???) ➡ - - - · -
(???) ➡ - - - · ·
(???) ➡ - - · - -
(???) ➡ - - · - ·
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) <!-- TODO beeper? -->
(???) <pre>
(???) ➡ 0 0 0 0 1
(???) ➡ 0 0 0 1 0
(???) ➡ 0 0 0 1 1
(???) ➡ 0 0 1 0 0
(???) ➡ 0 0 1 0 1</pre
(???) >
(???) <p class="small">26 letters ≈4,7 Morse codes per karakter</p>
(???) <!-- vaste lengte! -->
(???) </section>
(???) <section class="paragraph">Efficiënte codering</section>
(???) <section class="paragraph">
(???) <pre>
(???) ➡ · -
(???) ➡ - · · ·
(???) ➡ - · - ·
(???) ➡ - · ·
(???) ➡ ·
(???) </pre>
(???) <p class="small">26 letters ≈3,2 Morse codes per karakter</p>
(???) <!-- variabele lengte! -->
(???) </section>
(???) <section class="paragraph">
(???) <p class="small">Nederlands: ≈2,7 Morse codes per karakter</p>
(???) </section>
(???) <!-- <section>TODO huffman demo (histogram, tree, output)</section> -->
(???) <section class="paragraph">
(???) Huffman
(???) <p class="small">Nederlands: ≈2,4 bits per karakter</p>
(???) <!-- dus morse doet het helemaal niet zo slecht, maar is niet prefix-free dus je hebt de pauzes nodig -->
(???) </section>
(???) <section>Trade‑offs</section>
(???) <section class="paragraph">Generiek</section>
(???) <section class="paragraph">Veel dezelfde symbolen :-(</section>
(???) <section>
(???) Recap
(???) <ul>
(???) <li>RLE: herhaling</li>
(???) <li>LZ: verwijzingen</li>
(???) <li>Huffman: Morse code-achtig</li>
(???) </ul>
(???) </section>
(???) <section>Algemene trade‑offs</section>
(???) <section class="paragraph">
(???) Kosten
(???) <!-- CPU/ram -->
(???) </section>
(???) <section class="paragraph">vs.</section>
(???) <section class="paragraph">
(???) Baten
(???) <!-- kosten vs baten en de kosten gaan voor de baten uit -->
(???) </section>
(???) <!-- <section>Arithmetic compression</section>
(???) <section class="paragraph">
(???) Out of scope? However, is storing 10 * 6 instead of 1.000.000 a form of
(???) arithmetic compression? And are floating points? (lossy!)
(???) </section>
(???) <section>Brotli</section>
(???) <section class="paragraph">
(???) Special kind (of LZ?). Uses a predefined dictionary for common used
(???) sequences. Compression can be expensive (trade‑off, zien we bij lz
(???) terug). Predictive. Neural.
(???) </section>
(???) <section>Recap - rle - lz - huffman</section> -->
(???) <section>
(???) Transformaties
(???) <!-- grootte blijft meestal ~gelijk, maar niet altijd, zie bwt? en mtf? -->
(???) </section>
(???) <section class="paragraph">Omkeerbaar</section>
(???) <section>Delta encoding</section>
(???) <!-- <section class="paragraph">
(???) Maar ook: delta = old_board XOR new_board (chess)
(???) </section> -->
(???) <section class="paragraph delta-interactive">
(???) <input type="text" class="input" />
(???) <p>
(???) <span class="direction">⬇</span>
(???) <span class="small">Delta encoding</span>
(???) </p>
(???) <input type="text" class="output" />
(???) <p class="hint small"> </p>
(???) <!-- typische voorbeeld: 123456789 ✔️ -->
(???) <!-- typische voorbeeld: 972453186 (maar later: met dubbele delta!) -->
(???) </section>
(???) <section>Fun!</section>
(???) <section class="paragraph small">
(???) decode = a => a.reduce((Σ, Δ, ι, Α) => (Α[ι] = Σ + Δ))
(???) </section>
(???) <section class="paragraph xor-interactive">XOR</section>
(???) <section class="paragraph">
(???) <pre>
(DIR) 1 1 1 1 1 0 0 0
(DIR) 0 0 ⊕ 1 1 1 ––> 0 1 1
(DIR) 0 0 1 0 0 0 0 0
(???) </pre>
(???) <!-- TODO toon aan dat dit minder bytes kost dan twee borden opslaan (rle?) -->
(???) </section>
(???) <!-- TODO rotate emoji's 90deg clockwise? -->
(???) <!-- <section class="paragraph">Surprise, even lang! Maar! 0% :-|</section> -->
(???) <!-- <section>Voorbeeld: svg-delta</section> -->
(???) <section class="paragraph">
(???) PNG filters
(???) <p class="small">none, sub, up, average, paeth</p>
(???) </section>
(???) <section>
(???) BWT
(???) <p class="small">Burrows–Wheeler transform</p>
(???) </section>
(???) <section class="paragraph">
(???) ^BANANA$
(???) <p class="small">Bron: Wikipedia</p>
(???) </section>
(???) <section class="paragraph">
(???) Rotaties<br /><br />
(???) <pre class="small">
(???) B A N A N A $
(???) ^ B A N A N A
(???) $ ^ B A N A N
(???) A $ ^ B A N A
(???) N A $ ^ B A N
(???) A N A $ ^ B A
(???) N A N A $ ^ B
(???) A N A N A $ ^
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) Sorteer<br /><br />
(???) <pre class="small">
(???) strong>A</strong> N A N A $ ^ B
(???) strong>A</strong> N A $ ^ B A N
(???) strong>A</strong> $ ^ B A N A N
(???) strong>B</strong> A N A N A $ ^
(???) strong>N</strong> A N A $ ^ B A
(???) strong>N</strong> A $ ^ B A N A
(???) strong>^</strong> B A N A N A $
(???) strong>$</strong> ^ B A N A N A
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) Laatste kolom<br /><br />
(???) <pre class="small">
(???) span class="dimmed">A N A N A $ ^</span> B
(???) span class="dimmed">A N A $ ^ B A</span> N
(???) span class="dimmed">A $ ^ B A N A</span> N
(???) span class="dimmed">B A N A N A $</span> ^
(???) span class="dimmed">N A N A $ ^ B</span> A
(???) span class="dimmed">N A $ ^ B A N</span> A
(???) span class="dimmed">^ B A N A N A</span> $
(???) span class="dimmed">$ ^ B A N A N</span> A
(???) </pre>
(???) </section>
(???) <section class="paragraph">BNN^AA$A</section>
(???) <section class="paragraph">
(???) Omkeerbaar!
(???) <p class="small">Oefening voor thuis</p>
(???) </section>
(???) <section class="paragraph">
(???) MTF
(???) <p class="small">Move-to-front transform</p>
(???) </section>
(???) <section class="paragraph">
(???) <table class="wikitable" style="font-family: monospace">
(???) <tbody>
(???) <tr>
(???) <th>Iteration</th>
(???) <th>Sequence</th>
(???) <th>List</th>
(???) </tr>
(???) <tr>
(???) <td><b>b</b>ananaaa</td>
(???) <td>1</td>
(???) <td>(abcdefghijklmnopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>b<b>a</b>nanaaa</td>
(???) <td>1,1</td>
(???) <td>(bacdefghijklmnopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>ba<b>n</b>anaaa</td>
(???) <td>1,1,13</td>
(???) <td>(abcdefghijklmnopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>ban<b>a</b>naaa</td>
(???) <td>1,1,13,1</td>
(???) <td>(nabcdefghijklmopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>bana<b>n</b>aaa</td>
(???) <td>1,1,13,1,1</td>
(???) <td>(anbcdefghijklmopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>banan<b>a</b>aa</td>
(???) <td>1,1,13,1,1,1</td>
(???) <td>(nabcdefghijklmopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>banana<b>a</b>a</td>
(???) <td>1,1,13,1,1,1,0</td>
(???) <td>(anbcdefghijklmopqrstuvwxyz)</td>
(???) </tr>
(???) <tr>
(???) <td>bananaa<b>a</b></td>
(???) <td>1,1,13,1,1,1,0,0</td>
(???) <td>(anbcdefghijklmopqrstuvwxyz)</td>
(???) </tr>
(???) </tbody>
(???) </table>
(???) <p class="small">Oefening voor thuis</p>
(???) </section>
(???) <!-- <section class="paragraph">
(???) NP complete issue for some methods? LZ even (number of offset, length
(???) bits)
(???) ook: combineren van methodes als ze beter werken (zip doet dit per block geloof ik)
(???) jpeg: DCT → kwantisatie → zigzag → Huffman (zippen van jpeg levert amper winst op (redundantie ↔ entropie))
(???) ook: aantal bits voor offset/length
(???) RLE -> LZ
(???) </section> -->
(???) <!-- <section class="paragraph">
(???) Compression is AI and AI is compression! (leugens, maar AI gebruikt
(???) compressie en AI kan gebruikt worden om handige waardes te kiezen
(???) (neuraal))
(???) </section> -->
(???) <section>Mythes</section>
(???) <section class="paragraph">
(???) <pre>
(???) Ik heb de compressor gemaakt,
(???) maar de decompressor is nog buggy.
(???) </pre>
(???) </section>
(???) <section class="paragraph">
(???) Recursieve compressie
(???) <!-- kan werken, maar lang niet atlijd -->
(???) </section>
(???) <section class="paragraph">Jan Sloot</section>
(???) <section>Containers</section>
(???) <section class="paragraph">ZIP</section>
(???) <section class="paragraph">
(???) AVI
(???) <!-- ellende -->
(???) </section>
(???) <section class="paragraph">DOCX</section>
(???) <section class="paragraph">JAR</section>
(???) <section class="paragraph">APK</section>
(???) <section class="paragraph">Etc.</section>
(???) <section>
(???) Zelf doen
(???) <p class="small">Niet hier!</p>
(???) </section>
(???) <section>Canterbury Corpus</section>
(???) <section class="paragraph">
(???) tar + gzip
(???) <p class="small">OF</p>
(???) gzip + tar
(???) </section>
(???) <section>QUIZ</section>
(???) <section class="paragraph">De Bijbel</section>
(???) <section class="paragraph">Source code</section>
(???) <section class="paragraph">Foto's</section>
(???) <section class="paragraph">Bouwtekeningen</section>
(???) <section class="paragraph">
(???) DNA
(???) <p class="small">ACGT</p>
(???) <!-- naief: 2 bits per symbool, maar ze komen altijd in paren voor volgens een slimme in het publiek :-) -->
(???) </section>
(???) <section class="paragraph big">π</section>
(???) <!-- <section>IoT -> manual compression (bits'n'bytes)</section> -->
(???) <!-- <section>
(???) huffman: groter als er veel entropie is (net zoals bij rle en lz)
(???) </section> -->
(???) <section>Fun!</section>
(???) <section class="about big">
(???) 💣
(???) <p class="small">42.zip</p>
(???) </section>
(???) <!-- <section>Trick: sorteren (als volgorde er niet to doet)</section> -->
(???) <!-- <section class="paragraph">
(???) <u>Transformaties</u>
(???) <ul>
(???) <li>BWT (BANANA → ANNBAA)</li>
(???) <li>MTF (BANANA → 1,1,13,1,1,1,0,0)</li>
(???) </ul>
(???) </section> -->
(???) <section>
(???) Recap
(???) <ul class="small">
(???) <li>
(???) Compressiemethoden
(???) <ul>
(???) <li>Run-Length Encoding - herhaling</li>
(???) <li>Lempel–-Ziv - verwijzingen</li>
(???) <li>Huffman- Morse code</li>
(???) </ul>
(???) </li>
(???) <li>
(???) Transformaties
(???) <ul>
(???) <li>Delta - verschillen</li>
(???) <li>Burrows–Wheeler - sortering</li>
(???) <li>Move-To-Front - sortering</li>
(???) </ul>
(???) </li>
(???) </ul>
(???) </section>
(???) <section class="small">Compressie is altijd een trade‑off!</section>
(???) <section class="paragraph">
(???) <div class="mindmap-container">
(???) <pre class="mermaid">
(???) indmap
(???) root((Datacompressie))
(???) (Redundantie)
(???) [Statistisch]
(???) [Structureel]
(???) (Entropie)
(???) (Lossless)
(???) [Run-Length Encoding]
(???) [Lempel–Ziv familie]
(???) [Sliding window]
(???) [Woordenboek]
(???) [Huffman]
(???) [Frequenties]
(???) [Prefixvrije codes]
(???) (Lossy)
(???) (Trade‑offs)
(???) [Compressieratio]
(???) [CPU]
(???) [RAM]
(???) [Latency]
(???) </pre>
(???) </div>
(???) </section>
(???) <!-- TODO lossy of kan dit ook predefined dictionary zijn? iedereen kent deze meme? -->
(???) <!-- TODO stelling: elke image format (zelfs SVG?) is lossy (human perceptie etc), maar niet alle image compressie is lossy -->
(???) <!-- <section class="paragraph">
(???) <blockquote>
(???) Dit is een heel mooi mandje, gemaakt door de firma Tichelaar. Werd
(???) gebruikt op tafel als versiering en fruitmandjes.
(???) </blockquote>
(???) </section>
(???) <section class="paragraph">
(???) <blockquote>Mandje van Tichelaar gemaakt in Makkum.</blockquote>
(???) </section>
(???) <section class="paragraph">
(???) <blockquote>Mandje van Tichelaar.</blockquote>
(???) </section> -->
(???) <!-- <section class="paragraph">
(???) <blockquote>Mand!</blockquote> -->
(???) <!-- uitleggen mand -> minder entropie, meer redundantie -->
(???) <!-- </section> -->
(???) <!-- <section>
(???) <p class="small">Next up</p> -->
(???) <!-- TODO password guess char-by-char timing attack '*******' -> 'next up' -->
(???) <!-- </section> -->
(???) <section class="about">
(???) <img src="images/qr.svg" width="30%" />
(???) joriszwart.nl/compression
(???) </section>
(???) </main>
(???) <aside class="timer" data-timer data-minutes="60"></aside>
(???) </body>
(???) /html>