Die Wahl der richtigen Bilddateitypen mag wie eine triviale Entscheidung erscheinen.

Aber Menschen sind visuelle Kreaturen, und Bilder sind ein integraler Bestandteil der Online-Erfahrung.

Die meisten Seiten und Artikel verwenden Screenshots und Bilder, um den Textinhalt zu bereichern. Tatsächlich enthalten nur etwa 8% der Webseiten keine visuellen Inhalte.

Leider verstehen viele Webseitenbesitzer immer noch nicht, welche Bilddateitypen sie für die verschiedenen Anwendungsfälle wählen sollen. Das Ergebnis? Am Ende verlangsamen sie die Ladegeschwindigkeit ihrer Webseite, weil ihre Bilder nicht das beste verfügbare Format haben und auch nicht optimiert sind.

In diesem Artikel behandeln wir die wichtigsten Bilddateierweiterungen und wann du sie verwenden solltest, um deinen Besuchern die bestmögliche Nutzererfahrung zu bieten.

Was sind die verschiedenen Bilddateitypen?

Bilddateitypen und -formate werden in zwei verschiedene Hauptkategorien unterteilt: Rasterbilddateien und Vektorbilddateien.

Schauen wir uns jede Kategorie genauer an.

Rasterbild-Dateiformate

Die gängigsten Bildformate für das Web (JPEG, GIF und PNG) befinden sich alle unter der Kategorie Raster.

Rasterbild-Dateitypen zeigen statische Bilder an, bei denen jedes Pixel eine bestimmte Farbe, Position und Proportion hat, die auf ihrer Auflösung basieren (zum Beispiel 1280×720).

Da sie statisch sind, kannst du die Größe der Bilder nicht effizient ändern, das ursprüngliche Design und die Pixel werden einfach gedehnt, um den zusätzlichen Platz zu füllen. Dadurch entsteht am Ende ein verschwommenes, verpixeltes oder anderweitig verzerrtes Bild.

Rasterbild - JPEG Beispiel

Rasterbild – JPEG Beispiel

Die große Mehrheit der Fotos oder Bilder, die du im Internet siehst, verwenden ein Rasterbildformat.

Vektor-Bild-Dateiformate

SVG, EPS, AI und PDF sind Beispiele für Vektorbild-Dateitypen.

Im Gegensatz zu den statischen Rasterbilddateiformaten, bei denen jede Designform und -farbe an ein Pixel gebunden ist, sind diese Formate flexibler.

Vektorgrafiken verwenden stattdessen ein System von Linien und Kurven auf einer kartesischen Ebene, skaliert im Vergleich zur Gesamtfläche, nicht zu einem einzelnen Pixel.

Das bedeutet, dass du die ursprüngliche Bildauflösung endlos vergrößern kannst, ohne Qualitätsverlust oder Verzerrung.

Vektorbildformat-Vergrößerung

Vektorbildformat-Vergrößerung (Bildquelle: Wikipedia.com)

Wie du sehen kannst, ist der Qualitätsunterschied bei 7-facher Vergrößerung völlig unvergleichbar.

Da die SVG die Positionen anhand eines Prozentsatzes der Gesamtfläche und nicht anhand von Pixeln berechnet, gibt es überhaupt keine Verpixelung.

Nur 8% der Webseiten enthalten keine visuellen Inhalte... aber für die anderen 92% ist die Anzeige von Bildern mit dem richtigen Dateityp unerlässlich. 🖼 Finde die 15 besten Optionen in diesem Leitfaden👇Click to Tweet

Die 15 beliebtesten Bilddateitypen

Im Folgenden decken wir alle wichtigen Grafikdateiformate ab, von Web-Rasterbildern über Vektoren bis hin zu Bildbearbeitungssoftware-Dateien.

Wir machen einen Deep-Dive und behandeln die Vor- und Nachteile, Browser- und Betriebssystem-Support und die idealen Anwendungsfälle für jedes Format.

1.JPEG (And JPG) — Joint Photographic Experts Group

Tiger-Bild JPEG-Format

Tiger-Bild JPEG-Format

JPEG (oder JPG) ist ein Rasterbild-Dateiformat mit verlustbehafteter Komprimierung, das es für den Austausch von Bildern geeignet macht. JPEGs sind „verlustbehaftet“, d.h. sie reduzieren die Dateigröße, aber auch die Qualität der Bilder, wenn du das Format verwendest.

JPEG ist immer noch einer der meistverwendeten Bilddateitypen, die du im Internet sehen wirst, weil es komprimiert ist und praktisch universellen Browser/OS Support bietet.

Die meisten Social-Media-Plattformen (wie Facebook und Instagram) wandeln hochgeladene Bilddateien automatisch in JPEGs um. Sie verwenden auch einzigartige Social-Media-Bildgrößen, um die Auflösung deiner Fotos zu steuern.

Vorteile und Nachteile

Browser und OS Support

Use Cases

2. PNG — Portable Network Graphics

Kinsta's Ressourcenzentrum .png Bilddatei

Kinsta’s Ressourcenzentrum .png Bilddatei

PNG ist ein Rastergrafikformat, das verlustfreie Komprimierung unterstützt, wobei Details und Kontrast zwischen den Farben erhalten bleiben.

Insbesondere bietet PNG eine viel bessere Lesbarkeit von Text als JPEG.

Das macht PNG zu einer beliebteren Wahl für Infografiken, Banner, Screenshots und andere Grafiken, die sowohl Bilder als auch Text enthalten.

Vorteile und Nachteile

Browser und OS Support

Use Cases

3. GIF — Graphics Interchange Format

Beispiel eines Gif-Bildes

Beispiel eines Gif-Bildes

Das GIF ist ein weiterer Bilddateityp, der unter das Rasterformat fällt. Es verwendet verlustfreie Kompression, „beschränkt“ das Bild aber auf 8 Bit pro Pixel und eine begrenzte Palette von 256 Farben.

Das GIF-Format ist am bekanntesten (und am meisten benutzt) für animierte Bilder, weil es durch seine 8-Bit-Beschränkung die Dateigrößen von Animationen klein und internetfreundlich hält.

Vorteile und Nachteile

Browser und OS Support

Use Cases

4. WebP

Beispiel eines WebP-Bildes

Beispiel eines WebP-Bildes

WebP ist ein Bildformat, das speziell entwickelt wurde, um eine bessere verlustfreie und verlustbehaftete Kompression von Bildern zu ermöglichen.

Der Wechsel von JPEG und PNG zu WebP kann dabei helfen, Speicherplatz und Bandbreite auf dem Server zu sparen, mit bis zu 35% kleineren Bilddateien bei gleicher Qualität.

Vorteile und Nachteile

Browser und OS Support

Use Cases

5. TIFF

Image file types: tiff icon

TIFFC icon

Ein Format, das in dieser Anleitung zu Bilddateitypen nicht fehlen sollte, haben wir TIFF.

TIFF, was die Abkürzung für Tagged Image File Format ist, ist ein Rasterbildformat, das am häufigsten zum Speichern und Bearbeiten von Bildern verwendet wird, die später für den Druck verwendet werden.

Es bietet keine Komprimierung, da die Priorität auf der Erhaltung der Bildqualität liegt.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

6. BMP — Bitmap

Image file types: bmp vs gif

Bitmap vs gif

Bitmap (BMP) ist ein meist veraltetes Bilddateiformat, das einzelne Pixel mit wenig bis keiner Komprimierung abbildet. Das bedeutet, dass BMP-Dateien leicht extrem groß werden können und unpraktisch zu speichern oder zu handhaben sind.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

7.  HEIF — High Efficiency Image File Format

Image file types: jpeg vs heif

JPEG vs HEIF format

HEIF, kurz für High Efficiency Image File Format, ist ein Bildformat, das von dem Team hinter dem MPEG-Videoformat entwickelt wurde, um eine direkte Konkurrenz zu JPEG zu sein.

Theoretisch ist die Komprimierung fast doppelt so effizient wie JPEG, was zu Bildern von bis zu doppelter Qualität bei identischen Dateigrößen führt.

Es ist ein Rasterbildformat, das auf Pixel-Mapping basiert, was bedeutet, dass man die Bilder nicht ohne Qualitätsverlust vergrößern kann.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

8. SVG — Scalable Vector Graphics

Image file types: SVG logo

SVG logo

Das Scalable Vector Graphics-Dateiformat, normalerweise als SVG bezeichnet, wurde vom W3C als Markup-Sprache entwickelt, um zweidimensionale Bilder direkt im Browser zu rendern.

Es verlässt sich nicht auf Pixel wie ein Rasterformat, sondern verwendet XML-Text, um Formen und Linien zu umreißen, ähnlich wie mathematische Gleichungen Graphen erzeugen.

Das bedeutet, dass man SVG-Bilder ohne Qualitätsverlust endlos skalieren kann.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

9. EPS — Encapsulated Postscript

EPS icon

EPS icon

Im Wesentlichen ist eine EPS-Datei (Encapsulated PostScript) eine Vektorbilddatei, die zum Speichern von Illustrationen in Adobe Illustrator und anderer Illustrationssoftware wie CorelDraw verwendet wird.

Wie SVG-Dateien ist EPS eigentlich ein textbasiertes Dokument, das Formen und Linien mit Code umreißt, anstatt Pixel und Farben abzubilden. Folglich unterstützen EPS-Dateien auch verlustfreie Skalierung.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

10. PDF — Portable Document Format

PDF-Datei Beispiel

PDF-Datei Beispiel

Wahrscheinlich assoziierst du PDF mit dem Speichern, Abspeichern und Lesen von meist textbasierten Dokumenten. Das ist vollkommen verständlich – das Dokument ist schließlich im Namen enthalten.

Aber PDF-Dateien basieren eigentlich auf der gleichen PostScript-Sprache, die auch EPS-Vektorbilddateien unterstützt und mit der man auch Bilder und Illustrationen speichern kann.

Es ist das Bildformat der Wahl zum Speichern von Illustrationen, Magazincovern und mehr für den späteren Druck. Es ist auch die bevorzugte Wahl für unsere Kinsta Ebooks.

Vorteile und Nachteile

Browsers und OS Support

Use Cases

11. PSD – Photoshop-Dokument

Image file types: psd logo

PSD logo

Wie der Name schon sagt, ist das PSD-Dateiformat ein Bildformat, das zum Speichern von Bilddokumenten verwendet wird und mit Adobe Photoshop in Entwicklung ist.

Es ist kein websicheres Bildformat, daher wird es weder von Browsern noch von normalen Bildbetrachtern oder Editoren unterstützt.

Vorteile und Nachteile

Use Cases

12. AI — Adobe Illustrator Artwork

Adobe Illustrator Datei-Symbol

Adobe Illustrator Datei-Symbol

AI ist ein weiteres Bildformat, das speziell von Adobe entwickelt wurde, um nicht nur das Bild, sondern auch den Projektstatus zu speichern.

Wie PSD ist es nicht für den Gebrauch im Web gedacht und wird von keinem Browser und den meisten Standard-Bildbetrachtern unterstützt.

Bist du es leid, einen langsamen Host für deine WordPress-Seite zu haben? Wir bieten blitzschnelle Server und 24/7 Weltklasse-Support von WordPress-Experten. Schau dir unsere Pläne an

Im Gegensatz zu PSD-Dateien kannst du AI-Dateien ohne Qualitätsverlust frei skalieren.

Vorteile und Nachteile

Use Cases

13. XCF — eXperimental Computing Facility

xcf icon

XCF icon

XCF, was für eXperimental Computing Facility steht, ist ein Bilddateityp, der dem Open Source Bildeditor GIMP entstammt. Es ist das Äquivalent zu PSD-Dateien und speichert Pfade, Transparenz, Filter und mehr.

Noch einmal, dies ist ein nativer Dateityp zum Speichern von Projekten und es wird von keinem Browser oder Standard-Bildbetrachter unterstützt.

Vorteile und Nachteile

Use Cases

14.  INDD — Adobe InDesign Document

adobe indesign icon

Adobe InDesign icon

Das INDD ist ein nativer Dateityp für Adobe InDesign-Benutzer, in dem du Projektdateien mit Seiteninhalt, Stilen, Farbfeldern und mehr speichern kannst.

Obwohl es manchmal als Bilddateiformat bezeichnet wird, neigt es dazu, über den Text hinaus auf visuelle Elemente zu verweisen.

Es wird nicht von irgendwelchen Browsern oder Standard-Bildbetrachtern unterstützt, da es kein websicheres Format ist.

Vorteile und Nachteile

Use Cases

15. Raw Image File Types

Rohbildformate sind die Dateitypen, die eine Digitalkamera verwendet, um Bilder in voller Qualität für die spätere Nachbearbeitung und Bearbeitung zu speichern.

Die wichtigsten Rohbild-Dateitypen nach Kamerahersteller:

Anstatt der 256 Farben, die in einer JPEG-Datei verfügbar sind, bieten RAW-Dateien bis zu 16.384 verschiedene Farben in einem einzigen Bild. Das gibt dir mehr Flexibilität beim Einstellen von Farben und Kontrast in der Nachbearbeitung.

RAW-Bilder sind nicht für das Web oder das Teilen von Bildern gedacht und werden von keinem gängigen Browser oder Bildbetrachter unterstützt.

Vorteile und Nachteile

Use Cases

Bild-Dateitypen FAQs

Was sind die 3 üblichen Dateitypen einer Bilddatei?

Basierend auf Daten, die sich auf die Internetnutzung beziehen, sind die drei gebräuchlichsten Bilddateitypen PNG, JPEG und SVG.

Nutzungsstatistiken von Bilddateiformaten

Nutzungsstatistiken von Bilddateiformaten (Bildquelle: w3techs.com)

Schauen wir uns unten an, was sie so weit verbreitet macht.

1. PNG: Screenshots, Banner, Infografiken, Bilder

Da sich PNG als Format besser für Text innerhalb des Bildes eignet, wird es öfter für Screenshots, Banner (je nach Größe der Werbebanner) und vieles mehr verwendet.

Da es verlustfrei komprimiert wird, wird es auch von Designern und Fotografen verwendet, um hochwertige Bilder zum Beispiel auf ihren Portfolio-Webseiten zu präsentieren.

Diese beiden Faktoren, zusammen mit seinem universellen Browser und OS Support, machen es zum beliebtesten Bilddateityp im Web. PNGs sind auf sage und schreibe 77 % aller Webseiten zu finden.

2. JPEG: Bilder

Die verlustbehaftete Komprimierung bedeutet, dass JPEG eine bessere Option ist, um Bilder in deinem gesamten Inhalt zu präsentieren. Der Qualitätsverlust ist für den durchschnittlichen Internetnutzer kaum sichtbar, und du kannst viel Speicherplatz und Bandbreite sparen.

Aus diesem Grund ist es das zweitbeliebteste Format im Internet, das von fast 72% der Webseiten verwendet wird. Die meisten Webseiten verwenden sowohl PNGs als auch JPEGs für verschiedene Zwecke.

Zur Erinnerung: Es gibt keinen Unterschied zwischen JPG und JPEG, es sind zwei verschiedene Akronyme und Dateierweiterungen für dasselbe Format.

3. SVG: Logos, Icons und Illustrationen

SVG-Dateien sind skalierbare Vektordateien, die sich perfekt für Icons, Logos, Grafiken und einfache Illustrationen eignen. Das Bild kann sogar direkt als CSS-Code in die Seite eingefügt werden.

Aus diesem Grund stehen SVGs an dritter Stelle und werden von 27% der Webseiten verwendet.

Ehrenvolle Erwähnung: Animierte GIF-Bilder

Obwohl es selten das Format der Wahl für statische Bilder ist, hat GIF ein Comeback als die #1 Wahl für das Teilen von Animationen gemacht.

Animiertes Gif Beispiel

Animiertes Gif Beispiel

Infolgedessen verwenden etwa 22% der Webseiten GIFs auf ihren Seiten, obwohl sie wahrscheinlich auch PNGs und JPEGs als Standardformate verwenden.

Welches Bildformat ist die höchste Qualität?

Rohe Bildformate haben die höchste Qualität, haben aber unangemessen große Dateigrößen von bis zu Hunderten von Megabyte.

Für Web-Bilder bietet das WebP-Dateiformat 25-35% kleinere Dateigrößen als JPEG bei gleicher Qualität der Fotos, was bedeutet, dass du bei gleichem Speicherplatz qualitativ hochwertigere Bilder hochladen und deine Webseite beschleunigen kannst.

HEIF ist eine weitere JPEG-Alternative mit effizienterer Komprimierung, wird aber derzeit von keinem der gängigen Browser unterstützt.

PNG-Dateien bieten eine verlustfreie Komprimierung, aber das bedeutet, dass die Dateigrößen extrem groß und das Laden der Dateien sehr langsam ist. Eine einzelne PNG-Datei kann oft Hunderte von KB oder sogar 1MB+ groß sein. Wenn ihr jedoch einige Taktiken wie Lazy Loading (seit WordPress 5.5 im Core verfügbar) und ein CDN ausnutzt, könntet ihr immer noch eine schnelle Webseite haben.

 

Welche Dateiformate unterstützen die Transparenz?

Die gebräuchlichsten Bilddateiformate für das Web, die Transparenz unterstützen, sind PNG, WebP, GIF und sogar SVG.

Die meisten nativen Projektbild-Dateitypen wie PSD, XCF und AI unterstützen ebenfalls Transparenz.

Auf der anderen Seite unterstützt das populäre JPEG-Bildformat keine Transparenz.

Ist PNG besser als JPEG?

Der Hauptunterschied zwischen PNG und JPEG ist, dass PNG ein verlustfreies Bildformat ist, während JPEG ein verlustbehaftetes ist. Das bedeutet im Grunde genommen, dass PNG Kompressionstechniken verwendet, ohne die ursprüngliche Qualität oder Detailgenauigkeit des Bildes zu beeinträchtigen.

Für Text in Bildern, Tutorial-Screenshots und wenn du möchtest, dass Schilder oder andere feine Elemente auf einem Foto 100% sichtbar sind, ist PNG das richtige Format.

PNG vs JPEG-Comic

PNG vs JPEG-Comic (Bildquelle: lbrandy.com)

Wie ihr an diesem lustigen Bild oben sehen könnt, ist PNG, das links abgebildet ist, viel besser in der Lage, Text und einfache Formen deutlich darzustellen, als JPEG, das rechts abgebildet ist.

Bedeutet das, dass JPEG ein schlechter Bilddateityp ist? Überhaupt nicht!

Für normale Blog-Beiträge oder Header-Bilder bietet JPEG eine mehr als gute Qualität bei deutlich geringerer Dateigröße. Du kannst oft bis zu 50% oder mehr Platz sparen, während du mit bloßem Auge kaum einen Qualitätsunterschied erkennen kannst.

Mit dieser Anleitung zu den besten Bilddateitypen kannst du dafür sorgen, dass der visuelle Inhalt deiner Webseite klar und deutlich dargestellt wird ✨Click to Tweet

Zusammenfassung

Es gibt keinen Mangel an Bildern, die du legitimerweise für deine Projekte verwenden könntest. Hoffentlich hat dir dieser Artikel geholfen zu verstehen, welche Bilddateitypen und -formate du in welchem Kontext verwenden solltest, um die besten Ergebnisse zu erzielen.

Rasterformate werden am besten für Bilder und Grafiken verwendet, während Vektoren ein großartiger Ersatz für Logos, Icons und digitale Grafiken sind.

Wenn du die richtigen Bilddateitypen für die richtige Aufgabe verwendest, kannst du nicht nur die Ladegeschwindigkeit deiner Seite verbessern, sondern auch die Bandbreite und die Serverlast senken. Ein weiterer positiver Effekt ist, dass sich dein Nutzererlebnis insgesamt deutlich verbessert. Nicht schlecht, oder?


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an