Bildformate

Es gibt unzählige Bildformate, aber für die Verwendung von Bildern in Webdokumenten, haben sich drei besonders bewährt:

  • Joint Photographic Experts Group (JPEG)
  • Graphics Interchange Format (GIF)
  • Portable Network Graphics (PNG)

Das JPEG-Format eignet sich hervorragend für Bilder mit einer großen Farbtiefe. Darunter Fallen also HD-Fotos von Landschaften, Tieren und uns Menschen. Mit bis zu 16.7 Millionen Farben kann man mit diesem Format also wunderschöne Grafiken auf seiner Webseite einbinden. Jedoch wirkt sich dies auch auf die Dateigröße und somit auf die Ladezeit der Bilddatei aus. JPEG ist von den drei vorgeschlagenen Webformaten das größte. Zwar hat das Format eine Komprimierung von 0% bis zu 100%, aber je mehr komprimiert wird, desto grobpixeliger sieht das Bild am Ende aus. Möchte man also in Kauf nehmen, dass bei mehreren Bildern eine längere Ladezeit benötigt wird, so ist dieses Format eine unumstrittene Möglichkeit für farbenreiche Bilder. Ebenfalls wichtig zu erwähnen ist, dass JPEG keinen Alphakanal hat und somit keine Transparenz abbilden kann. Dazu weiter unten mehr.

Tim Berners-Lee 2014 im JPEG-Format (542 KB) - Wikipedia

Das GIF-Format kann maximal 256 Farben annehmen. Es eignet sich hervorragend für weniger detailreiche Fotos und Grafiken. Oftmals wird dieses Format für Icons und Hintergrundgrafiken benutzt, denn durch seine Möglichkeit Transparenz abzubilden können diese Grafiken auf jeden farblichen Hintergrund angezeigt werden und fügen sich somit gut in das Gesamtbild ein. Weiterhin hat dieses Format eine ebenfalls hohe Komprimierung, d.h. die Dateigröße kann sehr gering werden bei einer noch sehr guten Auflösung. GIF hat jedoch einen großen Unterschied zu beiden anderen Formaten, denn wie der Name es vermuten lässt, kann man in einer GIF-Datei, mehrere Bilder abspeichern und diese animieren.

Tim Berners-Lee 2014 im GIF-Format (222 KB) - Wikipedia

Das PNG-Format ist ein sehr guter Mittelweg zwischen den Formaten JPEG und GIF. Auf der einen Seite kann man ebenfalls 16.7 Millionen Farben abbilden und dabei sogar eine Transparenz mit einbringen und auf der anderen Seite hat man die Möglichkeit einzustellen, dass lediglich 256 Farben abgespeichert werden sollen. Im letzteren Modus ist die PNG-Datei dann sogar noch kleiner als eine GIF-Datei. PNGs eignen sich also hervorragend für detaillierte Fotos (wenn die Dateigröße keine Rolle spielt), aber in einem anderen Modus genutzt auch für Grafiken. Interessanterweise hat sich allerdings das JPEG Format durchgesetzt, obwohl das PNG-Format dem gegenüber einen entscheidenden Vorteil hat: PNGs verlieren nicht an Qualität, wenn sie komprimiert werden.

Tim Berners-Lee 2014 im PNG-Format (1.81 MB) - Wikipedia

Transparenz

Oftmals hört man von einem sogenannten "Alphakanal". Während ein Bildpunkt (Pixel) am Rechner in der Regel aus den drei Farben Rot, Grün und Blau (RGB) bestehen, haben Bildformate mit Transparenz meistens einen weiteren Farbwert, der angibt, inwiefern dieser Pixel "durchsichtig" sein soll. Damit ist der Alphakanal gemeint. Genau aus diesem Grund sieht man häufiger die Abkürzung RGBA, wobei das "A" für den Alphakanal steht. Er umfasst in der Regel 256 Farbabstufungen.

Interlacing

Wenn der Browser eine große Bilddatei lädt, dann baut er das Bild in der Regel Zeile für Zeile auf. Jeder hat dieses Phänomen schon einmal bemerkt, wenn er ewig gewartet hat, bis das Bild von oben nach unten geladen wurde. Ab der Hälfte kann man dann eventuell erahnen, was auf diesem Bild zu sehen ist.

Das Interlacing ist ein Verfahren, bei dem der Browser bereits ab der hälfte der geladenen Datenmenge das Bild unscharf, aber im Gesamten anzeigen kann. Somit kann der Benutzer bereits nach kurzer Zeit erahnen, was auf diesem Bild zu sehen ist. Sobald das Bild vollständig geladen ist, schärft der Browse das Bild nach und es kann in seiner gesamten Pracht betrachtet werden.

Das IMG-Element

Mit <img /> Element bindet man in HTML Bilder ein. Die Besonderheit bei diesem Element: Es ist ein Inline-Block-Level Element, d.h. es fügt sich in die Zeile und somit in den Textfluss ein, hat aber eine Breite und Höhe. Dennoch brauchen wir zwei wichtige Attribute, damit wir dieses Element richtig benutzen können:

  • Html
  • Ergebnis
<img src="https://www.coding-lab.de/img/logo_std.png" alt="CodingLab Logo" />

Neben der Tatsache, dass es sich bei dem <img /> Element um ein leeres Element handelt, zeigt das obige Beispiel, dass wir mit dem src="" Attribut den Dateipfad angeben. Hierbei kann es sich um einen absoluten Pfad der eigenen oder zu anderen Domains handeln oder um einen relativen Pfad. Mit dem alt="" Attribut können wir einen alternativen Text angeben, der angezeigt wird, wenn die Grafik nicht gefunden oder geladen werden konnte. Dieses Attribut ist beinahe genauso hilfreich, wie das src="" Attribut, da der Benutzer bei egal welchem Szenario immer weiß, was gerade abgebildet werden soll.

Skalierung und Ladezeiten

Ein Trugschluss ist oftmals, dass Bilder bei einer Skalierung weniger Ladezeit benötigen. Oftmals ist das Gegenteil der Fall. Dafür muss man sich vor Augen führen, dass Bilder immer im gesamten geladen werden. Dabei spielt es keine Rolle, welche Größe wir für das Bild festlegen. Der Browser fragt immer die gesamte Datei mit all ihren Bytes an. Somit muss der Browser erst laden und anschließend skalieren, was sich bei großen Bildern und einem drastischen Skalierungs-Aufwand negativ auf die Zeit auswirkt.