Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 25. Oktober 2018

Better Portable Graphics: Das neue Bildformat kommt nicht voran

JPEG und PNG sind die gän­gi­gen Formate für die Darstellung von Bildern im Browser. Auch wenn das Internet zuneh­mend schnel­ler wird, ist es gera­de bei der mobi­len Nutzung nach wie vor wich­tig, auf mög­lichst klei­ne Dateien zu ach­ten. Mit dem rela­tiv neu­en BPG-Format, wel­ches für Better Portable Graphics steht, steht seit eini­gen Jahren eine Alternative zu den gän­gi­gen Formaten bereit, die nicht nur klei­ne­re Dateien, son­dern auch eine bes­se­re Bildqualität ver­spricht. Aber was genau zeich­net das BPG-Format aus und wie setzt man es ein und wie­so stockt die Entwicklung?

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

Das Besondere am BPG-Format ist sei­ne hohe Kompression. Es basiert auf einem Subset des High-Efficiency-Video-Codings (HEVC), wel­ches vor allem für Videodateien ver­wen­det wird. Dieses ist der Nachfolger des H.264-/MPEG-4-Standards. Die Komprimierung der Better Portable Graphics ver­spricht im Vergleich zum JPEG eine klei­ne­re Dateigröße bei ähn­li­cher Bildqualität.

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

Wie das JPEG-Format unter­stützt auch BPG ver­schie­de­ne Farbräume. Neben RGB und CMYK wird YCbCr, bei der eine Farbe durch Hellig- und Farbigkeit defi­niert wird, unter­stützt. Außerdem sind  ver­schie­de­ne Farbtiefen – 8, 10 und 12 Bit – mög­lich.

Im Gegensatz zum JPEG-Format unter­stüt­zen Better Portable Graphics einen Alphakanal, wie er bei­spiels­wei­se bei PNG-Bildern mög­lich ist. Im Vergleich zum PNG ist die Kompression beim BPG noch deut­lich grö­ßer.

BPG-Encoder als Webanwendung

Um eine BPG-Datei zu erzeu­gen, gibt es einen eige­nen 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 ent­schei­dend sind. Zum einen musst du dich für eine Qualität ent­schei­den. Diese wird mit einem Wert zwi­schen 0 und 51 ange­ge­ben. Je klei­ner der Wert ist, des­to bes­ser ist die Qualität des Bildes.

Better Portable Graphics: Das kann das neue Bildformat
Stark kom­pri­mier­tes JPEG (links) und BPG (rechts)

Der ande­re Wert gibt die Kompression an, die zwi­schen 0 und 9 liegt. Je höher der Wert, des­to bes­ser ist die Kompression. Allerdings soll­test du beach­ten, dass eine hohe Kompression eben­so bedeu­tet, dass der Rechner län­ger braucht, um das Bild zu dekom­pri­mie­ren und dar­zu­stel­len.

Als Test wur­de ein Bild mit 10 Prozent Qualität aus Photoshop gene­riert und das­sel­be Bild mit höchs­ter 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 deut­lich die recht­ecki­gen Artefakte zu sehen, wie sie bei star­ker Komprimierung auf­tre­ten. Bei BPG-Bild macht sich zwar auch die star­ke Kompression bemerk­bar. Dennoch ist das Ergebnis qua­li­ta­tiv deut­lich bes­ser.

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

Bezüglich der Dateigröße wird der Unterschied deut­lich, wenn wir ein trans­pa­ren­tes PNG mit einer ent­spre­chen­den BPG-Grafik ver­glei­chen. Während das PNG 325 Kilobyte groß ist, kommt die trans­pa­ren­te BPG-Datei bei durch­schnitt­li­cher Bildqualität auf 64 Kilobyte. Hier errei­chen wir dem­nach eine sehr deut­li­che Einsparung.

Browser interpretieren BPG per JavaScript

Das gro­ße Problem bei neu­en Dateiformaten sind natür­lich die Browser. Denn die­se müs­sen neue Formate inter­pre­tie­ren kön­nen. Dass Better Portable Graphics in allen gän­gi­gen Browsern dar­ge­stellt wer­den kön­nen, liegt dar­an, dass die Interpretation des Formates per JavaScript erfolgt.

Willst du also Better Portable Graphics ver­wen­den, musst du eine 65 Kilobyte gro­ße JavaScript-Datei in dein HTML-Dokument ein­bin­den. Diese über­nimmt dann die Dekodierung des Formates. Die HTML-Auszeichnung erfolgt ganz nor­mal über das „<img>“-Element. Das ent­spre­chen­de JavaScript wan­delt die­ses dann ein „<canvas>“-Element um, wel­ches das Bild im Browser aus­gibt.

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

Wenn du Better Portable Graphics sel­ber erstel­len möch­test, kannst du dir den Quelltext für den Encoder kos­ten­los her­un­ter­la­den. Er steht als Kommandozeilenanwendung für Linux und Windows zur Verfügung. Der Encoder wird unter der GPL-Lizenz ange­bo­ten.

Fazit und Links zum Beitrag

Dass sich Better Portable Graphics in der Fläche durch­set­zen wird, darf durch­aus vor­sich­tig bezwei­felt wer­den. Der Umweg über JavaScript sorgt zwar auf Anhieb für eine flä­chen­de­cken­de Browserunterstützung, ist aber grund­sätz­lich nicht die bes­te Lösung, Bildformate im Browser dar­zu­stel­len. So wun­dert es nicht, dass der Encoder seit etwa drei Jahren nicht wei­ter­ent­wi­ckelt wird. Andererseits tut sich bei JPG auch seit Jahren nichts. Verschiedentlich wird behaup­tet, es gäbe rund um BPG ein Lizenz-Problem, das die wei­te­re Verbreitug behin­de­re. Sollte dem so sein, wäre es zumin­dest eine plau­si­ble Erklärung. Verifizieren ließ sich das Problem aller­dings nicht.

Die Mischung aus der guten Kompression des JPEG- und der Alphatransparenz des PNG-Formates machen Better Portable Graphics aller­dings zu einer inter­es­san­ten Alternative. Darüber hin­aus ermög­licht das BPG-Format Animationen, wie es bis­lang nur das GIF-Format konn­te. Im Web-Encoder sind sol­che Animationen jedoch nicht rea­li­sier­bar.

(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.

Ein Kommentar

  1. Der Link liegt hin­ter “die­sen Abschnitt” und bringt genau den Eintrag, den du dann ja auch auf­ge­grif­fen hast.

Schreibe einen Kommentar

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