Kompressionsartefakte Audit 2025 — Was prüfen, wann es schlimmer wird und wie vermeiden

Kompression tauscht Dateigröße gegen Qualität. Diese Anleitung systematisiert, wie man Verschlechterungen schnell erkennt und Qualität bewahrt.

Fokus: „Schnell-Urteile“ in der Praxis — Formatunterschiede, Check-Routine, typische Artefaktmuster und Gegenmaßnahmen. Enthält eine kompakte Checkliste für Design/Produktion/Auslieferung/QA.

Wichtige Artefakte und Blickpunkte

• Blocking (Makroblock-Gitter): auffällig bei niedrigem JPEG-Qualitätsgrad; prüfe Himmel/Haut
• Ringing (Halos): rund um harte Kanten; Logos/Text/Line Art
• Banding (Treppen in Verläufen): besonders in Himmel/unscharfen Hintergründen
• Chromableeding/Farbsaum: feine rote/blaue Linien; Farbkanten
• „Mosquito Noise“: Wellen um Details; Haare/feine Texturen

Referenz: Bildqualitätsmetriken SSIM/PSNR/Butteraugli — Praxisguide 2025

Beobachtungstipps (Fehler vermeiden)

• 200–300% Zoom, abwechselnd flache Flächen und Kanten vergleichen (Artefakte springen ins Auge)
• Immer gegen das Original mit horizontalem Schieber vergleichen; geringere kognitive Last
• Nicht mit nur einem Motiv urteilen: min. 3 „kritische“ Muster prüfen (Haut/Himmel/Holz/feine Linien)
• Formate bei gleicher Dateigröße vergleichen, um Stärken/Schwächen offenzulegen

Bedingungen, die Artefakte verschlimmern

1. Über-Kompression nach mehrfachen Re-Encodes
2. Niedriger Bitrate + hochfrequente Texturen (Rasen, Haar, Stoff)
3. Zu starkes Nachschärfen (Sharpening)
4. 4:2:0 Subsampling bei feinen roten/blauen Linien
5. Falsches Farbmanagement (unerwünschte Änderungen von Gamut/Gamma)

Format-Tendenzen

• JPEG: Blocking/Ringing gut sichtbar; Haut/Himmel werden bei niedriger Qualität schnell schmutzig
• WebP (lossy): Chromableeding bei sehr feinem Text; Farbkanten können bei hoher Sättigung „verwischen“
• AVIF: gewinnt oft bei Fotos bei gleicher Größe; bei sehr niedriger Bitrate können Kontrastbereiche „verschmieren“

Praktischer Ablauf (Schnellchecks)

1. Starte mit Image Compressor, um Maxbreite und Qualität grob zu setzen und eine Basisgröße zu erhalten
2. Vergleiche mit dem Original in Compare Slider und führe die obigen Checks durch
3. Falls nötig, teste Subsampling und Farbraum in Advanced Converter

Verwandt: Ultimative Bildkompressions-Strategie 2025 – Praxisleitfaden zur Qualitätswahrung bei maximaler Performance

Heuristische Schwellen (ungefähr)

• Text/Diagramm/UI (Linien): in JPEG/WebP Qualität mittel–hoch wählen und AVIF bei gleicher Größe gegenprüfen; 4:4:4 testen, wenn Farbsäume auftreten
• Fotografie (Haut/Himmel): AVIF bevorzugen; bei Halos Schärfung reduzieren und leichtes Rauschen erlauben
• Hero-Visuals: Ziel 200–400 KB; Kandidat mit nahezu null wahrnehmbarem Unterschied zum Original wählen

Gegenmaßnahmen

• Re-Komprimierung vermeiden: einmalig aus der hochwertigsten Quelle exportieren
• Subsampling prüfen: 4:4:4 für Text/Linien; 4:2:0 für Fotos (Standard)
• Sanftes Rauschen hinzufügen: reduziert Banding in posterisierungsgefährdeten Verläufen
• Realistische Maxbreite setzen: überdimensionierte Inputs erhöhen Last und Artefakte

CLI (Startpunkte)

JPEG (cjpeg)

# UI/Line Art (ohne Subsampling + moderate Sättigungs-Kontrolle)
cjpeg -quality 82 -sample 1x1 -optimize -progressive -outfile out.jpg in.png

# Foto (4:2:0)
cjpeg -quality 78 -sample 2x2 -optimize -progressive -outfile out.jpg in.png

WebP (cwebp)

# Line Art möglichst erhalten
cwebp -q 82 -m 6 -alpha_q 90 -mt -o out.webp in.png

# Effizient für Fotos
cwebp -q 72 -m 4 -mt -o out.webp in.jpg

AVIF (avifenc)

# Balance aus Tempo/Qualität (speed 6, CQ 28)
avifenc --speed 6 --min 20 --max 35 --cq-level 28 -a tune=psnr -o out.avif in.png

# Line Art: 4:4:4 testen
avifenc --speed 6 --min 18 --max 32 --cq-level 26 --yuv 444 -o out.avif in.png

Hinweis: Reale Schwellen hängen vom Asset ab. Perzeptiver Vergleich vs. Original entscheidet.

QA-Checkliste

• [ ] Keine Blocks/Banding auf flachen Hintergründen
• [ ] Keine Halos/Chromableeding bei Text/Logos
• [ ] Kein „Mosquito Noise“ bei feinen Mustern
• [ ] Farbmanagement/Gamut wie beabsichtigt (sRGB/P3)
• [ ] Innerhalb des Budgets mit klaren Schwellen pro Use Case

5-Minuten-Audit

1. Original und 2–3 Kandidaten vorbereiten (Format × Qualität × Größe)
2. Bei 200% vergleichen in Reihenfolge: flach → Kanten → feine Linien → Haut → Verlauf
3. Weniger störenden Kandidaten wählen; falls zu groß, Parameter anpassen und erneut prüfen
4. Vor dem Abschluss bei 1x/2x/3x prüfen

FAQ

• F: Reichen SSIM/PSNR? A: Nützlich, aber kein Ersatz für Wahrnehmung. Halos/Banding können von Metriken abweichen.
• F: WebP vs AVIF? A: AVIF gewinnt oft bei Fotos; WebP kann bei UI/Linien und Tempo besser sein.

Zusammenfassung

Definiere „was anschauen“ und du sicherst Qualität schnell. Vergleiche gegen das Original und vermeide Re-Komprimierungen, um Artefakte nicht zu kumulieren.

Anhang A: Mini-Vergleichs-UI

<div class="cmp">
  <img src="original.jpg" alt="original">
  <img class="top" src="candidate.avif" alt="candidate">
</div>
<input type="range" min="0" max="100" value="50" id="slider" />

<style>
  .cmp { position: relative; width: min(800px, 90vw); aspect-ratio: 4 / 3; }
  .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cmp img.top { clip-path: inset(0 0 0 calc(var(--split, 50%) )); }
  #slider { width: min(800px, 90vw); margin-top: 8px; }
</style>
<script>
  slider.addEventListener('input', (e) => {
    document.querySelector('.cmp img.top').style.setProperty('--split', e.target.value + '%');
  });
  slider.dispatchEvent(new Event('input'));
</script>

Anhang B: Testtexturen

• Verläufe (horizontal/radial)
• Gitter aus feinen Linien (mit roten/blauen/schwarzen Hochfrequenzmustern)
• Haut/Himmel/Holz/Haar/Stoff
• Text/Logos (harte Kanten)

Lege dir ein Set „bruchanfälliger“ Bilder zu, um Entscheidungen schneller zu treffen.