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.

Tipp

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.

Tipp

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.

Tipp

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.

Hinweis

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öhererSpeicherbedarf. 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.

Tipp

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.

Tipp

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.

Tipp

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.

Hinweis

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 verbreitetenPDF 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 VektorformatSVG 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.

Hinweis

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  

Auf dem Laufenden bleiben?

Jetzt für unseren Newsletter anmelden und gratis Online-Marketing Whitepaper für lokale Anbieter sichern!