Zehn Bildformate im Überblick: Was ist der Unterschied zwischen JPG, PNG und Co.?
Gängige Bildformate wie JPG und PNG sind den meisten Nutzern bekannt. Das Wissen über die genauen Unterschiede und Vorteile der verschiedenen Formate ist hingegen weniger weit verbreitet. Für Nutzer ist oft nicht oder nur schwer erkennbar, wodurch sich eine JPG-Datei von einer PNG- oder GIF-Datei unterscheidet. Doch ein genauer Blick auf die unterschiedlichen Bildformate lohnt sich. Jedes Format bringt Vor- und Nachteile mit sich und ist auf unterschiedliche Anwendungsbereiche ausgerichtet. Wir zeigen die gängigsten Bildformate (Pixel- und Vektorgrafiken) und erklären, wann Sie sich für welches Format entscheiden sollten.
Welche Bildformate gibt es?
Bevor wir uns im Detail ansehen, welche Bildformate es gibt, lohnt sich ein Blick auf die grobe Unterscheidung zwischen Pixel- oder auch Rastergrafiken und Vektorgrafiken.
Wie der Name bereits vermuten lässt, bestehen Pixelgrafiken aus Pixeln. Doch was bedeutet das genau? Stellen Sie sich Pixel wie einzelne Punkte vor, aus denen sich ein Bild oder eine Grafik zusammensetzt. Je größer die Anzahl der Pixel in einem Bild, desto höher auch Auflösung und Dateigröße. Der Nachteil von Pixelgrafiken ist, dass eine Skalierung mit einem Qualitätsverlust einhergeht. Jeder Pixel hat eine definierte Größe. Vergrößern Sie eine Datei, werden auch die Pixel gestreckt und die Qualität nimmt ab.
Speichern Sie Pixelgrafiken immer in genau der Größe ab, in der Sie die Datei benötigen. Dadurch vermeiden Sie einen Qualitätsverlust durch nachträgliches Vergrößern.
Diesen Nachteil haben vektorbasierte Grafiken nicht. Bei ihnen setzt sich ein Bild aus zweidimensionalen Objekten zusammen, deren Position, Maße und Farben beschrieben werden. Dadurch lassen sich Vektorgrafiken bei konstanter Qualität beliebig skalieren. Bildformate dieser Kategorie eignen sich für Grafiken, die in verschiedenen Größen eingesetzt werden, also typischerweise Logos oder andere Marketingmaterialien.
Lassen Sie sich immer die Masterdatei eines Bildes zukommen, wenn Sie die Grafikerstellung in fremde Hände geben. So sichern Sie sich ab und haben jederzeit die Möglichkeit, das Bild in einer beliebigen Größe zu speichern.
Das passende Bildformat auswählen
Welches Bildformat die richtige Wahl ist, hängt primär vom Verwendungszweck ab. Folgende Faktoren beeinflussen die Auswahl:
- Benötigen Sie das Bild in verschiedenen Größen?
- Verwenden Sie das Bild im Web oder als Print?
- In welcher Dateigröße benötigen Sie das Bild und wie wichtig ist eine hohe Qualität?
- Beinhaltet das Bild eine große Anzahl Farbnuancen?
Bei der Verwendung im Web steht die Qualität in vielen Fällen erst an zweiter Stelle. Wichtiger sind eine geringe Dateigröße und eine damit verbundene kurze Ladezeit. Dementsprechend wird häufig eine verlustreiche Kompression in Kauf genommen. In diesem Fall führt der Vorgang zu einem Qualitätsverlust, weil Daten aus dem Bild entfernt oder zu einem Bildpunkt reduziert werden. Bei einer verlustfreien Komprimierung hingegen bleibt die Qualität auch bei einer reduzierten Dateigröße erhalten. Für die Komprimierung werden Pixel der gleichen Farbkategorie gruppiert und Metadaten entfernt.
Informationen zu Googles WebP-Format, das sich u. a. durch eine besonders effiziente Komprimierung auszeichnet, finden Sie ebenfalls im Digital Guide.
Die wichtigsten Pixelformate im Überblick
JPG, PNG oder GIF: Die bekanntesten Bildformate zählen größtenteils zu den Pixelformaten. Der Grund: Rastergrafiken sind für nahezu alle Anwendungsbereiche geeignet und lassen sich programmunabhängig öffnen und bearbeiten. Zudem sind die meist detaillierten Farbabstufungen und komplexen Farbverläufe ideal zur Darstellung von Fotografien geeignet. Die verlustfreie Kompression ermöglicht auch im Web die Darstellung von detaillierten Grafiken. Im Folgenden präsentieren wir Ihnen die gängigsten Pixelformate sowie ihre Vor- und Nachteile:
GIF: Graphics Interchange Format
Sind Ihnen auf einer Website schon einmal animierte Werbebanner oder im Facebook-Feed bewegte Bilder aufgefallen? Dabei handelte es sich vermutlich um GIFs. Diese zeichnen sich durch ihre animierte Form aus. In nur einer einzigen GIF-Datei sind alle Frames und Zeitinformationen für die Animation enthalten.
Dieses Bildformat besteht aus bis zu 256 Farben im RGB-Farbraum und ist daher nicht für farbstarke und komplexe Fotos geeignet, die normalerweise mehrere tausend Farben abdecken. Die beschränkte Farbwahl bringt zugleich einen Vorteil bei der Verwendung im Web, denn die reduzierte Dateigröße führt zu kurzen Ladezeiten – auch bei animierten Dateien. Scharfe Kanten von Formen oder Schriften bildet das GIF-Format sogar deutlich besser als ein JPG ab. Dieses Bildformat ist daher für kleine grafische Elemente und für Webgrafiken optimal geeignet.
Vorteile | Nachteile |
---|---|
verlustfreie Kompression | eingeschränkte Farbwahl |
Animationen möglich | ungeeignet für Fotos mit breitem Farbspektrum |
kleine Dateigröße | flaches Bildformat |
kurze Ladezeit | |
unterstützt Transparenzen |
PNG: Portable Network Graphics
Das PNG-Bildformat wurde als weiterentwickelte Alternative zu GIFs entwickelt. Ein PNG lässt sich im Gegensatz zum GIF mit transparentem oder halbtransparentem Hintergrund speichern und unterstützt den Alpha-Kanal. Zudem passt sich das PNG-Format an optimierte Computer und damit an die größer werdende Farbauswahl an. Das Farbspektrum umfasst bis zu 16 Millionen Farben und damit deutlich mehr als ein GIF. Für den Druck ist dieses Bildformat dennoch nicht geeignet, da PNGs den CMYK-Farbraum nicht unterstützen. Daher rührt auch der Name „Portable Network Graphics“, der die primär digitale Verwendung impliziert.
GIFs sind trotz eingeschränkter Farbwahl nach wie vor in Verwendung, weil Animationen mit der Alternative PNG nicht möglich sind.
PNG ist ein typisches Web-Bildformat, das sich durch eine verlustfreie Kompression auszeichnet. Auch kleine Dateien behalten ihre hohe Qualität und Auflösung und zeigen feine Nuancen. Dementsprechend eignen sich PNGs für Logos oder andere kleine Bilder mit vielen Schattierungen zur Weiterverarbeitung und zum Speichern in verschiedenen Größen. Damit einher geht jedoch auch ein höherer Speicherbedarf. Eine PNG-Datei ist bis zu zehn Mal größer als ein vergleichbares JPG.
Vorteile | Nachteile |
---|---|
verlustfreie Kompression | eignet sich nicht für den Druck |
unterstützt (Halb-)Transparenzen und Alpha-Kanal | erhöhter Speicherbedarf |
volles Farbspektrum | nicht überall unterstützt |
keine Animationen möglich |
JPG/JPEG: Joint Photographic Experts Group
Das JPG-Format ist das am meisten verwendete Bildformat. Die Dateien zeichnen sich durch hohe Kompatibilität und universelle Einsatzmöglichkeiten aus. Mit nahezu jeder Anwendung lässt sich dieses Format öffnen und konvertieren. Zudem bieten JPGs das volle Farbspektrum mit bis zu 16 Millionen Farben. Der Nachteil: Die Komprimierung einer Bilddatei führt durch die Zusammenfassung ähnlicher Pixel zum Verlust von Bildinformationen und damit auch zu Qualitätseinbußen. Dies ist zugleich der Hauptunterschied zum PNG-Format.
JPG vs. PNG: Beide Bildformate sind im Web sehr beliebt, aber prinzipiell sehr unterschiedlich. Welches das richtige Format ist, hängt vom Verwendungszweck ab.
Für die Verwendung im Web ist die Qualität eines JPGs in vielen Fällen ausreichend, sodass Sie von einer schnellen Ladezeit dank geringer Dateigröße profitieren. Sogenannte progressive JPEGs bieten einen zusätzlichen Vorteil in der User Experience, da Bilder pixelweise geladen werden und so keine ungewollten weißen Flächen auf Websites entstehen. Auch als Vorschau lässt sich ein JPG schnell und einfach per E-Mail versenden. Ohne Kompression sind hochwertige JPG-Dateien auch für den Druck geeignet.
Wählen Sie bei der Verwendung im Web immer das bestmögliche Verhältnis zwischen Qualität und Dateigröße.
Vorteile | Nachteile |
---|---|
hohe Kompatibilität | verlustbehaftete Kompression |
weit verbreitet | unterstützt keine Transparenzen und Animationen |
schnelle Ladezeit | keine Ebenen |
volles Farbspektrum |
TIFF: Tagged Image File Format
Das TIFF-Format unterscheidet sich deutlich von den bisher vorgestellten Bildformaten. Die meisten Webbrowser unterstützen dieses Format nicht, weswegen es für die Anzeige im Web ungeeignet ist. Bei der Bearbeitung von Bildern bietet TIFF hingegen deutliche Vorteile. Das Format unterstützt sowohl den RGB- als auch den CMYK-Farbraum und hat eine hohe Farbtiefe von bis zu 32 Bit pro Farbkomponente. Zudem lassen sich Ebenen, Masken und Transparenzen speichern.
Die verlustfreie Kompression ermöglicht beliebiges Speichern oder Kopieren ohne Qualitätsverlust. Das TIFF-Format ist daher ideal für den Druck von hochqualitativen Bildern geeignet. Bildinformationen werden entweder gar nicht oder verlustfrei komprimiert. Die hohe Qualität bedingt jedoch, dass Bilder mehr Speicherplatz benötigen. Auch diese Eigenschaft schließt eine Verwendung im Web nahezu aus.
Vorteile | Nachteile |
---|---|
verlustfreie Kompression | mit vielen Webbrowsern nicht kompatibel |
hohe Qualität | hoher Speicherbedarf |
ideal für Druckdaten von Fotos | |
Transparenzen und Ebenen |
BMP: Windows Bitmap
Das Format BMP ist bereits seit 1990 und Windows 3.0 ein integraler Bestandteil des Microsoft-Betriebssystems. Dementsprechend lassen sich BMPs ohne zusätzliche Plug-ins oder Programme von Drittanbietern öffnen. Zwar wurde dieses Bildformat mittlerweile größtenteils von anderen Formaten abgelöst, findet jedoch nach wie vor Verwendung.
Bei BMP handelt es sich um ein einfach strukturiertes Bildformat, das sich durch eine schnelle Bearbeitung auszeichnet. Auch nach der verlustfreien Kompression sind Bilddaten verhältnismäßig groß, da alle Pixel mit ihrem jeweiligen Farbwert gespeichert werden. Mittlerweile gibt es andere Bildformate, mit denen eine ebenso verlustfreie Kompression mit einer geringeren Dateigröße einhergeht. Im Zeitalter von Übertragungen per E-Mail und Web wird dieses Bildformat daher zunehmend uninteressant und ist für moderne Anwendungsbereiche ungeeignet.
Vorteile | Nachteile |
---|---|
Integraler Bestandteil von Windows | auch nach Kompression große Dateien |
Großes Farbspektrum | |
einfach strukturiert |
PSD: Photoshop Document
PSD ist das Format des führenden Bildbearbeitungsprogramms Adobe Photoshop und ein von Grafikdesignern häufig genutztes Format. Die Bearbeitung setzt jedoch die passende Software voraus. Daher ist das PSD-Format für Privatpersonen und zum kooperativen Arbeiten häufig ungeeignet. Dieses Problem lässt sich umgehen, indem Sie die Datei mit Adobe Photoshop in ein anderes Bildformat umwandeln. Auch vor dem Druck ist eine vorangehende Konvertierung notwendig.
Im PSD-Format besteht jedes Bild aus mehreren Ebenen, die sich leicht bearbeiten lassen. Prinzipiell handelt es sich bei diesen Dateien um Rastergrafiken, die jedoch auch Vektorgrafiken enthalten können. Dieses Bildformat ist daher ideal für die umfangreiche Bearbeitung von Bildern geeignet.
Adobe Photoshop ist als Teil der Adobe Creative Cloud kostenpflichtig. Kostenfreie Photoshop-Alternativen erfreuen sich zunehmender Beliebtheit, da sie teilweise mit dem gleichen Funktionsumfang aufwarten.
Vorteile | Nachteile |
---|---|
umfangreiche Bearbeitung von Bildebenen | Photoshop ist Voraussetzung |
Erstellung von Videos und Animationen | große Speicherkapazität durch Ebenen |
Raster- und Vektorgrafiken | |
Umwandlung in andere Formate möglich |
Die wichtigsten Vektorformate im Überblick
Im Gegensatz zu den in ihrer Größe fest definierten Pixelgrafiken sind Vektorgrafiken deutlich flexibler und daher ideal für die Darstellung von geometrischen Formen und Schriften. Die verlustfreie Skalierung erleichtert zudem die Erstellung von responsiven Webelementen. Voraussetzung für die Bearbeitung sind in den meisten Fällen spezielle Grafikprogramme. Daher werden die folgenden Bildformate zum Großteil nur von Grafikern genutzt. Doch auch Privatpersonen finden zunehmend Gefallen an den leicht adaptierbaren Vektorgrafiken und bedienen sich kostenloser Software-Alternativen.
PDF: Portable Document Format
Das Bildformat PDF ist eine Entwicklung von Adobe, setzt jedoch – im Gegensatz zu anderen Adobe-Formaten – keine firmenspezifische Software voraus (obwohl der Acrobat Reader der entsprechende Standard ist). Im Gegenteil: Das PDF-Format hat sich als zuverlässiges Austauschformat etabliert und lässt sich ohne kostenpflichtige Bearbeitungssoftware ansehen – auf jedem Gerät, jedem Betriebssystem und jedem Webbrowser. Besonders beliebt ist das Format zur Weitergabe an den Druck.
Mit den kostenpflichtigen Adobe-Programmen lassen sich PDFs vielseitig und flexibel bearbeiten. Das Fundament dieses Bildformats ist besonders leistungsstark bei Vektorgrafiken, bildet jedoch auch Pixelgrafiken ab. PDFs ermöglichen auch in der kostenlosen Darstellungsvariante zusätzliche Funktionalitäten wie das Hinzufügen von Notizen, Kommentaren oder Dateianhängen. Mit entsprechenden Sicherheitseinstellungen lässt sich das Bearbeiten durch Dritte verhindern.
Vorteile | Nachteile |
---|---|
hohe Kompatibilität, plattformunabhängig | Bearbeitung nur mit kostenpflichtiger Software möglich |
zur Darstellung keine kostenpflichtige Software notwendig | Text wird als Bild erkannt |
Standard für Druckdaten | teilweise hoher Speicherbedarf |
Zusatzfunktionalitäten |
AI: Adobe Illustrator Format
Das AI-Format ist, wie auch das PDF-Format, ein natives Bildformat des Programmherstellers Adobe. Im Gegensatz zum PDF benötigen Sie jedoch selbst für die reine Darstellung bereits das dazugehörige Programm Adobe Illustrator. Das vektorbasierte Format lässt sich frei skalieren und bietet zudem die Möglichkeit, Rastergrafiken einzubetten oder zu verlinken. Das Bildformat wird meist zum Speichern von Logos und anderen Marketingmaterialien eingesetzt, das in verschiedenen Größen benötigt wird.
Mit Adobe Illustrator lassen sich Dateien auch in jedem anderen gängigen Bildformat speichern. Dies erleichtert den Austausch von Dateien zwischen Grafikern und Privatpersonen. Ein weiterer Vorteil: Durch das Ein- und Ausblenden von Ebenen können Sie mehrere Varianten in nur einer Datei speichern.
Unter professionellen Grafikdesignern hat sich dieses Bildformat als Standard etabliert.
Vorteile | Nachteile |
---|---|
hochgradige Skalierbarkeit | benötigt viel Speicherplatz |
mehrere Ebenen | Adobe Illustrator ist Voraussetzung |
mit anderen Adobe-Programmen kompatibel |
EPS: Encapsulated PostScript
1987 veröffentlichte Adobe das Format EPS in der Programmiersprache PostScript. Mittlerweile wurde das Bildformat größtenteils vom weit verbreiteten PDF abgelöst, das ebenso auf PostScript basiert.
EPS ermöglichte es erstmals, Dokumente genauso darzustellen, wie sie auch beim Druck erscheinen. EPS-Dateien lassen sich ebenso wie PDFs plattformübergreifend mit kostenfreier Software öffnen. Das gängigste Programm zum Öffnen ist der Adobe Acrobat Reader, es steht allerdings eine große Anzahl an Alternativen zur Verfügung. Das verlustfreie Format bindet Pixel- und Vektorgrafiken ein und zeichnet sich durch eine besonders hohe Anpassungsfähigkeit und Skalierbarkeit aus. Zu den Nachteilen zählt, dass EPS-Dateien auf eine Dokumentenseite beschränkt sind und nicht zwischen Vektor und Bitmap unterscheiden.
Vorteile | Nachteile |
---|---|
hochauflösende Bilder für den Druck | vom PDF-Format abgelöst |
mit fast jeder Designsoftware kompatibel | auf eine Seite beschränkt |
keine Differenzierung zwischen Vektor und Bitmap |
SVG: Scalable Vector Graphics
Das XML-basierte Vektorformat SVG erschien 1999 und stellt Bilder und ihre Elemente im Textformat dar. Da nicht alle Nutzer, allen voran Privatpersonen, Zugriff auf die Adobe Creative Suite haben, sind AI-Dateien zum Austausch mit anderen Personen mitunter ungeeignet. SVG-Grafiken hingegen sind ideal zum Versenden von Vektorgrafiken, da sie keine bestimmte Software voraussetzen. Theoretisch lässt sich das Vektorformat auch in einem einfachen Text-Editor erzeugen, dies ist jedoch in der Praxis unüblich.
Innerhalb der Adobe Creative Cloud lässt sich eine SVG-Grafik nur mit Adobe Illustrator öffnen. Um diese auch in InDesign oder Photoshop zu bearbeiten, ist eine Umwandlung in das EPS-Format notwendig.
Das Bildformat SVG gibt es bereits seit über 20 Jahren. Durch die zunehmende Vielfalt an Bildschirmgrößen und dem damit verbundenen responsiven Design erlebt es einen Aufschwung. SVG-Grafiken werden bei jedem Bildschirmaufbau neu skaliert. Dementsprechend sind die Dateien immer in maximaler Schärfe abgebildet und erleichtern das Einrichten eines responsiven Designs erheblich. Auch das World Wide Web Consortium (W3C) standardisierte das Format 2001 und empfiehlt SVG für die Darstellung von zweidimensionalen Vektorgrafiken im Web.
Vorteile | Nachteile |
---|---|
von den meisten Webbrowsern unterstützt | komplexe und detaillierte Grafiken vergrößern die Datei erheblich |
verlustfreie Skalierung | mit einzelnen Browsern nicht kompatibel |
ideal für responsives Design | innerhalb der Adobe Creative Cloud nur mit Illustrator bearbeitbar |
geringe Dateigröße | |
Animation u. a. mit JavaScript möglich |