Grafiken für das Web speichern

1 | 23892 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Grafiken für das Web speichern" mit Ihrem Wissen!

Anzeige Hier werben

Die Wahl des richtigen Formats für Bilder, die im Web veröffentlicht werden sollen, ist elementar wichtig. Was es dabei zu beachten gibt und worauf es ankommt wird hier erläutert.

Technik

Verlustbehaftet versus verlustfrei

Um Grafiken im Internet zu publizieren, steht einem eine große Auswahl an Grafikformaten zur Verfügung. Wichtig ist logischerweise, dass man das richtige Format wählt. Abwägen muss man zwischen Ladezeit (Dateigröße) und Qualität (Kompression). Ferner auch die Unterstützung im Browsern. Zweiteres muss aufgeteilt werden in verlustbehaftet und verlustfrei. Verlustbehaftet ist zum Beispiel JPEG.

Die folgende Darstellung gibt einen Überblick:

JPEG
GIF
PNG
SVG
Verlustfrei
nein
ja
ja
ja
(auch verlustfrei skalierbar)
Transparenz
nein
eine Farbe
Alphakanal und einzelne Farben in Palette
ja
Farben
24 bit
indiziert (bis 256)
indiziert (bis 256), 24 bit oder 48 bit
24 bit
Progressives laden / Interlacing möglich ja
ja
ja

Animation
nein
ja
nein
(aber es existiert APNG und MNG)
ja
empfohlene
Verwendung
Fotos, sehr große Bilder bewegte Bilder
(halb)transparente Bilder,
Webgrafiken, Icons
Hindergrundbilder, Datenvisualisierungen, Flash, ...

Im Web herrscht das PNG-Format vor, da es für Webgrafiken derzeit die bessere Wahl ist - Im Vergleich zum GIF fehlt nur die Möglichkeit Animationen erstellen zu können. Fotos sind als JPEG gut aufgehoben, da sie keine scharfen Kanten darzustellen haben und somit der Verlust - auch durch die visuelle Größe - oft nicht erkennbar ist.

Dithering für Grafikformate mit Palette

Dithering ist ein Verfahren das mit einer sehr beschränkten Palette durch "mischen" zusätzliche Farben simulieren kann. So werden fehlende Farben durch verschiedene Anordnung von Pixeln aus den vorhandenen Farben nachgebildet.

Anstatt Dithering zu verwenden sollte meist lieber ein Grafikformat verwendet werden, dass eine höhere Anzahl von Farben bietet. Es ist eher ein Artefakt aus der Zeit als Computer und Bildformate auf wenige Farben beschränkt waren.

Bildformate

Das JPEG-Format - Ideal für Fotos im Web

Zum größten Teil ist das JPEG-Format die beste Wahl um Fotos abzuspeichern. JPEG sollte auch ausschließlich dazu benutzt werden. Bereits beim Machen des Fotos wird oft das Foto schon als JPEG abgespeichert. RAW hingegen ist größer - beinhaltet aber auch mehr Information.

Der Grund warum sich JPEG etabliert hat, ist, dass ein sehr großes Foto bei relativ guter Qualität eine sehr starke Kompression aufweisen kann. So sind Originalaufnahmen oft schon im 100KB-Bereich angesiedelt. Der Verlust der durch die Kompression entstanden ist ist dann aufgrund der hohen Auflösung kaum/nicht mehr erkennbar.

Der Fotograf hat daraufhin 3 Möglichkeiten: JPEG Niedrig, Mittel und Hoch. Je geringer die spätere Dateigröße, desto qualitativ schlechter wird das Foto. Bei sehr starker Kompression bilden sich sogenannte Artefakte an den Kanten zwischen Farbflächen.

Im folgenden sind zwei Ausschnitte aus ein und demselben Foto gezeigt:

Bild zu Grafiken für das Web speichern
Original - 904 kB
Bild zu Grafiken für das Web speichern
Komprimiert - 52 kB

Das GIF-Format - Einfache Art Animationen einzubinden

Bild zu Grafiken für das Web speichern
GIF - 4 kB

Da GIF nur maximal 256 Farben darstellen kann ist es für weiche Farbverläufe, sehr bunte Grafiken und Fotos nicht geeignet. Werden in der Grafik aber nur einige wenige Farben beansprucht, weist es eine viel niedrigere Dateigröße als JPG auf - bei besserer Qualität.

JPEG hingegen würde bei der selben Grafik bei gleicher Dateigröße starke Qualitätsverluste aufweisen. Besonders, da Webgrafiken oftmals kontrastreiche Kanten beinhaltet. JPEG sollte ja auch - wie wir jetzt wissen - ausschließlich für Fotos verwendet werden.

Das PNG-Format - Verlustfreies Allround-Talent

PNG ist das heute meistgenutzte Format für Webgrafiken (Webdesign). Es wurde als Ersatz für das GIF-Format entwickelt, für dessen Erstellung auf Grund eines (seit 2004 abgelaufenen) Patentes Lizenzgebühren fällig wurden. Das PNG Format bietet nahezu alle Funktionen des alten GIF-Formats, unterstützt aber bei weitem mehr Farben sowie einen Alphakanal zur Darstellung von Halbtransparenz.

Vom PNG-Format selbst gibt es mehrere Varianten. So kann ein PNG - wie das GIF-Format - mit einer Palette versehen werden, die maximal 256 Farben enthält. Auch die Möglichkeit einzelne Farben als mit einer Transparenz zu versehen ist dem GIF-Format ähnlich. Daneben kann man PNG-Grafiken mit Graustufen (1, 2, 4, 8 oder 16 Bit) sowie im RGB-Format (8 bzw. 16 Bit pro Kanal, also 24 bzw. 48 Bit) anlegen. Hinzu kommt optional ein Alphakanal (mit auch 8 bzw. 16 Bit), wodurch sich halbtransparente Grafiken erstellen lassen.

Aufgrund der größeren Möglichkeiten verdrängt PNG zusehens das GIF-Format und wird immer mehr unterstützt. Lediglich dem Internet Explorer (bis einschließlich Version 6) blieb bis jetzt die Unterstützung von Alphatransparenz verwehrt. Transparenz einer einzelnen Farbe bei PNGs mit einer Farbpaletten ist jedoch auch im Internet Explorer 6 möglich.

Wie der Name (Portable Network Graphic) schon sagt, ist PNG das optimale Format um ohne Qualitätsverlust Grafiken zu transferieren. Manchmal wird sogar für Fotos dieses Format verwendet, da so keine Informationen verloren gehen.

PNG selbst unterstützt keine Animationen, wie es GIF kann. Stattdessen gibt es das MNG- und APNG-Dateiformat. Beide Formate werden aber von heutigen Browsen nur unzureichend unterstützt. Deswegen werden als Alternative oft Flash-Filme eingesetzt.

In Photoshop wird beispielsweise eine große Palette an Einstellungen geboten:

Bild zu Grafiken für das Web speichern

SVG - Vektorgrafik im Web

SVG ist das Grafikformat der Zukunft wenn es darum geht, Grafiken mithilfe von Vektoren zu realisieren. Sie sind verlustfrei skalierbar, jedoch ist die Unterstützung derzeit noch etwas dürftig, da der Standard noch relativ jung ist. Doch bereits jetzt unterstützen einige moderne Browser das Setzen von SVG-Hintergrundbildern nach dem noch nicht veröffentlichten Webstandard CSS3.

Weiterführend:

Grafiken für das Web speichern

Mit Photoshop

Bild zu Grafiken für das Web speichern

Photoshop bietet eine komfortable Möglichkeit, Grafiken für das Web zu speichern. Man hat die Möglichkeit zwischen vielen verschiedenen Formaten und Einstellungen zu variieren und kann dabei das Ergebnis direkt mit dem Original vergleichen.

[Datei] » [Für Web und Geräte speichern] bzw. [Ctrl] + [Alt] + [Shift] + [S]

Mit Gimp

Unter Gimp kann man einfach über

[Datei] » [Kopie speichern unter]

eine Datei exportieren. Hierbei können dieselben Einstellungen wie beim normalen Speichern verwendet werden.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 8 Personen an der Seite "Grafiken für das Web speichern" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Grafiken für das Web speichern" hier bearbeiten.