Die 10 gängigsten Bildformate im Vergleich: JPEG, PNG & Co.

Beim Erstellen von Grafiken und Bildern fürs Web stehen Designer und Designerinnen vor einer enormen Auswahl an Bildformaten. Doch nicht jeder der Dateitypen eignet sich gleichermaßen fürs Webdesign.

Welche Eigenschaften die unterschiedlichen Bildformate mit sich bringen und warum Sie den Unterschied zwischen Pixeln und Vektoren kennen sollten, erfahren Sie in diesem Beitrag.

Welche Bildformate gibt es?

Bildformate werden grob in zwei Kategorien eingeteilt: Raster- und Vektorformate. Der größte Unterschied liegt hierbei in der Skalierung der Bilddateien. Während Rasterdateien (auch: Pixeldateien) durch Pixelpunkte dargestellt werden, setzen sich Vektorgrafiken durch zweidimensionale Objekte zusammen.

Werden Pixelgrafiken vergrößert, so werden die Pixel auseinandergezogen, was zu einem Qualitätsverlust führt. Vektorgrafiken sind hingegen verlustfrei skalierbar, weshalb sie vor allem für Logos und die Erstellung von Symbolen eingesetzt werden.

Welche Bildformate werden im Internet verwendet?

Im Internet lässt sich so gut wie jedes Bildformat darstellen. Das Problem liegt deshalb nicht unbedingt in der Kompatibilität, sondern in der Kompression. Um Bilder im Netz zu laden, sind besonders Bilddateien geeignet, die eine kleine Speicherkapazität aufweisen.

Zu große Dateien mit Endungen wie beispielsweise .tiff oder .eps bringen lange Ladezeiten mit sich und verschlechtern somit die Performance einer Webseite. Am häufigsten werden JPEG-, PNG- und GIF-Dateien im Internet verwendet.

Wer die Wahl hat, hat die Qual – deshalb stellen wir hier die zehn gängigsten Bildformate vor, um Ihre Entscheidung ein wenig zu vereinfachen:

1. JPG / JPEG

Das Bildformat JPG, auch JPEG, (.jpg) gehört zu den bekanntesten Rasterformaten für Bilder und Fotos. Es wurde von der Joint Photographic Experts Group entwickelt, die dem Format auch seinen Namen gab. Besonders geeignet ist JPEG für die Speicherung von farbigen Fotos.

Um die Bilder zu komprimieren, wird die Cosinustransformation verwendet. Dadurch wird eine schnellere Ladezeit erzielt. Die Methode ist allerdings verlustbehaftet, weshalb JPEG nicht das richtige Bildformat für Logos ist.

Bildformate für Transparenz

Einige Bildformate lassen sich mit transparentem Hintergrund abspeichern. Sie sind deshalb besonders für die Erstellung von Logos und anderen Symbolen geeignet.

2. GIF

Wackelnde Memes im Retrolook: Daran denken wohl die meisten, wenn sie vom Dateiformat GIF (.gif) hören. In der Tat ist das Graphic Interchange Format eher ein Videoformat, das sich aus Bildern zusammensetzt. Deshalb lassen sich mit GIFs animierte Grafiken erstellen, die mit einer kleinen Dateigröße und kurzen Ladezeit punkten. Eingesetzt wird das Format heute hauptsächlich aus nostalgischen Gründen: Durch die 24-Bit-Farbunterstützung ist es nämlich nicht für kontrastreiche Bilder geeignet.

3. PNG

Das Format PNG (.png; Portable Network Graphics) gilt als Erweiterung von GIF. Der Vorteil des PNG-Bildformates liegt dabei ganz klar in der zweistufigen Kompression. Dieses Verfahren ermöglicht es, Bilder mit großen Vollfarb-Bereichen und scharfen Kanten detailgetreu darzustellen. Nachteil des Verfahrens ist jedoch, dass PNG-Dateien recht groß sind und somit viel Speicherplatz einnehmen. Die Dateiqualität unterscheidet sich jedoch wenig von einem herkömmlichen JPEG-Format.

4. TIF / TIFF

Wenn Sie auf der Suche nach einem Rasterbildformat sind, das eine verlustfreie Kompression ermöglicht, dann ist TIFF (.tiff ) Ihre Wahl. Das Format Tagged Image File eignet sich daher besonders gut, um Druckdateien für Fotos zu erstellen. Die Komprimierung behält die Originaldateien bei, was eine besonders hohe Qualität verspricht.

Weniger geeignet ist das Bildformat daher jedoch fürs Web. Die riesigen Dateien haben sehr lange Ladezeiten, was die Performance einer Website erheblich beeinträchtigen kann. Außerdem ist das Format auch nicht mit allen Browsern kompatibel.

Vektorformate

Vektorformate bieten den großen Vorteil, dass sie verlustfrei vergrößert werden können. Sie werden daher besonders für Logos eingesetzt. Unternehmen sollten stets eine abgespeicherte Masterdatei besitzen, um Veränderungen am Corporate Design zu vermeiden.

5. SVG

SVG (.svg; Scalable Vector Graphics) ist ein vektorbasiertes Dateiformat, das auf XML beruht. Das Bildformat erlaubt es Designerinnen und Designern, Grafiken zu erstellen, die ohne Qualitätsverluste vergrößert werden können. Damit findet SVG vor allem bei der Logo- und Symbolerstellung Einsatz. Da das Dateiformat von den meisten Browsern unterstützt wird, ist es besonders für das Web geeignet.

6. EPS

In Druckereien wird häufig mit dem EPS-Bildformat gearbeitet. Das Vektorformat ist nämlich besonders gut geeignet, um hochauflösende Bilddateien abzuspeichern. Die Datei ähnelt dem PDF-Format, da es sich mit den meisten Programmen öffnen lässt und sich somit ideal für den Austausch untereinander anbietet.

7. PDF

Das Portable Document Format dürfte den meisten Userinnen und Usern geläufig sein. Denn ganz gleich, ob Sie einen Vertrag, Ihren Leistungskatalog oder ein Briefing verschicken: PDF ist für all diese Fälle das geeignete Dateiformat. Entwickelt wurde das Bildformat von Adobe.

Es bietet den großen Vorteil, dass es auf so gut wie allen Geräten und mit den meisten Programmen geöffnet werden kann. Das Dateiformat ist somit besonders geeignet, um Dokumente und Grafiken untereinander zu versenden. Selbst ausfüllbare Dokumente lassen sich mit PDFs erstellen. Nutzer und Nutzerinnen benötigen dazu lediglich die Adobe Acrobat Reader-Software.

Adobe-Grafikformat

Der Softwarekonzern Adobe bietet neben Programmen zur Bild- und Grafikbearbeitung auch eigene Bildformate an, die sich in vielen Grafikabteilungen zu einem Standard entwickelt haben.

8. AI

Das Vektorbildformat AI (.ai) wird durch die Erstellung von Grafiken in Adobe Illustrator erzeugt. Da das Programm als Industriestandard fürs Grafikdesign gilt, ist AI so etwas wie die Norm für die Grafikabteilung geworden. Wird eine AI-Datei zwischen den Teammitgliedern hin und her geschickt, so kann jeder an der Datei weiterarbeiten. Nachteil ist jedoch ganz klar, dass das Format an die Verwendung der Adobe-Software gebunden ist.

9. PSD

Das Bildformat der beliebten Bearbeitungssoftware Photoshop ist das Photoshop Document (kurz: PSD). In Photoshop werden Bilder und Grafiken in verschiedenen Ebenen bearbeitet. Das PSD-Format speichert die Informationen jeder einzelnen Ebene ab, sodass die Grafik, nachdem sie geöffnet wurde, wie gewohnt weiterbearbeitet werden kann.

Ein Nachteil ist jedoch, dass das Format nur für Photoshop erzeugt wurde und somit auch nur beim Bearbeiten mit diesem Programm vollends kompatibel ist. Die Dateien lassen sich zwar auch in anderen Bearbeitungsprogrammen öffnen, jedoch werden Daten aus den verschiedenen Ebenen nicht korrekt dargestellt. Außerdem arbeitet die Software mit Rasterformaten, weshalb bei der Skalierung von PSD-Dateien Qualitätseinbuße die Folge sind.

10. INDD

INDD (.indd) ist ebenfalls ein Format, das sich mit Adobe Illustrator erstellen und speichern lässt. Marketern und Marketerinnen ist dieses Format höchstwahrscheinlich schon einmal begegnet, wenn sie ein E-Book erstellt haben. Auch andere größere Projekte wie Broschüren oder ganze Magazine lassen sich mit dem Bildformat umsetzen.

Eine Besonderheit des Formats ist, dass es sowohl Dateien aus Photoshop als auch aus InDesign miteinander vereinen kann. Wie alle anderen Adobe-Bildformate ist es jedoch auch an die Verwendung der Adobe-Software gebunden.

Fazit: Wählen Sie Bildformate für Webseiten korrekt aus

Bildformate gibt es wie Sand am Meer. Doch nicht jedes Format ist für jeden Zweck geeignet. Um Bilder oder Grafiken auf Ihrer Website zu veröffentlichen, sollten Sie unbedingt die Dateigröße beachten. Laden Sie nämlich besonders große Bildformate hoch, führt das zu einer Schwächung Ihrer Website-Performance. Mit JPEG, PNG und GIF sind Sie in den meisten Fällen auf der sicheren Seite.

Titelbild: Hanna Plonsak / iStock / Getty Images Plus