Bilder transportieren Botschaften, prägen den Eindruck Deiner Webseite und drücken zugleich an Stellschrauben wie Ladezeit und Suchmaschinenranking. Das falsche Bilddateiformat kostet Tempo, macht Kanten unscharf oder bricht die Darstellung in Mobil-Browsern. Das richtige Format zeigt Dein Bild scharf und liefert es schnell aus.
Dieser Beitrag führt Dich durch die wichtigen Bilddateiformate, erklärt ihre Stärken und sortiert für Dich, welches Format wofür den messbaren Effekt für Deine Webseite bringt. Im Webseite-Grundcheck ist die Bildoptimierung einer der schnell wirksamen Hebel; der Beitrag hier vertieft das Format-Wissen dahinter.
Warum Bilddateiformate mehr sind als nur Dateiendungen
Bilddateiformate unterscheiden sich grundlegend darin, wie sie visuelle Informationen speichern. Den größten Unterschied macht das Kompressionsverfahren, also der Trick, mit dem die Datei klein gerechnet wird. Zwei Hauptverfahren stehen sich gegenüber: verlustbehaftete und verlustfreie Kompression.
Verlustbehaftete Kompression
Hier wirft das Format gezielt Bildinformationen weg, die das menschliche Auge ohnehin kaum bemerkt. Das spart Speicher. Je stärker die Kompression, desto kleiner die Datei. Desto eher zeigen sich allerdings Artefakte wie Unschärfe, Blockbildung oder Rauschen. Die weggeworfenen Daten kommen nicht zurück.
Verlustfreie Kompression
Hier rechnet das Format redundante Informationen platzsparend zusammen, ohne ein einziges Pixel zu opfern. Beim Öffnen erscheint das Bild wieder in voller Originalqualität. Die erreichbare Einsparung fällt geringer aus als bei der verlustbehafteten Variante, dafür bleibt jedes Detail erhalten.
Welche Methode passt, hängt am Bildtyp und an Deinem Qualitätsanspruch. Fotos vertragen verlustbehaftete Kompression gut, Strichgrafiken brauchen verlustfreie.
Die zwei Welten — Rastergrafiken und Vektorgrafiken
Eine zweite, ebenso wichtige Unterscheidung betrifft die Art, wie das Bild überhaupt aufgebaut ist. Pixel oder Mathematik: daraus folgt fast alles andere.
Rastergrafiken (Pixelbilder)
Rastergrafiken bestehen aus einem festen Gitter winziger Quadrate, den Pixeln. Jedes Pixel speichert eine Farbe. Die Auflösung gibt vor, wie groß Du das Bild zeigen kannst, ohne dass es pixelig wirkt. Skalierst Du über die Originalmaße hinaus, werden die Pixel sichtbar.
Rastergrafiken spielen ihre Stärke aus bei Fotos, Screenshots und detailreichen Szenen mit vielen Farbverläufen. Die meisten Web-Bildformate (JPEG, PNG, GIF, WebP, AVIF) basieren auf Rasterdaten. Ihr Schwachpunkt: Sie hängen an einer festen Auflösung und werden bei großen Maßen schnell zu schweren Dateien.
Vektorgrafiken
Vektorgrafiken beschreiben ein Bild über mathematische Formeln statt Pixel. Sie definieren Pfade, Linien, Kurven und Füllungen. Das Bild ist im Kern eine Sammlung solcher Anweisungen.
Der große Vorteil: Vektorgrafiken sind auflösungsunabhängig. Sie skalieren beliebig nach oben oder unten und bleiben stets scharf. Bei Logos, Icons, Diagrammen oder Illustrationen mit klaren Konturen sind sie zudem oft kleiner als vergleichbare Rasterbilder. Das dominierende Vektorformat im Web ist SVG (Scalable Vector Graphics). Fotorealistische Szenen liegen Vektoren nicht; dort übernimmt der Raster-Stack.
Die Format-Frage funktioniert wie die Schriftarten-Wahl für Dein Webprojekt: Optik, Performance und Wartbarkeit hängen aneinander. Wer Schärfe in jeder Größe braucht, greift zu Vektor. Wer Fotos zeigt, kommt um Rasterformate nicht herum.
Die etablierten Rasterformate — JPEG und PNG
Zwei Formate tragen das Web bis heute zuverlässig: JPEG für fotografische Inhalte, PNG für alles, wo Schärfe und Transparenz zählen. Beide sind in jedem Browser dabei und decken klar abgegrenzte Einsatzfelder ab.
JPEG (Joint Photographic Experts Group)
JPEG ist das mit Abstand verbreitetste Format für fotografische Inhalte im Web. Es nutzt eine starke verlustbehaftete Kompression und arbeitet besonders effizient bei Fotos mit vielen Farbübergängen. Den Kompressionsgrad stellst Du beim Speichern selbst ein. Höhere Kompression bringt kleinere Dateien, irgendwann auf Kosten der Schärfe.
JPEG zeigt Millionen Farben in 24 Bit, kennt aber keine Transparenz. Der Hintergrund ist immer eine vollflächige Farbe. Das Format passt für große Fotografien, Produktbilder, Avatare und Hintergrundbilder, bei denen leichte Kompressionsverluste den Tempogewinn locker wert sind. Für scharfe Kanten, Text oder einfarbige Flächen ist JPEG die schlechtere Wahl, weil dort Artefakte sofort auffallen.
PNG (Portable Network Graphics)
PNG entstand als Nachfolger des älteren GIF und arbeitet verlustfrei. PNGs Trumpf ist Transparenz: Ein Alphakanal speichert beliebig feine Stufen der Durchsichtigkeit. Damit lassen sich Logos ohne festen Hintergrund, Icons über beliebigen Untergründen oder Grafiken mit weichen Schatten sauber einbauen.
PNG-8 mit 256 Farben passt für einfache Grafiken und liefert sehr kleine Dateien. PNG-24 mit Millionen Farben plus Transparenz bietet hohe Qualität, wird aber bei Fotos deutlich schwerer als JPEG. PNG nimmst Du, wenn verlustfreie Darstellung zwingend ist (Screenshots mit Text, technische Diagramme) oder wenn Du Transparenz brauchst.
GIF — der Sonderfall mit Restnutzen
GIF ist ein altes Format, beschränkt auf maximal 256 Farben. Seine verlustfreie Kompression trägt nur bei sehr einfachen Grafiken mit großen einfarbigen Flächen. Für statische Bilder ist es fast immer die schlechtere Wahl gegenüber PNG-8 oder modernen Formaten.
Der einzige praktische Restnutzen von GIF im modernen Web sind kurze, einfache Animationen. Sobald die Animation länger oder farblich anspruchsvoll wird, liefern animierte WebP- oder AVIF-Dateien spürbar bessere Qualität bei kleinerer Größe. Halte GIF für den Notfall vor — als Default-Format ist es überholt.
Die modernen Rasterformate — WebP und AVIF
Zwei jüngere Formate sind angetreten, JPEG und PNG abzulösen. Sie liefern bei gleicher Bildqualität deutlich kleinere Dateien und unterstützen Transparenz wie Animation in einem einzigen Format.
WebP
WebP wurde von Google entwickelt und vereint die Vorteile von JPEG und PNG in einem modernen Format. Es kann verlustbehaftet und verlustfrei arbeiten, meist mit deutlich besseren Kompressionsraten als die alten Klassiker. Eine verlustbehaftete WebP-Datei ist bei gleicher wahrgenommener Qualität typischerweise 25–35 % kleiner als ein vergleichbares JPEG. Verlustfreies WebP liegt etwa 25 % unter PNG.
WebP zahlt direkt auf die Ladezeit ein. Schnellere Auslieferung zählt als Ranking-Kriterium, und WebP liefert sie ohne sichtbaren Qualitätsverlust. Das Format unterstützt zusätzlich Transparenz und Animationen. Die Browserunterstützung ist mittlerweile flächendeckend.
AVIF (AV1 Image File Format)
AVIF ist das derzeit fortschrittlichste Bildformat fürs Web. Es basiert auf dem AV1-Videocodec, derselben Technik, die hinter aktuellen Streaming-Diensten steckt. Damit liefert AVIF noch einmal bessere Kompressionsraten als WebP. Einsparungen von 50 % oder mehr gegenüber JPEG bei gleicher Qualität sind realistisch.
AVIF unterstützt Transparenz, HDR mit großem Farbumfang und hoher Farbtiefe (10/12 Bit) sowie Animationen. AVIF ist der Blick nach vorn, wenn Du maximale Einsparung und höchste Bildqualität willst. Die Browserunterstützung wächst und liegt mittlerweile nahe an der von WebP.
SVG — das Vektorformat für das Web
SVG (Scalable Vector Graphics) ist das Standardformat für vektorbasierte Grafiken im Web. Es beschreibt Bilder über mathematische Pfade statt über Pixel und holt aus dieser Art der Speicherung eine Reihe Vorteile heraus, die Rastergrafiken so nicht bieten.
Auch kleine Marken-Assets wie Dein Favicon als individuelles Erkennungsmerkmal folgen demselben Format-Denken: kompakt, scharf, formatpassend.
SVG bündelt sechs Vorteile, die Rastergrafiken so nicht bieten:
- Beliebige Skalierbarkeit: SVG bleibt bei jeder Vergrößerung gestochen scharf, vom Favicon bis zum vollformatigen Hintergrund derselbe Code.
- Winzige Dateigrößen: Einfache Grafiken wie Icons, Logos oder Diagramme erzeugen oft nur wenige Kilobyte.
- Bearbeitbarkeit mit Code: SVG-Dateien sind XML-Textdateien. Du öffnest sie im Editor, änderst Farben oder passt sie per Skript an, ganz ohne Bildbearbeitungs-Programm.
- Animation und Interaktion: SVG-Elemente lassen sich mit CSS animieren oder per JavaScript interaktiv machen, von Hover-Effekten bis zu dynamischen Diagrammen.
- Zugänglichkeit: Text in SVG erfasst der Screenreader, Suchmaschinen indizieren ihn, Logos mit Schriftzug bleiben barrierefrei und auffindbar.
- Stilbarkeit mit CSS: Farben, Konturen und teilweise sogar Formen steuerst Du über zentrales CSS. Dein Styling greift bis in die Grafiken hinein.
SVG ist die erste Wahl für alle nicht-fotorealistischen Grafiken, die scharf skalieren müssen.
- Unternehmenslogos
- Icons und Symbole für Navigation und Buttons
- Diagramme, Charts und Infografiken
- Einfache Illustrationen
- Dekorative Elemente mit klaren Formen
Selbst bei komplexeren Illustrationen schlägt SVG oft Rastergrafiken, vor allem wenn dieselbe Grafik in mehreren Größen ausgeliefert werden soll.
Welches Format wofür
Die Auswahl hängt an vier Fragen: Was zeigst Du, wie viel Qualität brauchst Du, wie wichtig ist Tempo und welche Browser musst Du bedienen. Geh die Fragen der Reihe nach durch. Am Ende steht meistens ein klares Format.
Art des Bildinhalts
- Fotografie oder komplexes Bild? → Rasterformat (JPEG, WebP, AVIF).
- Logo, Icon, Diagramm, Illustration mit klaren Formen? → SVG (oder PNG, wenn SVG nicht möglich ist).
- Bild mit Transparenz? → PNG, WebP oder AVIF (kein JPEG).
- Einfache Animation? → GIF (rudimentär), WebP oder AVIF (bessere Qualität und Kompression).
Qualitätsanforderungen
- Verlustfreie Darstellung zwingend? (z. B. technische Zeichnung, Screenshot mit kleinem Text) → PNG oder verlustfreies WebP/AVIF.
- Geringe Qualitätsverluste akzeptabel für deutlich kleinere Dateien? (typisch bei Fotos) → verlustbehaftetes JPEG, WebP oder AVIF.
Performance und Browserkompatibilität
Schnellen Seitenaufbau erreichst Du mit modernen Formaten (WebP, AVIF) plus konsequentem SVG für Vektoren. Für ältere Browser hältst Du JPEG oder PNG als Fallback bereit. Wer überwiegend aktuelle Browser bedient, kann WebP und zunehmend AVIF primär ausspielen.
Browserkompatibilität, Stand Anfang 2026
| Format | Chrome | Firefox | Safari | Edge | Opera | iOS Safari | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|
| JPEG | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
| PNG | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
| GIF | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
| WebP | 100% | 100% | 14+ | 100% | 100% | 14+ | 100% | 100% |
| AVIF | 109+ | 93+ | 16.4+ | 109+ | 95+ | 16.4+ | 100% | 109+ |
| SVG | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% |
Stand: Anfang 2026. Browserkompatibilität verändert sich.
Praktische Strategie für moderne Webseiten
Die folgende Mischung deckt fast jede Webseite ab und lässt sich Schritt für Schritt einführen.
SVG für Vektorgrafiken
Immer SVG verwenden, wo der Inhalt es hergibt. Logos, Icons, Diagramme: kein Format ist hier flexibler oder leichter.
Rastergrafiken
- Primäres Zielformat: WebP für gute Kompression und sehr breite Unterstützung.
- Fortschrittliches Zielformat: AVIF für beste Kompression in Browsern, die es unterstützen.
- Fallback für ältere Browser: JPEG für Fotos oder PNG für Transparenz und verlustfreie Darstellung.
Transparenz
WebP oder AVIF bevorzugen, PNG als Fallback oder für Fälle, in denen verlustfreie Transparenz Pflicht ist.
Animation
WebP oder AVIF bevorzugen, GIF nur, wenn die Animation klein und einfach ist und ältere Browser bedient werden müssen.
Fazit
Die Auswahl der richtigen Bilddateiformate ist mehr als technisches Detail. Sie wirkt direkt auf vier Bereiche, die Dein Erfolg im Web tragen.
Nutzererfahrung (UX)
Schnelle Ladezeiten halten Besucher auf der Seite. Scharfe, ansprechende Bilder vermitteln Professionalität und schaffen Vertrauen.
Suchmaschinenoptimierung (SEO)
Seitenperformance ist ein Ranking-Kriterium. Optimierte Bilder tragen messbar dazu bei. Wie die Bildgröße direkt auf das Ranking durchschlägt, zeigt der Beitrag zu den Core Web Vitals einfach erklärt. Zugänglicher Bildtext, vor allem in SVG, wirkt zusätzlich positiv.
Conversion Rates
Schnelle, visuell stimmige Seiten führen zu höheren Konversionsraten. Das ist seit Jahren in den Analytics-Daten ablesbar.
Bandbreite und Kosten
Kleinere Bilddateien sparen Bandbreite, was vor allem mobile Besucher freut, und senken die Last auf Deinem Server.
Mit WebP und AVIF kaufst Du Dir zusätzlich Ruhe für die kommenden Browser-Generationen — beide laden auch in zwei, drei Jahren noch ohne Nachoptimierung sauber. Bilder sind aktive Bausteine Deiner Seite, keine Dekoration. Wie Du Bilder konkret für die Webseite vorbereitest — von der Quellauflösung über die Komprimierung bis zum Alt-Text — zeigt der Praxis-Beitrag im Anschluss. Schau Dir Deine Bildinhalte einmal genau an. Dann wählst Du bewusst, passend zu Qualität, Funktion und Performance. SVG für Vektoren, WebP oder AVIF mit Fallback für Raster: diese strategisch klügste Format-Mischung trägt Deine Webseite spürbar schneller.