Sie sind hier

» » Bildformate

Bildformate

Welches Format ist für welchen Zweck geeignet?

Wenn man in Wikipedia nachschlägt, welche Grafik- und Bildformate es gibt, ­bekommt man eine Liste von über 100 verschiedenen Dateiendungen angezeigt. Allerdings sind sehr viele davon einer bestimmten Software, Anwendung oder ­sogar Betriebssystem zugeordnet und damit für die meisten Anwender nicht ­relevant.

Diese Liste kann auf sechs Bildformate reduziert werden, die alle Anwender ­kennen sollten, egal ob Hobbyfotograf, Gelegenheitsknipser oder professioneller Bildbearbeiter.

Diese sechs Bildformate werden im Folgenden genauer beschrieben, welche Vor- und Nachteile sie besitzen und für welchen Zweck sie sich am Besten eignen.

1. Pixelbasierte Bildformate

.jp(e)g

= "Joint Photographic Experts Group"

Das JPG-Format ist das meistgenutzte Grafikformat, vor allem weil es mit fast allen Anwendungen geöffnet und angezeigt werden kann. Es ist ideal geeignet für Bilder mit vielen (16,7 Millionen) Farben, die aber trotzdem wenig Speicherplatz beanspruchen z.B. für den Einsatz im Web.

Durch die verschieden starken Komprimierungsstufen, kann die Dateigröße recht genau gesteuert werden, allerdings verschlechtert sich auch die Bildqualität bei stärkerer Komprimierung immer mehr. Harte Farbübergänge, sehr feine Linien und Texte sind daher nicht optimal darstellbar.

Transparenz oder Ebenen können im JPG-Format nicht mitgespeichert werden.

Abgespeichert als JPG-Datei mit einer Größe von 10 x 10 cm, 72 dpi Auflösung.
Linkes Bild: Niedrige Qualität (10 KB Dateigröße), d.h. stärkste Komprimierung. Die Verpixelung ist deutlich zu erkennen.
Rechtes Bild: Maximale Qualität (61 KB Dateingröße), d.h. geringe Komprimierung.

.gif

= "Graphics Interchange Format"

Dieses Bildformat war in den Anfängen des Internets die erste Wahl, wenn animierte Grafiken verlangt wurden. Dafür wird es auch heute noch eingesetzt, vor allem bei den sogenannten Cinemagrammen, in denen nur ein Teil eines statischen Bildes animiert ist.

Allerdings können GIF-Dateien maximal 256 verschiedene Farben anzeigen (indizierte Farbe). Das reicht, um kleine Grafiken oder Logos mit nur wenigen Farben anzuzeigen, für Fotos in einer guten Qualität ist das Format aber nicht geeignet.

Das GIF kann aber transparente Bildbreriche besitzen, allerdings nur bedingt (ganz transparent oder nicht transparent, keine Zwischenabstufungen = „binäre Transparenz“) und ist durch die Komprimierung sehr klein. Außerdem kann es mit dem Interlace-Speicherverfahren abgespeichert werden. Dabei entsteht der Eindruck, dass das Bild während des Aufbaus immer schärfer und detailreicher wird, was vor allem bei einer langsamen Internetverbindung auffällt.

Mit einer Größe von 10 x 10 cm, 72 dpi Auflösung, 256 Farben und transparentem Hintergrund abgespeichert hat die GIF-Datei eine Größe von 28 KB. Der orangene Kreis ist hinter dem Bild platziert und dient zur Veranschaulichung der Transparenz.

.png

= "Portable Network Graphics"

PNG-Bilder vereinen die Vorteile von GIF- und JPG-Bildern: Sie können Transparenz und Alpha-Kanäle enthalten und mit dem Interlace-Verfahren gespeichert werden, sie verwenden die volle Bandbreite an Farben (16,7 Millionen) und die Komprimierung verringert die Dateigröße ohne die Bildqualität merklich zu beeinträchtigen.

PNG-Dateien werden von den meisten Grafikanwendungen unterstützt.

Die Dateigröße der 10 x 10 cm großen PNG-Datei beträgt 97 KB. Man kann hier auch gut erkennen, dass das Bild echte Transparenz enthält, da der orangene Kreis auch durch den Schatten (60% Transparenz) vom Vogel durchscheint.

.tif(f)

= "Tagged Image File Format"

Das TIF-Format wird sowohl auf Windows- als auch auf Apple- oder Linux-Rechnern von allen gängigen Grafik- und Layout-Programmen unterstützt, allerdings nicht alle Programme können dessen Komplexität vollständig ausnutzen.

Es besitzt die Möglichkeit ganz ohne oder mit einer Komprimierung ohne Qualitätsverluste abgespeichert zu werden. Die Dateien sind daher recht groß.

Außerdem können Bilder in verschiedenen Farbmodi (RGB oder CMYK) mit der geünschten Auflösung gespeichert und verschiedene ICC-Profile eingebettet werden. Die Verwendung von Transparenz, Alpha-Kanälen, Ebenen und die Einbettung von Pfaden ist auch möglich. Dadurch hat sich das TIF-Format als Standard für Bilder mit hoher Qualität im Print-Bereich durchgesetzt.

Am Ende der Seite finden Sie eine .zip-Datei zum Download, das auch die .tif-Datei dieses Beispiels beinhaltet. Das TIF wurde auf die Hintergrundebene reduziert und hat eine Dateigröße von mehr als 1 MB bei Abmessungen von 10 x 10 cm, 300 dpi Auflösung und dem CMYK-Farbmodus.

2. Vektorbasierte Grafikformate

.eps

= "Encapsulated Postscript"

EPS-Dateien unterstützen CMYK- und RGB-Daten und sind als Vektor-Dateien nicht abhängig von einer bestimmten Auflösung. Für die Layout-Programme kann beim Anlegen einer EPS-Datei ein Vorschaubild mit eingebettet werden, das auch Transparenz enthält.

Für das Ansehen oder editieren einer EPS-Datei wird allerdings spezielle Software benötigt wie z.B. Adobe Illustrator oder Inkscape.

.svg

= "Scalable Vector Graphics"

Das SVG-Format ist eine auf XML basierte Spezifikation, um zweidimensionale Vektorgrafiken im Internet darzustellen.
Sie können direkt mit einem Texteditor erstellt werden. SVG-Editoren und Grafik-Programme wie Adobe Illustrator oder Inkscape erlauben eine bequeme Bearbeitung in der graphischen Ansicht.

Die Verbreitung des SVG-Formats nimmt langsam zu, weil neue Webbrowser es inzwischen unterstützen und Suchmaschinen die Grafiken mittlerweile erkennen.

<svg xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ 
viewBox=“0 0 277.1 218“>
  <defs>
    <linearGradient id=“Unbenannter_Verlauf_18“ data-name=“Unbenannter Verlauf 18“
x1=“171.6“ y1=“130.54“ x2=“218.33“ y2=“130.54“ gradientUnits=“userSpaceOnUse“>
</defs>
  <title>Vogel</title>
  <g id=“Schatten“>
    <path d=“M278.7,196.5c-4.2-6.5-14.5-16.9-25.6-23a67.1,67.1,0,0,1-7-2.3c7.3,5.2,14.3,
10.7,16.2, 13.8,2.8,4.6,3.6,8.8,2.1,11.5s-2.3,2.8-5.8,2.8-13.9-3.4-25.6-12c7.3,8.3,14.1,17.3,
14.3,22.1s-.9,6.8-3,8a5.5,5.5,0,0,1-2.7.6c-2.9,0-6.9-1.7-12.1-5.2a47.8,47.8,0,0,1-5.8-5c-10.2,
19.5-41.6,26.1-43.6,26.5-10.1,6.3-22, 8.5-34.4,10.8a93.6,93.6,0,0,1-16.9,1.4,116.1,116.1,0,0,
1-18.2-1.4, 101.3,101.3,0,0,1-24.2,3.3h-.4a67.2,67.2,0,0,1-27.6-6.2h0S66,258.9,114.7,
254c15-1.5,19.3, 5.8,68-4.3s47.3-13.8,47.3-13.8,10.2,18.3,22.7,9.5,3.5-13.5,8.2-16.1,12.7-2,
11.4-10-2.6-9.8.1-10S284,204.8,278.7,196.5Z“ transform=“translate(-3.3 -37.2)“
fill=“#5d5958“ opacity=“0.4“/>
  </g> ... 

Dieser Code ist ein Auszug aus dem XML-basierten Code der SVG-Datei. Er beschreibt die einzelnen Flächen, aus denen das Bild zusammengesetzt ist, anhand ihrer Pfad-Koordinaten, Kontur-  und Füllfarben. Zum Anzeigen wird ein Browser oder ein Grafikprogramm benötigt. Eine eingebettete Vorschau für Layoutprogramme wie bei EPS-Dateien gibt es nicht.

Die Bildformate im Überblick

 

Diese Checkliste herunterladen: