207 lines
6.2 KiB
HTML
207 lines
6.2 KiB
HTML
<!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>
|