223015b phase 3: jpeg-pipeline demo (kap3 folie 11 'JPEG 6-schritte übersicht'). horizontal pipeline foto roh 36 MB → 6 schritte → JPEG 3.5 MB. schritte 1 farbraum RGB→Y'CbCr (blau lossless), 2 chroma-subsampling Cb&Cr auf ¼ (orange lossy), 3 8×8 blöcke (blau), 4 DCT frequenz-zerlegung (blau), 5 quantisierung hohe-frequenzen-raus (orange lossy), 6 huffman verlustfrei kürzen (blau). legende mit farb-code blau=lossless orange=lossy. verdict 'der quanten-schritt ist das ganze geheimnis von JPEG. schritte 1/3/4/6 verlieren nichts. schritt 2 wirft farb-detail weg. schritt 5 entscheidet wie viel frequenz-detail verloren geht (quality-stufe). niedrige quality = aggressivere schritt-5-quantisierung'
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--lossless-step: #2563eb;
|
||||
--lossy-step: #ea580c;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pipeline {
|
||||
display: grid;
|
||||
grid-template-columns: 110px repeat(6, 1fr) 110px;
|
||||
gap: 4px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.endpoint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-art { width: 88px; height: 60px; display: block; }
|
||||
.endpoint-label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--dark);
|
||||
}
|
||||
.endpoint-size {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.step {
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
padding: 8px 6px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.step.lossless { border-color: var(--lossless-step); }
|
||||
.step.lossy { border-color: var(--lossy-step); }
|
||||
.step-num {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
.step-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.step.lossless .step-name { color: var(--lossless-step); }
|
||||
.step.lossy .step-name { color: var(--lossy-step); }
|
||||
.step-desc {
|
||||
font-size: 0.66rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; }
|
||||
.legend-swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.legend-swatch.lossless { background: var(--lossless-step); }
|
||||
.legend-swatch.lossy { background: var(--lossy-step); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
border: 2px solid var(--hl);
|
||||
border-radius: 12px;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</h1>
|
||||
<div class="sub">Nur <strong>einer</strong> dieser Schritte verliert Information. Die anderen fünf sind verlustfrei.</div>
|
||||
|
||||
<div class="pipeline">
|
||||
|
||||
<div class="endpoint">
|
||||
<svg class="endpoint-art" viewBox="0 0 88 60">
|
||||
<defs>
|
||||
<linearGradient id="photo-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="55%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
|
||||
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
|
||||
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
|
||||
</svg>
|
||||
<div class="endpoint-label">Foto (Roh)</div>
|
||||
<div class="endpoint-size">~36 MB</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-name">Farbraum</div>
|
||||
<div class="step-desc">RGB → Y'CbCr<br>Helligkeit von Farbe trennen</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossy">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-name">Chroma-Subsampling</div>
|
||||
<div class="step-desc">Cb & Cr auf <strong>¼</strong><br>Auge sieht Farbe grob</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-name">8×8 Blöcke</div>
|
||||
<div class="step-desc">Bild in Kacheln<br>jeder Block einzeln</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-name">DCT</div>
|
||||
<div class="step-desc">Frequenz-Zerlegung<br>häufige Muster</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossy">
|
||||
<div class="step-num">5</div>
|
||||
<div class="step-name">Quantisierung</div>
|
||||
<div class="step-desc"><strong>Hier</strong> wird weggeworfen<br>hohe Frequenzen raus</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">6</div>
|
||||
<div class="step-name">Huffman</div>
|
||||
<div class="step-desc">Verlustfrei kürzen<br>häufig → kurz</div>
|
||||
</div>
|
||||
|
||||
<div class="endpoint">
|
||||
<svg class="endpoint-art" viewBox="0 0 88 60">
|
||||
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
|
||||
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
|
||||
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
|
||||
</svg>
|
||||
<div class="endpoint-label">JPEG</div>
|
||||
<div class="endpoint-size">~3,5 MB</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<span class="legend-item"><span class="legend-swatch lossless"></span>verlustfrei (umkehrbar)</span>
|
||||
<span class="legend-item"><span class="legend-swatch lossy"></span>verlustbehaftet (Information weg)</span>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Der <strong>Quanten-Schritt</strong> ist das ganze Geheimnis von JPEG.</div>
|
||||
<div class="verdict-a">Schritte 1, 3, 4, 6 verlieren nichts. Schritt 2 wirft Farb-Detail weg (Auge merkt nicht). Schritt 5 entscheidet — je nach Qualitäts-Stufe — wie viel <strong>Frequenz-Detail</strong> verloren geht. Niedrige Quality = aggressivere Schritt-5-Quantisierung.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Reference in New Issue
Block a user