Denis Potschien 25. Oktober 2018

Better Portable Graphics: Das neue Bildformat kommt nicht voran

JPEG und PNG sind die gängigen Formate für die Darstellung von Bildern im Browser. Auch wenn das Internet zunehmend schneller wird, ist es gerade bei der mobilen Nutzung nach wie vor wichtig, auf möglichst kleine Dateien zu achten. Mit dem relativ neuen BPG-Format, welches für Better Portable Graphics steht, steht seit einigen Jahren eine Alternative zu den gängigen Formaten bereit, die nicht nur kleinere Dateien, sondern auch eine bessere Bildqualität verspricht. Aber was genau zeichnet das BPG-Format aus und wie setzt man es ein und wieso stockt die Entwicklung?

Better Portable Graphics statt JPEG – ähnliche Qualität, kleinere Dateigröße und Alphatransparenz

Das Besondere am BPG-Format ist seine hohe Kompression. Es basiert auf einem Subset des High-Efficiency-Video-Codings (HEVC), welches vor allem für Videodateien verwendet wird. Dieses ist der Nachfolger des H.264-/MPEG-4-Standards. Die Komprimierung der Better Portable Graphics verspricht im Vergleich zum JPEG eine kleinere Dateigröße bei ähnlicher Bildqualität.

Better Portable Graphics: Das kann das neue Bildformat
Webanwendung zum Erstellen von BPG-Dateien

Wie das JPEG-Format unterstützt auch BPG verschiedene Farbräume. Neben RGB und CMYK wird YCbCr, bei der eine Farbe durch Hellig- und Farbigkeit definiert wird, unterstützt. Außerdem sind  verschiedene Farbtiefen – 8, 10 und 12 Bit – möglich.

Im Gegensatz zum JPEG-Format unterstützen Better Portable Graphics einen Alphakanal, wie er beispielsweise bei PNG-Bildern möglich ist. Im Vergleich zum PNG ist die Kompression beim BPG noch deutlich größer.

BPG-Encoder als Webanwendung

Um eine BPG-Datei zu erzeugen, gibt es einen eigenen Encoder, der als Webanwendung zur Verfügung steht. Neben der Auswahl des Farbraums und der Bit-Tiefe sind es vor allem zwei Größen, die entscheidend sind. Zum einen musst du dich für eine Qualität entscheiden. Diese wird mit einem Wert zwischen 0 und 51 angegeben. Je kleiner der Wert ist, desto besser ist die Qualität des Bildes.

Better Portable Graphics: Das kann das neue Bildformat
Stark komprimiertes JPEG (links) und BPG (rechts)

Der andere Wert gibt die Kompression an, die zwischen 0 und 9 liegt. Je höher der Wert, desto besser ist die Kompression. Allerdings solltest du beachten, dass eine hohe Kompression ebenso bedeutet, dass der Rechner länger braucht, um das Bild zu dekomprimieren und darzustellen.

Als Test wurde ein Bild mit 10 Prozent Qualität aus Photoshop generiert und dasselbe Bild mit höchster Kompression und Qualitätsstufe 39 ins Format Better Portable Graphics gebracht. Während das JPEG 10 Kilobyte groß ist, kommt das BPG auf 9,5 Kilobyte. Beim JPEG sind ganz deutlich die rechteckigen Artefakte zu sehen, wie sie bei starker Komprimierung auftreten. Bei BPG-Bild macht sich zwar auch die starke Kompression bemerkbar. Dennoch ist das Ergebnis qualitativ deutlich besser.

Better Portable Graphics: Das kann das neue Bildformat
BPG-Bild mit Alphatransparenz

Bezüglich der Dateigröße wird der Unterschied deutlich, wenn wir ein transparentes PNG mit einer entsprechenden BPG-Grafik vergleichen. Während das PNG 325 Kilobyte groß ist, kommt die transparente BPG-Datei bei durchschnittlicher Bildqualität auf 64 Kilobyte. Hier erreichen wir demnach eine sehr deutliche Einsparung.

Browser interpretieren BPG per JavaScript

Das große Problem bei neuen Dateiformaten sind natürlich die Browser. Denn diese müssen neue Formate interpretieren können. Dass Better Portable Graphics in allen gängigen Browsern dargestellt werden können, liegt daran, dass die Interpretation des Formates per JavaScript erfolgt.

Willst du also Better Portable Graphics verwenden, musst du eine 65 Kilobyte große JavaScript-Datei in dein HTML-Dokument einbinden. Diese übernimmt dann die Dekodierung des Formates. Die HTML-Auszeichnung erfolgt ganz normal über das „<img>“-Element. Das entsprechende JavaScript wandelt dieses dann ein „<canvas>“-Element um, welches das Bild im Browser ausgibt.

Better Portable Graphics: Quelltext für Encoder frei zugänglich

Wenn du Better Portable Graphics selber erstellen möchtest, kannst du dir den Quelltext für den Encoder kostenlos herunterladen. Er steht als Kommandozeilenanwendung für Linux und Windows zur Verfügung. Der Encoder wird unter der GPL-Lizenz angeboten.

Fazit und Links zum Beitrag

Dass sich Better Portable Graphics in der Fläche durchsetzen wird, darf durchaus vorsichtig bezweifelt werden. Der Umweg über JavaScript sorgt zwar auf Anhieb für eine flächendeckende Browserunterstützung, ist aber grundsätzlich nicht die beste Lösung, Bildformate im Browser darzustellen. So wundert es nicht, dass der Encoder seit etwa drei Jahren nicht weiterentwickelt wird. Andererseits tut sich bei JPG auch seit Jahren nichts. Verschiedentlich wird behauptet, es gäbe rund um BPG ein Lizenz-Problem, das die weitere Verbreitug behindere. Sollte dem so sein, wäre es zumindest eine plausible Erklärung. Verifizieren ließ sich das Problem allerdings nicht.

Die Mischung aus der guten Kompression des JPEG- und der Alphatransparenz des PNG-Formates machen Better Portable Graphics allerdings zu einer interessanten Alternative. Darüber hinaus ermöglicht das BPG-Format Animationen, wie es bislang nur das GIF-Format konnte. Im Web-Encoder sind solche Animationen jedoch nicht realisierbar.

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Der Link liegt hinter „diesen Abschnitt“ und bringt genau den Eintrag, den du dann ja auch aufgegriffen hast.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.