120 lines
5.2 KiB
HTML
120 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Drei Modalitäten, ein Hebel</title>
|
||
<style>
|
||
:root {
|
||
--dark: #1a1a2e;
|
||
--muted: #6b7280;
|
||
--soft: #f8fafc;
|
||
--border: #cbd5e1;
|
||
--hl: #d63384;
|
||
--bild: #2563eb;
|
||
--audio: #ea580c;
|
||
--video: #7c3aed;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||
body { padding: 32px 48px; }
|
||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
|
||
|
||
.table { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
|
||
.col-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); padding: 0 8px 4px; }
|
||
|
||
.row-label { font-size: 1.15rem; font-weight: 700; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-radius: 10px; }
|
||
.row-label.bild { background: #dbeafe; color: var(--bild); }
|
||
.row-label.audio { background: #ffedd5; color: var(--audio); }
|
||
.row-label.video { background: #ede9fe; color: var(--video); }
|
||
.row-label small { font-size: 0.78rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
|
||
|
||
.cell { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
|
||
.cell-format { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
|
||
.cell-size { font-size: 1.7rem; font-weight: 700; color: var(--dark); font-family: ui-monospace, monospace; }
|
||
.cell-bar { height: 8px; border-radius: 4px; background: var(--soft); position: relative; overflow: hidden; }
|
||
.cell-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
|
||
|
||
.verdict {
|
||
margin-top: 22px;
|
||
max-width: 1180px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
border: 2px solid var(--hl);
|
||
border-radius: 12px;
|
||
padding: 14px 22px;
|
||
text-align: center;
|
||
}
|
||
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
|
||
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
|
||
.verdict-a strong { color: var(--hl); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Drei Modalitäten — derselbe Hebel</h1>
|
||
<div class="sub">Bild, Audio, Video schrumpfen alle dramatisch. Warum? Weil Wahrnehmung Lücken hat.</div>
|
||
|
||
<div class="table">
|
||
<div></div>
|
||
<div class="col-head">Roh</div>
|
||
<div class="col-head">Lossy (modern)</div>
|
||
<div class="col-head">Lossy (aggressiv)</div>
|
||
|
||
<div class="row-label bild">Bild<small>12-MP-Foto</small></div>
|
||
<div class="cell">
|
||
<div class="cell-format">RAW</div>
|
||
<div class="cell-size">36 MB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:100%;background:#2563eb"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">JPEG · Q 90</div>
|
||
<div class="cell-size">4 MB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:11%;background:#2563eb"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">JPEG · Q 50</div>
|
||
<div class="cell-size">800 KB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:2.2%;background:#2563eb"></div></div>
|
||
</div>
|
||
|
||
<div class="row-label audio">Audio<small>30 s Stereo</small></div>
|
||
<div class="cell">
|
||
<div class="cell-format">WAV · 44,1 kHz · 16 bit</div>
|
||
<div class="cell-size">5,3 MB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:100%;background:#ea580c"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">MP3 · 192 kbit/s</div>
|
||
<div class="cell-size">720 KB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:14%;background:#ea580c"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">MP3 · 64 kbit/s</div>
|
||
<div class="cell-size">240 KB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:4.5%;background:#ea580c"></div></div>
|
||
</div>
|
||
|
||
<div class="row-label video">Video<small>30 s · 4K · 30 fps</small></div>
|
||
<div class="cell">
|
||
<div class="cell-format">Roh · 8 bit</div>
|
||
<div class="cell-size">12 GB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:100%;background:#7c3aed"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">H.264 · 25 Mbit/s</div>
|
||
<div class="cell-size">94 MB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:0.8%;background:#7c3aed"></div></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-format">H.265 · 12 Mbit/s</div>
|
||
<div class="cell-size">45 MB</div>
|
||
<div class="cell-bar"><div class="fill" style="width:0.4%;background:#7c3aed"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="verdict">
|
||
<div class="verdict-q">Bilder schrumpfen ×45. Audio ×22. Video ×270.</div>
|
||
<div class="verdict-a">Jede Reduktion nutzt eine andere Wahrnehmungs-Lücke: <strong>Bild</strong> die geringere Farbschärfe, <strong>Audio</strong> die Maskierung, <strong>Video</strong> die Frame-zu-Frame-Ähnlichkeit.</div>
|
||
</div>
|
||
</body>
|
||
</html>
|