Glossar: Bildkomprimierung & Formate

Ein zusätzlicher Kanal in einem Bild der die Transparenz (Durchsichtigkeit) jedes Pixels speichert. Werte reichen von 0 (vollständig transparent) bis 255 (vollständig undurchsichtig). PNG und WebP unterstützen volle Alpha-Kanal-Transparenz. JPG hat keinen Alpha-Kanal.

Sichtbare Bildstörungen die durch zu starke verlustbehaftete Komprimierung entstehen. Typisch: blockartige 8×8-Pixel-Muster, Farbflecken um scharfe Kanten (Ringing) und Farbverwischungen in gleichmäßigen Flächen (Banding). Entstehen wenn die Qualitätsstufe zu niedrig gewählt wird.

Die Anzahl der Pixel in Breite × Höhe eines Bildes. Z.B. 1920 × 1080 Pixel (Full HD). Die Auflösung bestimmt die maximale Anzeigeschärfe. Für Webbilder sollte die Auflösung auf die maximale Anzeigebreite × Device Pixel Ratio angepasst werden.

Eine Browser-API die es JavaScript ermöglicht, Grafiken in ein <canvas>-HTML-Element zu zeichnen und wieder auszulesen. Jnrt Pixel nutzt die Canvas API für die clientseitige Bildkomprimierung: Das Bild wird auf ein Canvas gezeichnet und als komprimiertes Blob-Objekt zurückgegeben — ohne Serverübertragung.

Eine Technik bei der Farbinformationen (Chroma) mit geringerer Auflösung gespeichert werden als Helligkeit (Luma). Das menschliche Auge ist empfindlicher für Helligkeitsunterschiede als für Farbe, weshalb diese Reduktion meist kaum wahrnehmbar ist. JPG und WebP verwenden Chroma-Subsampling standardmäßig.

Ein Core Web Vitals Messwert der quantifiziert wie stark sich sichtbare Elemente während des Seitenladens verschieben. Bilder ohne definierte width/height-Attribute verursachen Layout-Shifts und verschlechtern den CLS-Wert. Google empfiehlt CLS unter 0,1.

Ein Satz von Metriken von Google zur Messung der Nutzererfahrung auf Webseiten: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) und CLS (Cumulative Layout Shift). Seit 2021 sind Core Web Vitals ein offizieller Google-Ranking-Faktor. Bilder beeinflussen LCP und CLS direkt.

Der mathematische Kern des JPEG-Komprimierungsalgorithmus. Das Bild wird in 8×8-Pixel-Blöcke aufgeteilt, jeder Block mit der DCT in Frequenzanteile zerlegt. Hochfrequente Anteile (feine Details) werden dann je nach Qualitätsstufe stärker quantisiert (gerundet), was die Datenmenge reduziert.

Das Verhältnis zwischen physischen Bildschirmpixeln und CSS-Pixeln. Bei normalen Bildschirmen: DPR = 1. Bei Retina-Displays: DPR = 2 (Apple MacBook Pro, iPhone) oder 3 (iPhone Pro). Für pixelscharfe Darstellung auf DPR-2-Displays brauchen Bilder die doppelte Pixelanzahl.

Metadaten die von Kameras und Smartphones in Bilddateien gespeichert werden: Aufnahmedatum, Kameramodell, Brennweite, ISO, GPS-Koordinaten und mehr. Für Webbilder irrelevant und oft datenschutzkritisch (GPS). Die Canvas API entfernt EXIF-Daten automatisch beim Komprimieren.

1987 entwickeltes Bildformat mit maximal 256 Farben und binärer Transparenz. Bekannt für Animationen. Technisch veraltet — animiertes WebP oder MP4 sind deutlich effizienter. Statische GIFs werden bei Jnrt Pixel als PNG re-kodiert.

"High Dots Per Inch" — Oberbegriff für Bildschirme mit hoher Pixeldichte. Entspricht im Wesentlichen dem Apple-Begriff "Retina Display". HiDPI-Bildschirme haben typischerweise ein Device Pixel Ratio von 2 oder höher.

"Joint Photographic Experts Group" — verlustbehaftetes Bildformat von 1992. Das meistgenutzte Format für Fotos. Komprimiert durch Verwerfen von Bildinformationen, was bei niedrigen Qualitätsstufen zu sichtbaren Artefakten führt. Unterstützt keine Transparenz.

Das Verhältnis zwischen Original-Dateigröße und komprimierter Dateigröße. Eine Komprimierungsrate von 70% bedeutet: die komprimierte Datei ist 70% kleiner als das Original (also noch 30% der ursprünglichen Größe). Wird auch als Kompressionsverhältnis bezeichnet.

Das verzögerte Laden von Ressourcen bis sie benötigt werden. Bei Bildern: <img loading="lazy"> weist den Browser an, Bilder erst zu laden wenn sie in den Viewport scrollen. Spart initialem Datenvolumen und verbessert die Ladezeit besonders auf langen Seiten.

Core Web Vitals Metrik: Zeit bis das größte sichtbare Element im Viewport geladen ist. Meist ein Hero-Bild. Google empfiehlt LCP unter 2,5 Sekunden. Bildkomprimierung ist die effektivste Maßnahme zur LCP-Verbesserung.

Komprimierungsmethode bei der keine Bildinformationen verloren gehen. Das dekomprimierte Bild ist pixelidentisch mit dem Original. PNG und verlustfreies WebP sind verlustfrei. Verlustfreie Komprimierung erzeugt kleinere Dateien als unkomprimierte Rohdaten, aber größere als verlustbehaftete Komprimierung.

Komprimierungsmethode bei der Bildinformationen dauerhaft entfernt werden um die Dateigröße zu reduzieren. Das dekomprimierte Bild unterscheidet sich vom Original. JPG, verlustbehaftetes WebP und komprimiertes HEIC sind verlustbehaftet. Je höher die Komprimierung, desto mehr Informationen gehen verloren.

1996 als freier GIF-Nachfolger entwickeltes Bildformat. Verlustfrei, voller Alpha-Kanal, universell unterstützt. Ideal für Grafiken, Logos und Screenshots. Nachteil: große Dateien bei Fotos mit vielen Farbnuancen.

Parameter bei verlustbehafteter Bildkomprimierung (JPG, WebP) der bestimmt wie viele Bildinformationen erhalten bleiben. Wert 0–100 oder 0–1. Niedrigere Werte = kleinere Datei aber mehr Qualitätsverlust. Für Webbilder empfohlen: 75–85%.

Technik um verschiedene Bildgrößen für verschiedene Viewports und Bildschirmauflösungen bereitzustellen. Implementiert mit HTML-Attributen <code>srcset</code> und <code>sizes</code>. Sorgt dafür dass Mobilgeräte kleinere Bilder laden als Desktop-Bildschirme.

XML-basiertes Vektorformat (W3C-Standard seit 2001). Beschreibt Grafiken als geometrische Formen statt als Pixel. Skaliert verlustfrei auf jede Größe. Ideal für Logos, Icons und UI-Elemente. Kann per CSS animiert und per JavaScript manipuliert werden.

Siehe: Lossless.

Modernes Bildformat von Google (2010). Kombiniert verlustbehaftete und verlustfreie Komprimierung, volle Alpha-Transparenz und Animation. Typischerweise 25–35% kleiner als JPG und bis zu 50% kleiner als PNG. Wird von allen modernen Browsern unterstützt (96%+ global).

Farbraum der bei JPEG und WebP intern verwendet wird. Y = Helligkeit (Luma), Cb und Cr = Farbdifferenzen (Chroma). Da das menschliche Auge für Helligkeit empfindlicher ist als für Farbe, werden Cb und Cr stärker komprimiert (Chroma-Subsampling) — ein Kern-Effizienzgewinn beider Formate.