Bilder gehören seit den Anfängen des Webs zu den elementaren Komponenten, die keiner Seite fehlen dürfen. Egal ob Foto oder Grafik: Die visuellen Website-Elemente ziehen die Aufmerksamkeit der Besucher auf sich. In vielen Fällen bieten Bilder den Nutzern einen klaren Mehrwert und werten das Webprojekt auf, indem sie die Aussage eines Textes unterstreichen, Inhalte verdeutlichen, zusätzliche Informationen liefern (z. B. Infografiken) oder zum Nachdenken anregen. Während hinsichtlich der Bedeutung absolute Einigkeit besteht, herrschen in Bezug auf die verwendeten Bildformate seit Jahren Unstimmigkeiten. Vielfältige Optionen machen es den Website-Verantwortlichen alles andere als einfach, für jede Gelegenheit das passende Format zu finden – dabei spielt dieses insbesondere für mobile Geräte eine große Rolle.
Es existiert eine Vielzahl von Bildformaten für zweidimensionale Computergrafiken und Fotos, wobei der jeweilige Einsatzzweck ganz unterschiedlich ausfällt. Grob zu unterscheiden sind die traditionell genutzten Pixel- oder auch Rastergrafiken von den seltener genutzten Vektorgrafiken. Bei erstgenannten setzt sich das Gesamtbild aus vielen einzelnen Punkten – den Pixeln – zusammen. Je kleiner diese Pixel sind und je mehr davon existieren, desto höher ist die Auflösung bzw. Qualität der Bilddatei und gleichzeitig auch die Dateigröße. Vergrößert oder verkleinert man eine solche Datei, ist dies jedoch immer mit einem gewissen Qualitätsverlust verbunden, da die Pixelpunkte immer deutlicher als kleine, quadratische Formen zu erkennen sind.
Dieser Umstand ist zugleich das größte Unterscheidungsmerkmal zu den vektorbasierten Grafiken, die auf beliebige Art und Weise minimiert oder maximiert werden können – bei gleichbleibender Qualität. Die Ursache hierfür liegt darin begründet, dass sich die Vektorbilder nicht aus einzelnen Pixeln zusammensetzen, sondern die verschiedenen Formen mithilfe von Vektoren dargestellt werden.
Bei der Skalierung passen sich diese Formen, die exakte Größen- und Längenangaben haben, automatisch an die neuen Gesamtmaße an. Je komplexer die Bildinhalte sind, desto weniger eignen sich Vektorformate jedoch: Ein Foto etwa lässt sich mit Vektoren zwar nachahmen, die unzähligen Facetten, Lichteffekte und Schattierungen kommen jedoch nur in einer Pixelgrafik wirklich zum Tragen. Tiefere Einblicke in die Unterschiede und Gemeinsamkeiten beider Grafiktypen erhalten Sie in unserem vergleichenden Ratgeber.
Rastergrafiken sind trotz ihrer Nachteile bei der Skalierung wesentlich häufiger in Gebrauch als Vektorgrafiken, was insbesondere daraus resultiert, dass sie schnell erzeugt und für nahezu alle Szenarien geeignet sind. So lassen sich grafische Website-Elemente ebenso in Pixelformaten wie dem PNG-Format oder dem JPG-Format speichern wie aufwendige Grafiken. Die größte Stärke der Pixeldarstellung liegt jedoch eindeutig in der Präsentation von Fotografien, die in der modernen Webgestaltung eine große Rolle spielen. So kann ein beliebiges Foto problemlos eingescannt und als Pixelgrafik digitalisiert – und optional bearbeitet – werden. Neben den bereits genannten Grafikformaten gibt es eine Vielzahl weiterer freier und proprietärer Formate, wobei nur einige wenige übergreifend zum Einsatz kommen.
Bei dem als JPG oder auch JPEG bekannten Format handelt es sich eigentlich um eine 1992 veröffentlichte Norm (ISO/IEC 10918-1), die verschiedene Verfahren zur Bildkompression beschreibt. Da die Norm selbst keine Bestimmungen enthält, wie das Bild gespeichert werden soll, ist hierfür ein zusätzliches Format nötig, wobei sich das JPEG File Interchange Format (JFIF) als browserübergreifender Standard etabliert hat. Seltener verwendete Alternativen sind das Still Picture Interchange File Format (SPIFF) und das Grafikformat JPEG Network Graphics (JNG).
Das komprimierende JPG-Format verändert die gewöhnliche Struktur von Pixelgrafiken dahingehend, dass jeweils 8 x 8 Pixel zu einem Block zusammengefasst und im Verbund schrittweise umgerechnet werden. Dabei finden beispielsweise eine Farbumrechnung vom RGB-Farbraum in das YCbCr-Farbmodell und die sogenannte Tiefpassfilterung statt, bei der hohe Frequenzen herausgefiltert werden, um die Dateigröße zu verringern. Je nach gewähltem Kompressionsgrad ist dieser Prozess mit einem gewissen Qualitätsverlust verbunden, da nicht alle Bildinformationen beibehalten werden. Laut den Statistiken von W3Techs greifen rund drei Viertel aller Websites auf Bilder im JPG-Format zurück, was insbesondere auf die Effizienz in Sachen Dateigröße zurückzuführen ist, die mit der Kompression verbunden ist.
Empfohlenes Anwendungsszenario: Speicherung und Veröffentlichung von Fotos
Gleichermaßen stark im Netz vertreten ist PNG (Portable Network Graphics), ein universelles vom World Wide Web Consortium (W3C) anerkanntes Grafikformat, das 1996 zum ersten Mal auf der Bildfläche erschien. Als patentfreie und zugleich modernere Alternative zu GIF (Graphic Interchange Format) zeichnet es sich durch die Möglichkeit einer verlustfreien Kompression sowie eine maximale Farbtiefe von bis zu 24 Bit pro Pixel (16,7 Mio. Farben) – mit Alphakanal sogar 32 Bit – aus. Im Gegensatz zum GIF lassen sich mit PNG jedoch keine Animationen erzeugen.
Das PNG-Format unterstützt sowohl Transparenz und Halbtransparenz (dank integriertem Alpha-Kanal), was es für alle Arten von Bildern einsetzbar macht, als auch Interlacing, das einen beschleunigten Aufbau der Bilddatei beim Ladevorgang ermöglicht. Farb- und Helligkeitskorrekturmechanismen stellen sicher, dass PNG-Bilddateien auf verschiedenen Systemen annähernd gleich aussehen. Um eine Grafik im PNG-Format zu komprimieren, können Sie Tools wie das als Webservice umgesetzte pngcrush verwenden. Aufgrund des verlustfreien Kompressionsprozesses sind die Dateien auch im Anschluss noch vergleichsweise groß, weshalb das Format weniger für die Darstellung von Fotografien geeignet ist als beispielsweise JPG. Es bietet allerdings die Möglichkeit, den Farbraum zu verkleinern (auf 1 bis 32 Bit pro Pixel).
Empfohlenes Anwendungsszenario: Speicherung und Veröffentlichung kleiner Bilder und Grafiken (Logos, Icons, Balken etc.), Grafiken mit Transparenz, verlustfreie Fotos
Das Onlineportal CompuServe führte das Graphics Interchange Format, kurz GIF, 1987 als Farbalternative zu dem damaligen Schwarz-Weiß-Format X BitMap (XBM) ein. Im Gegensatz zu anderen damaligen Lösungen wie PCX oder MacPaint benötigten die GIF-Dateien dank der effizienten LZW-Kompression (Datenkompression mit dem Lempel-Ziv-Welch-Algorithmus) deutlich weniger Speicherplatz, weshalb sich das Format in den Anfängen des Webs großer Beliebtheit erfreute. Als Format für Fotos und Grafiken haben JPG und PNG mittlerweile aber deutlich die Nase vorn – seit der Version GIF89a (1989) kann das Format allerdings mehrere Einzelbilder in einer Datei vereinen, weshalb es bis heute Einsatz bei der Erstellung kleiner Animationen findet.
Alle Farbinformationen sind in GIF in einer Tabelle, der Farbpalette, abgelegt. Die Tabelle enthält bis zu 256 Farben (8 Bit), weshalb das Bildformat von sich aus nicht für die Darstellung von Fotografien geeignet ist. Die einzelnen Informationen können darüber hinaus als transparent definiert werden – anders als bei dem moderneren PNG ist eine Teiltransparenz jedoch nicht möglich, sodass ein Pixel entweder sichtbar oder nicht sichtbar sein kann.
Empfohlenes Anwendungsszenario: Erstellung von Animationen; Clip-Arts oder Logos, bei denen eine geringe Farbtiefe unproblematisch ist
Ein Grafikformat, das insbesondere bei der Übermittlung von Druckdaten und hochauflösenden Bildern Verwendung findet, ist TIFF (Tagged Image File Format). Bereits 1986 von Microsoft in Kooperation mit Aldus (gehört heute zu Adobe) entwickelt, ist es speziell für die Einbettung der Farbseparation und Farbprofile (ICC-Profile) eingescannter Bilder optimiert. Ferner unterstützt TIFF das CMYK-Farbmodell und ermöglicht für jeden Farbkanal eine Farbtiefe von bis zu 16 Bit (die Gesamt-Farbtiefe beträgt demnach 48 Bit). Seit 1992 kann man das Format darüber hinaus mithilfe der LZW-Komprimierung, die auch beim GIF-Format eingesetzt wird, verlustfrei komprimieren.
Dank dieser Eigenschaften hat sich TIFF als Quasi-Standard für Bilder durchgesetzt, bei denen die Qualität eine wichtigere Rolle spielt als die Dateigröße. So arbeiten u. a. Verlage und Printmedien mit dem Bildformat und auch die Archivierung einfarbiger Grafiken wie z. B. technischer Zeichnungen zählt zu den vielseitigen Einsatzgebieten. Zur Speicherung und Präsentation rasterbasierter Geoinformationen (Karten-, Luftbilder etc.) hat sich außerdem das mit zusätzlichen Tags versehene GeoTIFF-Format etabliert.
Empfohlenes Anwendungsszenario: Übermittlung hochwertiger Bilder mit hoher Auflösung für den Druck
Für die Speicherung von Grafikprojekten, die mit der bestens bekannten Software Photoshop erstellt worden sind, bietet der Hersteller Adobe u. a. das hauseigene, proprietäre PSD-Format (Photoshop Document) an. Dieses zeichnet sich dadurch aus, dass es sämtliche Informationen über Ebenen, Kanäle oder Vektoren sichert, was eine spätere Nachbearbeitung möglich macht. So können Ebenen im Nachhinein beispielsweise hinzugefügt, dupliziert, ausgeblendet, verschoben, entfernt und einzelne Elemente gezielt bearbeitet werden. In einer einzigen PSD-Datei lassen sich dabei mehrere Ebenen sowie die jeweiligen Bilddaten verlustfrei abspeichern. Insbesondere bei Grafiken mit hohem Wiedererkennungswert wie Logos, Banner etc., die bei Bedarf schnell an verschiedene Plattformen und Displaygrößen angepasst werden sollen, erweist sich das Adobe-Bildformat als praktisch.
Standardmäßig lassen sich Bilder im PSD-Format nur mit Adobe Photoshop ohne Einschränkungen öffnen, wobei der Austausch zwischen Anwendungen für die verschiedenen Betriebssysteme Windows oder macOS problemlos funktioniert. Somit kann man das Grafikformat in gewisser Weise auch als systemübergreifend bezeichnen. PSD fungiert in erster Linie als Speicherformat während des Bearbeitungsprozesses. Für die Ausgabe im Web sollte die jeweilige Datei jedoch vor dem Upload auf den Server in das PNG-Format oder alternativ in JPG umgewandelt werden, da die verlustfreie Speicherung der Bilddaten und sämtlicher Ebenen zwar die effiziente Nachbearbeitung ermöglicht, aber auch eine sehr große Datenmenge mit sich bringt. Um eine PSD-Grafik zu konvertieren, genügt ein einfaches Webtool wie Zamzar.
Empfohlenes Anwendungsszenario: Zwischenspeicherung und Nachbearbeitung oft genutzter Grafiken, Designvorlagen
BMP (Windows Bitmap) wurde für Microsoft- und IBM-Betriebssysteme entwickelt und erstmals 1990 mit Windows 3.0 als Speicherformat für Pixelgrafiken mit einer Farbtiefe von bis zu 24 Bit pro Pixel veröffentlicht. Das unkomprimierte Bildformat ordnet jedem Pixel exakt einen Farbwert zu, weshalb BMP-Dateien standardmäßig sehr groß sind. Aus diesem Grund eignet sich das Format nicht für den Einsatz im Web.
Empfohlenes Anwendungsszenario: Speicherung von Fotos/Grafiken für den Offline-Einsatz
Vektorgrafiken eignen sich deshalb so gut für den Einsatz im Web, weil sie häufig viel weniger Speicherplatz benötigen als vergleichbare Pixelgrafiken. Die entsprechenden Formate beschreiben nicht, welche Farbanteile ein Pixel im jeweiligen Bild hat, sondern die Objekte, aus denen sich das Bild zusammensetzt – runde und winklige Flächen, Text, gerade und gekrümmte Linien etc. – sowie ihre Position, Maße, Farben und anderen Eigenschaften. In Kombination mit dem bereits angesprochenen Aspekt der verlustfreien Skalierung wird so die Realisierung responsiver und barrierefreier Webelemente zum Kinderspiel. Ferner können Sie jederzeit und unkompliziert Änderungen an Dateien in vektorgrafischen Formaten vornehmen – wobei der Schwierigkeitsgrad jedoch mit zunehmender Komplexität der Bilddatei unverhältnismäßig steigt. Ein weiterer Vorteil gegenüber Pixelgrafiken ist die Möglichkeit, Animationen mit JavaScript zu erzeugen.
In Zusammenarbeit mit den Software-Herstellern Aldus und Altsys entwickelte und veröffentlichte Adobe 1987 das Vektorgrafikformat EPS (Encapsulated PostScript). Der Name des Formats rührt daher, dass die jeweiligen Dateien in der Seitenbeschreibungssprache PostScript gespeichert werden, die die Ausgabe komplexer Seiten auf Laserdruckern und Belichtern ermöglicht. Zu diesem Zweck beschreibt PostScript die Elemente der Druckseite wie Linien, Kreise, Bilder etc. und gibt Auskunft darüber, wo diese positioniert sind. EPS erweitert diese Bildinformationen um präzise Angaben über die Ausgabegröße, die sogenannte Bounding Box. Optional enthalten EPS-Dateien ein Vorschaubild in geringer Auflösung, das als Platzhalter dienen kann. Das Grafikformat von Adobe beschreibt die einzelnen Objekte unabhängig vom späteren Ausgabegerät, was den Austausch zwischen unterschiedlichen Ausgabemedien ermöglicht.
EPS fand insbesondere im Printbereich Anwendung, ist aber auch dort mittlerweile von dem bestens bekannten Nachfolgeformat PDF (Portable Document Format) abgelöst worden, das sich aufgrund der wesentlich geringeren Dateigröße auch für den E-Mail-Versand bestens eignet. Als Bildformat für Webprojekte eignet sich jedoch weder das historische EPS noch das moderne PDF, das vielmehr zum Austausch oder zur Präsentation von Text-Dokumenten genutzt wird.
Empfohlenes Anwendungsszenario: Beschreibung komplexer Druckseiten (Format nicht mehr aktuell)
Während viele andere Vektorgrafikformate wie das AI-Format (Adobe Illustrator Artwork) ebenfalls für den Einsatz im Web ungeeignet sind, bestätigt das vom W3C empfohlene SVG (Scalable Vector Graphics) die eingangs erwähnten Vorteile vektorbasierter Bilddateien eindrucksvoll. Die Spezifikation für die Beschreibung zweidimensionaler Vektorgrafiken, die auf der XML-Sprache basiert, ist spätestens seit der umfassenden HTML5-Unterstützung gängiger Browser eine ernst zu nehmende Alternative zu den traditionellen Rastergrafiken – insbesondere mit Blick für mobile und responsive Websites. Dabei bieten SVG-Dateien neben einer verlustfreien Skalierbarkeit und einer oft sehr geringen Datenmenge diverse weitere Vorzüge wie die folgenden:
Insbesondere für Grafiken, die Symbole enthalten (z. B. Logos) oder auf die Eingaben der Website-Besucher reagieren sollen (dynamische Diagramme), stellt das SVG-Format daher eine exzellente Wahl dar. Auch für technische Grafiken ist das moderne Vektor-Bildformat geradezu prädestiniert. Ein Blick auf die oben genannte Statistik von W3Techs zeigt jedoch, dass SVG im Gegensatz zu den Rastergrafiken in den meisten Webprojekten noch keine Verwendung findet. Ausführliche Informationen sowie Leitfäden zur Einbindung finden Sie in folgendem Ratgeber.
Empfohlenes Anwendungsszenario: technische oder interaktive Grafiken (Logos, Buttons, Icons etc.)
| JPG | PNG | GIF | SVG | |
|---|---|---|---|---|
| Farbmodelle | RGB, Graustufen, CMYK | RGB, Graustufen, indizierte Farben | indizierte Farben | RGB, SVG-Farbnamen |
| Anzahl Farben | bis zu 16,7 Mio. | bis zu 18 Trillionen | bis zu 256 | bis zu 16,7 Mio. |
| Farbkanäle | drei | drei (plus ein Alpha-Kanal) | einer | drei (plus ein Alpha-Kanal) |
| Bit-Tiefe | 8 Bit pro Kanal | 1–16 Bit pro Kanal | 1–8 Bit | 8 Bit pro Kanal |
| Kompression | hoch, verlustbehaftet | hoch, verlustfrei | gering | keine |
| Dateigröße | sehr klein | klein | groß | individuell |
| Animationen | nein | nein | ja | ja |
| Geeignet für | Fotos | kleine Bilder und Grafiken (z. B. Logos), verlustfreie Fotos | Animationen | Grafiken aller Art (Logos, Icons, Diagramme etc.) |
Das Speichervolumen von Computern nimmt Jahr für Jahr zu. Immer mehr Giga- und Terabyte stehen zur Verfügung. Trotzdem ist es sinnvoll, die Größe von Dateien gering zu halten – insbesondere wenn Sie eine eigene Website betreiben. Denn komprimierte Daten bedeuten schnellere Ladezeiten, zufriedenere Besucher und ein besseres Google-Ranking. Vor allem Bilder sollten Sie für die Verwendung auf Ihrer...
Mit iOS 11 und macOS High Sierra hat Apple JPEG als Standardformat für Bilder ersetzt. Der Nachfolger HEIF (High Efficiency Image File Format) ermöglicht es den Nutzern unter anderem, Fotos platzsparender und in höherer Qualität abzuspeichern. Da andere Plattformen wie Windows oder Linux das neue Format bisher noch nicht unterstützen, sind die Nutzungsmöglichkeiten des MPEG-Standards bisher...
GIFs sind überaus beliebt, um eigene Beiträge und Nachrichten in den Social-Media aufzupeppen. Eine Online-Welt ohne die ausdrucksstarken Animationen in dem gleichnamigen Format scheint nur schwer vorstellbar – dabei existiert mit APNG (Animated Portable Network Graphics) eine Alternative, die GIF in einigen Punkten sogar aussticht. Was genau steckt hinter diesem animierten PNG? Und wie lassen...
Videoformate unterschiedlichster Art kommen im Netz zum Einsatz. Wir zeigen Ihnen, welche Plattform welches Video-Dateiformat akzeptiert und worin die Vorteile der einzelnen Videoformate bestehen. So können Sie für sich die beste Lösung finden und bei der Nutzung Bandbreite und Speicherplatz sparen. Denn jedes Format bietet unterschiedliche Vor- und Nachteile für Sie und den Endnutzer.
JPG vs. PNG: Unser Vergleich zeigt die Vor- und Nachteile der beiden beliebtesten Formate für Bilddateien. Welches Format sollte man wofür verwenden und wo liegen die Unterschiede zwischen JPG und PNG? Wie wirken sich unterschiedliche Kompressionsraten auf die Bildqualität und Dateigröße aus und welche Bildeigenschaften lassen sich nur mit dem einen oder dem anderen Format abbilden?
