https://wow2006.github.io/tools/video-compression/Recent content in Video Compression on Salt and PepperHugoenMon, 03 Aug 2026 00:00:00 +0000https://wow2006.github.io/tools/video-compression/frame-types-explorer/Mon, 03 Aug 2026 00:00:00 +0000https://wow2006.github.io/tools/video-compression/frame-types-explorer/<script src="https://wow2006.github.io/tools/frame-types-explorer/support.js"></script> <x-dc> <helmet> <style> /* Palette follows hello-friend-ng. light-dark() picks the pair member from the active color-scheme, which the theme's [data-theme] toggle pins below. */ .frame-explorer { color-scheme: light dark; --fx-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --fx-bg: transparent; --fx-panel: light-dark(#fafafa, #1b1c1d); --fx-panel-alt: light-dark(#eaeaea, #16181a); --fx-border: light-dark(#dcdcdc, #2b2d31); --fx-border-strong:light-dark(#c2c2c2, #4e4e57); --fx-strong: light-dark(#111111, #f0f4f2); --fx-text: light-dark(#333333, #d6dcd9); --fx-dim: light-dark(#5a5a5a, #9aa5a1); --fx-faint: light-dark(#767676, #7f8b86); --fx-faintest: light-dark(#949494, #55605c); --fx-accent: light-dark(#0f8f56, #62e0a1); --fx-accent-border: light-dark(#b9e6cf, #223028); --fx-accent-wash: light-dark(rgba(15,143,86,.06), rgba(98,224,161,.06)); --fx-accent-fill: light-dark(rgba(15,143,86,.12), rgba(98,224,161,.12)); --fx-on-accent: light-dark(#ffffff, #16181a); --fx-blue: light-dark(#2b6f9e, #7fb6d6); --fx-blue-border: light-dark(#cfe0ec, #22303a); --fx-blue-wash: light-dark(rgba(43,111,158,.06), rgba(127,182,214,.06)); --fx-blue-fill: light-dark(rgba(43,111,158,.16), rgba(127,182,214,.18)); --fx-gray: light-dark(#6b7671, #8d9a94); --fx-gray-border: light-dark(#dcdcdc, #2a2c2b); --fx-gray-wash: light-dark(rgba(107,118,113,.06), rgba(141,154,148,.06)); --fx-amber: light-dark(#a2701a, #d9a656); --fx-amber-fill: light-dark(rgba(162,112,26,.22), rgba(217,166,86,.28)); --fx-red: light-dark(#c0453c, #e0685f); --fx-red-fill: light-dark(rgba(192,69,60,.22), rgba(224,104,95,.25)); --fx-code: light-dark(#1c4b36, #cfe8dc); --fx-row-alt: light-dark(rgba(0,0,0,.03), rgba(255,255,255,.04)); } :root[data-theme="light"] .frame-explorer { color-scheme: light; } :root[data-theme="dark"] .frame-explorer { color-scheme: dark; } .frame-explorer * { box-sizing: border-box; } </style> </helmet> <div class="frame-explorer" style="background: var(--fx-bg); color: var(--fx-text); font-family: inherit; font-size: 15px; line-height: 1.6"> <div style="margin: 0 auto"> <header style="padding: 56px 0 32px 0; border-bottom: 1px solid var(--fx-border); display: flex; gap: 40px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap"> <div style="max-width: 660px"> <div style="font-family: var(--fx-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-accent); margin-bottom: 18px"><a href="https://wow2006.github.io/tools/video-compression/" style="color: var(--fx-faint); text-decoration: none">← Video Compression</a> · Bench Notes 01</div> <h1 style="font-size: 46px; line-height: 1.08; margin: 0 0 18px 0; font-weight: 600; letter-spacing: -0.02em; color: var(--fx-strong)">I, P and B frames</h1> <p style="margin: 0; color: var(--fx-dim); font-size: 17px; text-wrap: pretty">A compressed video is not a stack of pictures. It is one picture plus a long list of <em style="color: var(--fx-text); font-style: normal">instructions for changing it</em>. Everything else — GOP size, B-frame count, seek behaviour, latency, why a dropped packet smears green across your screen — falls out of that one idea. Turn the knobs below and watch it happen.</p>