Bilddateiformate im Vergleich: Alles, was du über JPEG, PNG & Co. wissen musst

Möchtest du eine Website erstellen, brauchst du natürlich auch Bilder. Doch Bild ist nicht gleich Bild. Denn nicht jeder Dateityp eignet sich für jeden Zweck. Welche Bildformate es gibt, wie sie sich voneinander unterscheiden und welche Vor- und Nachteile sie jeweils haben, das erfährst du in diesem Artikel. 

Wenn du dich außerdem schon immer gefragt hast, was eigentlich der Unterschied zwischen Pixeln und Vektoren ist, dann lies jetzt weiter. Denn hier erfährst du alles, was du über Bilddateiformate im Internet wissen musst.

Bist du bereit für deine eigene Website? Dann erstelle sie jetzt.

Alle Bilddateiformate unterscheiden sich im Grunde in zwei Punkten: der Komprimierung und der Kompatibilität. 

Wenn du ein Foto oder digitales Bild bearbeiten und oder neu abspeichern möchtest, dann musst du dir über diese beiden Faktoren Gedanken machen und entscheiden, welches Fotoformat bzw. Bildformat für deinen Zweck geeignet ist. 

Sobald du dich für die richtigen Bilder und Bildformate entschieden hast, kannst du deine eigene Website erstellen. Am besten nutzt du dafür unsere Anleitung für eine Wix Website.

Das JPEG- bzw. JPG-Format ist dir sicher bekannt, denn es ist das beliebteste Bilddateiformat. Entwickelt wurde es von der Joint Photographic Experts Group, daher auch der Name. JPEG gehört zu den verlustbehafteten Bilddateiformaten, was bedeutet, dass viele Details und Nuancen zu Gunsten der Dateigröße verloren gehen. Qualitativ gesehen gehört JPEG also nicht zu den besten Formaten. Für Logos beispielsweise ist JPEG deshalb nicht gut geeignet. 

Warum ist das JPEG-Format trotzdem so beliebt? Ganz einfach: JPEG ist ein guter Kompromiss zwischen Dateigröße und Bildqualität. Denn trotz geringer Dateigröße bietet das Format noch immer eine akzeptable Bildqualität. Für Betreiber:innen von Webseiten ist das wichtig, denn Bilder mit einer zu hohen Dateigröße würden zum einen zu viel Speicherplatz verbrauchen und zum anderen zu lange zum Laden brauchen. Und eine schlechte Website-Ladezeit beeinflusst die Website Performance.

Darüber hinaus verfügt JPEG über eine hohe Kompatibilität, kann also auf vielen Plattformen und Geräten verwendet werden.

Vorteile: Geringe Dateigröße, hohe Kompatibilität

Nachteile: Verliert mit jedem Speichern an Bildqualität

Am besten zu nutzen für: Bilder auf Websites, Favicons und Social Media

PNG steht für „Portable Network Graphics” und ist eine beliebte Alternative zum JPEG-Format. Denn im Gegensatz zu JPEG, verkleinert das PNG-Format Bilder verlustfrei. Alle Bildinformationen bleiben also erhalten. Zudem können Bestandteile eines Bildes beim PNG-Format transparent sein. Das macht es zu einem beliebten Bilddateiformat für alle, die ein Logo erstellen wollen.

​​PNG genießt ebenfalls eine breite Kompatibilität und kann auf verschiedenen Plattformen und Geräten verwendet werden. Allerdings sind PNG-Dateien aufgrund ihrer verlustfreien Komprimierung oft größer als JPEG-Dateien. Daher ist es wichtig, PNG gezielt dort einzusetzen, wo Qualität und Transparenz vor der Dateigröße stehen.

Vorteile: Hohe Bildqualität, Unterstützung von Transparenz

Nachteile: Größere Dateigrößen im Vergleich zu JPEG

Am besten zu nutzen für: Logos, Website-Bilder und Social Media, wenn eine hohe Bildqualität im Vordergrund steht

Du hast noch kein eigenes Logo, dann kannst du es jetzt erstellen.

BMP steht für „Windows Bitmap”. Es ist ein älteres und einfaches Bilddateiformat, das von Microsoft entwickelt wurde. Da es ohne Komprimierung arbeitet, sind die Bilddateien sehr groß. Aufgrund des hohen Speicherbedarfs werden BMP-Bilddateien jedoch nicht von Browsern unterstützt. 

Das BMP-Format wurde aus den genannten Gründen von JPEG abgelöst und wird heute eher weniger verwendet.

Vorteile: Kein Qualitätsverlust, schnelle Bearbeitung möglich

Nachteile: Sehr großer Speicherbedarf, wenn du die Bildgröße anpasst, ist Qualitätsverlust möglich 

Am besten zu nutzen für: Screenshots, Icons, 2D-Fotos

Hast du gewusst, dass du mit KI Bilder erstellen kannst? Cool, oder? Wir stellen die besten KI-Bild-Generatoren vor.

Nicht alle Bilddateiformate sind fürs Web geeignet. Ein Beispiel ist das TIFF-Format („Tagged Image File”). Mit diesem Format kannst du besonders gut Druckdateien für Fotos erstellen, für deine Website solltest du es allerdings nicht verwenden.

Denn Bilder im Rasterbildformat TIFF werden in der Regel nicht komprimiert, weshalb sie eine solch hohe Qualität haben. Beliebt sind sie aus diesem Grund bei Fotograf:innen und allen, die mit Bildern arbeiten.

Der Nachteil im Online-Bereich ist allerdings, dass sie sehr viel Speicherplatz verbrauchen und sehr lange zum Laden brauchen. Außerdem können nicht alle Browser das TIFF-Format anzeigen.

Vorteile: Kein Qualitätsverlust

Nachteile: Sehr großer Speicherbedarf, lange Ladezeiten 

Am besten zu nutzen für: Druckerzeugnisse

GIFs, diese kleinen bewegten Bilder, hast du bestimmt schon häufiger gesehen. Ob auf Social Media oder in WhatsApp, GIFs sind beliebt für Memes und verbreiten sich gern rasend schnell. 

Doch auch auf deiner Website kannst du GIFs gewinnbringend einsetzen. Denn mit den Animationen lassen sich wunderbar kleine Geschichten erzählen, und wir Menschen lieben Geschichten! 

Vielleicht ist dir jedoch schon aufgefallen, dass GIFs häufig nicht ganz so qualitativ hochwertig aussehen. Das liegt an der limitierten Farbauswahl – es werden nur 256 Farben unterstützt.

Übrigens sind GIFs auch beliebte Formate für NFT Art.

Vorteile: Unterhaltsam, schnelle Verbreitung möglich, können schnell geladen werden

Nachteile: Keine gute Bildqualität, Farben sind limitiert

Am besten zu nutzen für: Social Media, Website

PDF-Formate sind ideal für Online-Dokumente sowie für Dokumente, die ausgedruckt werden sollen. Der große Vorteil von PDF-Dateien ist, dass sie auf jedem Gerät gleich aussehen. Und genau aus diesem Grund wurde das PDF-Format auch von Adobe entwickelt. Konvertierst du zum Beispiel eine Microsoft-Word-Datei in eine PDF-Datei, musst du dir keine Sorgen machen, dass die Bilder bei den Empfänger:innen größer oder kleiner werden oder dass der Text sich verschiebt. Bei einer PDF-Datei bleibt alles an seinem Platz.

Eine PDF-Datei kann jedoch nicht nur Text und Bilder enthalten, sondern auch Videos, Formulare, Schaltflächen und vieles mehr. Der einzige Nachteil von PDF-Dateien ist, dass ein PDF-Reader auf dem Gerät installiert sein muss, ansonsten lässt sich die Datei nicht öffnen.

Vorteile: Datei sieht auf jedem Gerät gleich aus

Nachteile: PDF-Reader notwendig

Am besten zu nutzen für: Formulare & Dokumente

Du brauchst noch Texte für deine Website? Mit diesem Artikel findest du den besten KI-Textgenerator für deine Texte. 

SVG („Scalable Vector Graphics”) ist ein Dateiformat, das auf XML basiert und vektorbasiert ist. Es wird häufig verwendet, um Vektorgrafiken zu speichern und anzuzeigen. Vektorgrafiken sind digitale Illustrationen, die auf geometrischen Formen basieren und mithilfe von Vektor-Illustrationssoftware wie Illustrator erstellt werden. Sie haben den Vorteil, dass sie auch bei Vergrößerungen ihre höchste Qualität beibehalten.

Ein Beispiel: Wenn dein Firmenlogo im Vektorformat ist – und das sollte es sein – kannst du es problemlos vergrößern, um es sowohl für riesige Werbung als auch für deine Visitenkarten nutzen zu können, ohne dabei Qualitätsverluste befürchten zu müssen. SVG-Bilder sind außerdem mit allen Browsern kompatibel.

Das Format eignet sich auch gut für Druckzwecke. Deshalb empfehlen wir, Logos, Icons und Illustrationen immer auch als SVG-Datei zu speichern.

Vorteile: Lässt sich ohne Qualitätsverluste stark vergrößern

Nachteile: Wird von Social-Media-Plattformen nicht unterstützt

Am besten zu nutzen für: Webdesign

Ein weiteres Bilddateiformat für Vektorgrafiken ist das EPS-Format („Encapsulated Post Script”). Im Gegensatz zum SVG-Format basiert es jedoch nicht auf XML, sondern auf PostScript; einer Programmiersprache zur Seitenbeschreibung, die von Adobe entwickelt wurde.

Ein weiterer Unterschied ist, dass Bilder im EPS-Format eher für den Druckbereich und weniger für den Web-Einsatz gedacht sind. 

Vorteile: Lässt sich ohne Qualitätsverluste stark vergrößern

Nachteile: Nicht für den Online-Bereich gedacht

Am besten zu nutzen für: Druckerzeugnisse

Wenn es um Bilder im Internet geht, müssen wir zwischen zwei Anwendungszwecken unterscheiden: Social-Media-Plattformen und eigene Webseiten. 

Wenn du deine Bilder für Social-Media nutzen willst, kann es vorkommen, dass die Plattform dein hochgeladenes Bild selbst in das gewünschte Bildformat konvertiert. Das ist praktisch und alternativ wirst du auch darüber informiert, dass dein Dateiformat nicht unterstützt wird oder deine Dateigröße zu groß ist. Klappt das Hochladen deiner Bilder, brauchst du dir keine Sorgen machen, dass die Bilder zu lange zum Laden brauchen oder gar nicht angezeigt werden.

Lädst du Bilder auf deine eigene Webseite hoch, sieht das anders aus. Dort kannst du theoretisch gigantische Bilder hochladen, die aber sehr lange zum Laden brauchen und deshalb deine gesamte Website verlangsamen. Das ist nicht nur nervig für deine Nutzer:innen, sondern schadet dir auch im Hinblick auf SEO. Denn Google mag keine Webseiten, die lange Ladezeiten haben. Auf deiner Website musst du also einen Kompromiss zwischen Dateigröße und Pixelanzahl finden.

Optimal für Bilder im Internet sind die Bilddateiformate JPEG und PNG. Für Animationen kannst du GIFs nutzen.

Zu diesem Kompromiss gehört die Auflösung. Sie wird dadurch bestimmt, wie viele Pixel ein Bild enthält. Je mehr Pixel ein Bild enthält, desto besser die Bildqualität. Allerdings bedeuten mehr Pixel auch eine größere Bilddatei. Für deine Website solltest du deshalb nicht unbedingt auf die höchste Auflösung setzen. Sie verlangsamt deine Seite, verbraucht zu viel Speicherplatz und ist darüber hinaus oftmals nicht nötig.

Wann solltest du Wert auf eine hohe Auflösung  legen? Dann, wenn es auf präzise Details ankommt. Zum Beispiel bei professionellen Drucken oder wenn der Fokus auf hochwertigen Fotografien liegt.

Damit Bilder schneller übertragen werden können und weniger Speicherplatz verbrauchen, können sie je nach Bilddateiformat beim Abspeichern komprimiert werden. Das bedeutet, dass die Datenmenge reduziert wird. So entsteht eine kleinere Bilddatei mit dem gleichen Bild.

Dabei wird zwischen einer verlustreichen und einer verlustfreien Komprimierung unterschieden. Der Unterschied folgender: Bei einer verlustreichen Komprimierung werden Informationen zu Bildpunkten reduziert und die Farben neu berechnet. Das führt in der Regel zu einer schlechteren Bildqualität. Bei einer verlustfreien Komprimierung wird die Dateigröße zwar auch verringert, aber die wesentlichen Informationen bleiben erhalten und können bei Bedarf wiederhergestellt werden. So werden Pixel gruppiert und in die gleiche Farbkategorie eingeordnet. Auch die Meta-Daten eines Bildes werden entfernt.

So findest du das passende Farbschema für deine Website.

JPEG ist das bekannteste Beispiel für eine verlustreiche Komprimierung. PNG hingegen für eine verlustfreie Komprimierung.

Zwei weitere wichtige Begriffe sind Raster- und Vektorbilder. Wie sich diese unterscheiden, schauen wir uns jetzt an.

Rasterbilder bestehen aus einer bestimmten Pixelanzahl. Das bedeutet, dass die Bildqualität und die Bildschärfe deutlich schlechter wird, wenn du versuchst, ein Rasterbild zu vergrößern oder zu verkleinern. Vergrößerst du eine Pixelgrafik, wird sie unscharf, verkleinerst du sie, gehen Details verloren, weil die Pixelanzahl verringert wird. 

Trotz dieser Limitierung sind Pixelbilder aber weit verbreitet, denn sie haben einen großen Vorteil: Sie können komplexe Farbverläufe und -abstufungen darstellen. Deshalb sind Rasterbilder ideal in der Fotografie und überall dort, wo komplexe Grafiken und detaillierte Bilder gebraucht werden. 

Übliche Bilddateiformate sind JPEG, PNG, BMP und GIF.

Vektorgrafiken bestehen nicht aus Pixeln, sondern beruhen auf mathematischen Formeln. Aus diesem Grund können sie vergrößert und verkleinert werden, ohne an Bildqualität einzubüßen. Dank dieses Vorteils kommen Vektorgrafiken gern im Webdesign zum Einsatz, etwa bei Logos, Schriften oder Symbolen. Ein weiterer Vorteil ist, dass Vektorgrafiken nicht viel Speicherplatz benötigen, da sie nur wenige Informationen enthalten.

Übliche Bilddateiformate sind SVG, EPS und TIFF. 

Entdecke die besten Schriftarten für deine Website.

Die Auswahl des passenden Bildformats für eine Website ist von zentraler Bedeutung. Die verschiedenen Bilddateiformate wie JPEG, PNG, GIF, BMP, TIFF, PDF, SVG und EPS sind jeweils auf bestimmte Zwecke optimiert, differieren jedoch hinsichtlich Komprimierung, Kompatibilität und Qualität. Zum Beispiel bietet JPEG eine geringe Dateigröße und hohe Kompatibilität, eignet sich aber weniger für Logos aufgrund des Verlusts an Bildqualität. PNG hingegen ermöglicht eine hohe Bildqualität und Transparenz, aber mit größeren Dateigrößen. Die Wahl des geeigneten Formats hängt somit von den spezifischen Anforderungen an Bilder für Websites, Logos, Social Media und Druckerzeugnisse ab.

Wenn du eine Website erstellen willst, dann empfiehlt sich das JPEG-Format, da sie eine ausgewogene Kombination aus geringer Dateigröße und akzeptabler Bildqualität bieten, was die Ladezeiten der Website optimiert und die Benutzererfahrung verbessert.

Also warte nich länger und erstelle deine eigene Website. Wir wünschen dir viel Erfolg.

Welches Bildformat besser ist, hängt von deinen Präferenzen ab. Beide Bildformate haben ihre jeweiligen Vor- und Nachteile. 4:3 ist zum Beispiel gut geeignet für Gesichter und Personen; 16:9 hingegen für Landschaften.

Welches Bildformat du wählen solltest, hängt von dem Zweck ab, für den du das Bild verwenden möchtest. Soll das Bild eine hohe Qualität zum Ausdrucken haben, ist das TIFF-Format gut geeignet. Willst du das Bild auf deine Website stellen, sind JPEG oder PNG gute Bildformate.

Herkömmliche Fotos gibt es in folgenden Größen:

Das Format von 13x18 ist 2:3.

Alexandra Eger

Blog Growth Managerin