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.
Die wichtigsten Bilddateiformate: JPG, PNG, GIF & Co. erklärt
Alle Bilddateiformate unterscheiden sich im Grunde in zwei Punkten: der Komprimierung und der Kompatibilität.
Bei der Komprimierung geht es um die Frage, wie die Dateigröße verringert wird, ob Informationen verloren gehen (verlustbehaftet) oder ob alle Informationen erhalten bleiben (verlustfrei).
Die Kompatibilität bezieht sich darüber hinaus auf die Frage, wie gut ein Bilddateiformat von Software, Plattformen und Geräten unterstützt wird.
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 sind die acht gängigsten Bilddateiformate
JPEG-Format
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-Format
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-Format
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, beim Skalieren der Bildgröße 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.
TIFF-Format
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
GIF-Format
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-Format
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-Format
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
EPS-Format
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
Bildgrößen im Internet: Darauf musst du achten
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.
Hohe vs. geringe Auflösung
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.
Verlustreiche und verlustfreie Komprimierung
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.
Bildformate mit Vektoren und Rastern
Zwei weitere wichtige Begriffe sind Raster- und Vektorbilder. Wie sich diese unterscheiden, schauen wir uns jetzt an.
Bildformate mit Raster
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.
Vektor-Bildformate
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.
Fazit – Die Wahl des richtigen Bildformats 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.
Häufig gestellte Fragen zu Bildformaten
Welches Bildformat ist besser 4:3 oder 16:9?
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 Format solltest du für Bilder verwenden?
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.
Welche Größen von Fotos gibt es?
Herkömmliche Fotos gibt es in folgenden Größen:
9 x 13 cm
10 x 15 cm
11 x 17 cm
13 x 18 cm
20 x 30 cm
Welches Format ist 13x18?
Das Format von 13x18 ist 2:3.
Alexandra Eger
Blog Growth Managerin
