Grafik/Grafikformate

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die hier vorgestellten Formate für zweidimensionale Computergrafiken werden, sofern nicht anders vermerkt, von allen populären Webbrowsern nativ unterstützt, das heißt ohne Plugin oder Aufruf einer externen Anwendung. Leider findet sich unter diesen keine eierlegende Wollmilchsau: Sie sollten bei der Wahl eines geeigneten Grafikformates daher genau darauf achten, wo dessen jeweilige Stärken und Schwächen liegen.

Inhaltsverzeichnis

[Bearbeiten] Formate für Rastergrafiken

[Bearbeiten] BMP

Das BMP-Format (Windows Bitmap) wurde für das Betriebssystem Microsoft Windows entwickelt und dient dort seit 1990 zur möglichst einfachen, systemnahen Darstellung von Rastergrafiken mit einer Farbtiefe von bis zu 24 bit pro Pixel. Wenngleich die Unterstützung durch alle modernen Browser gewährleistet ist, eignen sich Bitmaps nicht für das World Wide Web, da alle Pixel mit ihrem zugehörigen Farbwert gespeichert werden. Deshalb sind BMP-Dateien sehr viel größer als komprimierte Rastergrafiken.

Bild Komprimierung Speichergröße
.tif
(keine Einbindung in wiki möglich)
keine 175 Kb
Beachten Sie: Die Verwendung dieses Formats für Webseiten ist aufgrund der großen Dateigrößen nicht zu empfehlen.


[Bearbeiten] JPG

Der Begriff JPG oder JPEG bezeichnet zunächst die in ISO/IEC 10918-1 standardisierten Bildkompressionsverfahren, die erstmals 1992 von der namengebenden Joint Photographic Experts Group veröffentlicht wurden. Da aber der Standard selbst kein Format zur Speicherung der so komprimierten Grafiken vorsieht, verwendet man dazu de facto das im Jahr 1991 von Eric Hamilton entwickelte JFIF (JPEG File Interchange Format), das heute von allen relevanten Webbrowsern unterstützt wird. Alternativen zu JFIF sind SPIFF und JNG, das sogar Transparenzen ermöglicht aber wenig gebräuchlich ist.

[Bearbeiten] Die JPG-Komprimierung

Urprünglich haben Rastergrafiken für jeden Pixel einen bestimmten Farb- und Helligkeitswert. Im JPG-Format werden jeweils 8x8 Pixel zu einem Block zusammengefasst und in mehreren Verarbeitungsschritten umgerechnet:

  • Einteilung in 8×8-Blöcke und diskrete Kosinustransformation dieser Blöcke
  • Farbraumumrechnung vom RGB-Farbraum ins YCbCr-Farbmodell
  • Tiefpassfilterung und Unterabtastung der Farbabweichungssignale Cb und Cr

Diese Komprimierung (Wikipedia: JPEG-Komprimierung ) ist verlustbehaftet, d. h. es werden nicht alle Grafikinformationen behalten. Beim Erzeugen einer JPEG-Grafik kann man daher über den Kompressionsgrad den Kompromiss eher in Richtung kompakter Dateigrößen, aber schlechterer Originaltreue, oder in Richtung hoher Qualität, aber etwas größerer Dateien verschieben.

Typische sichtbare Merkmale starker Kompression bei JPEG-Bildern sind einzelne Pixel in falschen Farben neben scharfen Konturen bis hin zum Verwischen der Kanten, erkennbare Abstufungen bei sanften Farbverläufen, gelegentlich erkennt man auch das 8x8-Pixel-Raster durch geringe Farbtonunterschiede an den Blockgrenzen.

Empfehlung: Um die Unterschiede in der Bildqualität zu erkennen, vergrößern Sie bitte die Ansicht (strg ++) in Ihrem Browser!
Bild Komprimierung Speichergröße
Feuerwehrfest-2014-100%.jpg 100% 92,7 Kb
Feuerwehrfest-2014-90%.jpg 90% 74,5 Kb
Feuerwehrfest-2014-50%.jpg 50% 26,1Kb
Feuerwehrfest-2014-10%.jpg 10% 11,9 Kb

Die Prozentangaben in dieser Tabelle dienen nur zur Orientierung. Bildbearbeitungsprogramme rechnen teils sehr unterschiedlich. Experimentieren Sie daher mit verschiedenen Werten, um mit dem von Ihnen verwendeten Programm den für Ihr Bild besten Kompromiss zu finden.

Empfehlung: JPG ist für Fotos ideal. Wählen Sie einen Kompressionsgrad, der Ihren Ansprüchen an die Bildqualität genügt.

[Bearbeiten] Progressives JPEG

Beim Progressive JPEG werden erst die ersten Koeffizienten jedes Bildblocks, dann die zweiten usw. der Reihe nach abgespeichert. Beim Laden entsteht so erst das Bild in den 8x8 Pixel-Blöcken, die dann in weiteren Schritten die folgenden Koeffizienten erhalten, so dass die Annäherung an das Originalbild immer besser wird.

Wie beim Interlacing, das bei GIF angewendet wird, liegt der Zweck darin, dem Benutzer, noch bevor die gesamte Datei geladen ist, schnell ein grobes Vorschaubild zu geben. Dies ist besonders dann sinnvoll, wenn das Laden eines Bildes länger als eine halbe bis ganze Sekunde dauert bzw. man nur ein Vorschaubild benötigt. Jedoch werden große Bilder trotzdem meistens im normalen JPEG-Modus zum Download angeboten.

[Bearbeiten] PNG

Version 1.0 der PNG-Spezifikation (Portable Network Graphics) erhielt 1996 den Status einer W3C-Empfehlung und definiert somit das jüngste der hier vertretenen Rastergrafikformate.

Das Format ist als patentfreie und moderne Alternative zu GIF konzipiert und bietet dementsprechend eine im direkten Vergleich effizientere verlustfreie Kompression. Es besteht die Möglichkeit, eine Farbtiefe von bis zu 48 bit pro Pixel (etwa 281,4 Billionen Farben) und einen zusätzlichen Alpha-Kanal mit 8 oder 16 bit pro Pixel (256 oder 65536 Transparenzabstufungen) zu verwenden. Zudem können binäre Transparenz und Interlacing eingesetzt werden.

In fast allen Fällen ist das PNG-Format dem GIF-Format vorzuziehen, lediglich Animationen werden nicht unterstützt.

Mit dem kostenlosen Open-Source-Tool pngcrush lassen sich PNG-Dateien verlustfrei optimieren und somit auf eine kleinere Dateigröße bringen, indem die Datei bereinigt und optimiert komprimiert wird. Diese Optimierung/Neukompression ist verlustfrei.

Bild Komprimierung Speichergröße
Feuerwehrfest-2014-png8.png PNG-8
(256 Farben)
44,5 Kb
Feuerwehrfest-2014-png24.png PNG-24 140 Kb
Beachten Sie: Das PNG-Format eignet sich aufgrund der verlustfreien Kompression und den daraus resultierenden, sehr großen Datenmengen nicht für Fotos.

[Bearbeiten] GIF

Mit dem GIF-Format (Graphics Interchange Format), welches 1987 von CompuServe eingeführt und 1989 noch einmal zur üblicherweise verwendeten Version GIF89a erweitert wurde, können Grafiken verlustfrei mit einer Farbtiefe von bis zu 24 Bit (~16,7 Millionen Farben) gespeichert werden, jedoch nur bis zu 256 Farben pro Frame. Damals hat es sich vor allem wegen der überlegenen Kompressionsrate gegenüber anderen Formaten durchgesetzt, heute genießt GIF89a das Alleinstellungsmerkmal, als einziges weit verbreitetes Format Animationen zu unterstützen.

Bild Komprimierung Speichergröße
Feuerwehrfest-2014-gif-256.gif 256 Farben 50,1 Kb
Feuerwehrfest-2014-gif-16.gif 16 Farben 20,3 Kb
Beachten Sie: Das GIF-Format eignet sich aufgrund der eingeschränkten Farbpaletten nicht für Fotos.
Empfehlung: Dieses Format eignet sich besonders für Cliparts und Logos, bei denen eine reduzierte Farbpalette abgespeichert werden kann, was die Dateigröße nochmals deutlich reduziert.

[Bearbeiten] WebP

WebP („weppy“) ist ein Datenformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. Es ist ein Schwesterprojekt des Videoformates WebM. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG. Allerdings unterstützen dieses Format nur die Webkit-Browser.

  • Chrome
  • Leer
  • Leer
  • Opera
  • Leer

Details: caniuse.com

[Bearbeiten] Formate für Vektorgrafiken

Vektorgrafische Formate beschreiben nicht, welche Farbanteile ein Pixel im Bild hat, sondern sie beschreiben Objekte. Es gibt Objekte wie gerade und nach einem Algorithmus gekrümmte Linien, runde und winklige Flächen, Text usw. All diese Objekte haben im Bild eine bestimmte Position und bestimmte Ausmaße, Farben und andere Eigenschaften. Flächen können einfach, mit einem Farbverlauf oder mit einem Bitmap-Muster gefüllt sein, 3D-Effekte und Farbfilter zugewiesen haben. Objekte können auch zu Objektgruppen zusammengefasst sein. In der Datei stehen dann nur die Beschreibungen der Objekte. Die anzuzeigende Grafik wird zur Laufzeit aus den beschreibenden Daten erzeugt.

Ideal ist diese Grafikform für das Web insofern, als die Beschreibungsdaten für vektorgrafische Objekte in der Regel viel weniger Speicherplatz benötigen als pixelorientierte Grafiken.

[Bearbeiten] SVG (Scalable Vector Graphics)

Dateien des SVG-Formats (Scalable Vector Graphics) haben die übliche Dateiendung .svg oder .svgz und den MIME-Typ image/svg+xml.

SVG ist eine Entwicklung des W3-Konsortiums und genauso wie HTML, CSS, XML und auch PNG, plattformübergreifend, offen dokumentiert und frei verwendbar.

Das SVG-Format zeichnet sich durch folgende besonderen Eigenschaften aus:

  • XML-basiert: SVG ist eine XML-basierte Sprache. Das Format ist dadurch jederzeit gegen eine DTD validierbar, und – was ganz wichtig ist – es ist ein Klartextformat. SVG-Grafiken sind daher z.B. für Suchmaschinen nach Textinhalten durchsuchbar. Ferner ist es problemlos möglich, SVG-Grafiken dynamisch mit Scripts zu erzeugen, sei es serverseitig mit CGI-Scripts, oder client-seitig mit einer Sprache wie JavaScript.
  • Mit Hilfe des Document Object Model (DOM) ist sogar der direkte dynamische Zugriff auf jedes Beschreibungsdatum einer SVG-Datei möglich. SVG eignen sich deshalb z.B. hervorragend für interaktive Grafiken, bei denen ein Anwender in einem HTML-Formular Parameter eingibt, aus denen die Grafik dann zusammengestellt wird, oder für dynamisch erzeugte Balken- und Tortendiagramme zu Server-Statistiken.
  • XLink-Unterstützung: XLink ist ein Schema zum Beschreiben von Verweisen (Hyperlinks) in XML. Auch auf SVG ist dieses Schema anwendbar. Dadurch ist es möglich, verweis-sensitive SVG-Grafiken zu erstellen. Die Verweise können zu beliebigen lokalen oder weltweiten Zielen führen.
  • Zoom- und Schwenkfähigkeit: Vektorgrafiken lassen sich verlustfrei zoomen. So können kleine Grafiken für sehschwache Menschen problemlos vergrößert werden. Ebenso lassen sich solche Grafiken leicht drehen (schwenken).
  • Animierbarkeit: Sie können SVG mit SMIL, JavaScript oder auch CSS animieren.
Empfehlung: Gerade für Grafiken, die Symbole enthalten, Logos oder Cliparts, ist das SVG-Format eine sinnvolle Alternative zum GIF-Format. Ideal geeignet ist es für jede Art von technischer Grafik, für Illustrations- und Konstruktionsgrafiken.

[Bearbeiten] VML (Vector Markup Language)

  • Achtung
  • CSS 2.0
  • IE 4

Die Vector Markup Language, ein auf XML basiertes Vektorgrafikformat, wurde im Jahr 1998 von Microsoft, Macromedia und anderen zur Standardisierung beim W3C eingereicht, dort jedoch zugunsten des SVG-Standards abgelehnt. Nichtsdestotrotz hielt Microsoft seit dem Internet Explorer 5.0 als einziger großer Browserhersteller an VML fest.

Beachten Sie: Mit der Version 10 des Internet Explorer wurde die Unterstützung für VML aufgegeben.


[Bearbeiten] Was wofür verwenden?

Welches der hier vorgestellten Grafikformate in der Praxis zu bevorzugen ist, hängt ganz vom Einsatzzweck ab.

[Bearbeiten] Fotos

Für Fotos, die über das Web ausgeliefert werden sollen, sind JPG-Dateien das Mittel der Wahl. Sie erlauben eine akzeptable Bildqualität bei gleichzeitig geringer Dateigröße. Nur wenn Sie Ihren Besuchern Fotos in der bestmöglichen Qualität anbieten wollen, ist es sinnvoll, auf PNG auszuweichen. Da PNG-Dateien aber deutlich größer als JPG-Dateien werden können, sind ein erhöhtes Datentransfervolumen für den Betreiber einer Website und längere Ladezeiten für Ihre Besucher eine unvermeidliche Folge.

Sinnlos ist es allerdings, bereits als JPG vorliegende Fotos nachträglich in PNG zu konvertieren. Dadurch lässt sich kein Qualitätsgewinn erzielen; die Dateien werden aber trotzdem größer. Um Fotos sinnvollerweise als PNG anbieten zu können, muss schon das Original als PNG abgespeichert sein.

[Bearbeiten] Andere Grafiken

In einer perfekten Welt würde man für alle anderen Grafiksorten außer Fotos nur noch SVG verwenden:

SVG-Dateien sind …

  • Teil eines offenen Standards
  • textbasiert,
  • responsiv, da sie verlustfrei in jede beliebige Größe skalieren
  • mit SMIL, JavaScript oder auch CSS animierbar
  • (besonders wenn sie von Hand erstellt wurden) klein und können noch zusätzlich komprimiert ausgeliefert werden.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML