DE
UI-Screenshots & Textkompression: Warum JPG Schrift unscharf macht (2026)
Senior Software Engineer & Webanwendungsarchitekt
Inhaltsverzeichnis
Das “Screenshot-Größen-Paradoxon”
Haben Sie schon einmal einen gestochen scharfen Screenshot Ihres Code-Editors oder Dashboards von WebP oder PNG in JPEG umgewandelt und festgestellt, dass die Datei größer wurde, während der Text verschwommen wirkt?
Dieses Phänomen untersuchten unsere Ingenieure an 23 realen Software-Screenshots (VS Code IDE, Analytics-Dashboards, Wireframes und Tabellen).
Zentrale Erkenntnisse:
- +55,0% Dateiaufblähung: Die Konvertierung von WebP zu JPG (Q90) bläht die Dateigröße um mehr als die Hälfte auf (im Master-Sweep bis zu +71,9%).
- Moskito-Rauschen (Halos): JPEGs 8×8 DCT-Quantisierung erzeugt störende Halo-Ringe um Textzeichen und 1px-Linien.
- Farbverfälschungen im Dark Mode: Dunkle Hintergründe (
#1E1E1E) neigen durch Chroma-Subsampling zu unschönen Tonwertabrissen.
Benchmark-Daten: UI-Screenshots
| UI Asset Type | WebP (Q85) | Converted JPG | Inflation | SSIM | Text Clarity |
|---|---|---|---|---|---|
| VS Code Syntax (Dark IDE) | 182.9 KB | 283.6 KB | +55.0% | 0.9997 | Halo-Ringe um Operatoren in JPG |
| SaaS Analytics (1px Grid) | 225.4 KB | 358.1 KB | +58.9% | 0.9996 | Rauschen an Diagrammlinien |
| Mobile App Wireframe | 165.2 KB | 248.8 KB | +50.6% | 0.9998 | Weichzeichnung an runden Buttons |
| Fintech Metrics Table | 210.8 KB | 328.0 KB | +55.6% | 0.9997 | Kompressionsrauschen an Rahmen |
| Average Across UI Assets | 196.1 KB | 304.6 KB | +55.0% | 0.9997 | Sichtbare Text-Weichzeichnung |
Empfehlungen für Entwickler & Dokumentationen
- Screenshots in WebP oder PNG belassen: Nutzen Sie WebP zu PNG oder PNG zu WebP für verlustfreie Klarheit.
- Wenn JPEG unumgänglich ist: Nutzen Sie WebP zu JPG mit Qualität 90+, um Artefakte zu minimieren.
Reproduzierbarkeit & GitHub-Code
- GitHub-Repository:
github.com/freewebptojpg/image-optimization-benchmarks - Automatischer Datensatz-Download: Testbilder werden beim ersten Ausführen des Test-Runners automatisch heruntergeladen und zwischengespeichert (Rohbilder sind nicht in Git committed, um das Repository schlank zu halten).
- Flagship-Bericht: 100-Bilder WebP vs. JPG Benchmark-Studie
Über 12 Jahre Erfahrung in Softwareentwicklung und Webanwendungssicherheit