Logos, Icons und Text gehören als SVG ausgeliefert, weil sie bei jeder Auflösung scharf bleiben. Fotos gehören in ein modernes Rasterformat: WebP oder AVIF komprimieren besser als JPEG und werden von allen modernen Browsern unterstützt, mit JPEG oder PNG als Rückfallebene. Für Animationen ist Video das richtige Format, nicht GIF.
Website & Technik
Bildformate: Welches wofür – und warum GIF nie die Antwort ist
Das Wichtigste in Kürze
- SVG eignet sich für weniger komplexe geometrische Formen wie Logos, Text oder Icons und liefert bei jeder Auflösung scharfe Ergebnisse.
- WebP und AVIF komprimieren besser als die älteren Formate; verlustfreies WebP kann effizienter sein als PNG.
- Für Animationen gilt: Video statt GIF – GIF ist auf 256 Farben begrenzt und erzeugt deutlich größere Dateien.
- Ein Bildschirm mit doppelter Pixeldichte braucht die vierfache Pixelzahl – deshalb gehören Rasterbilder responsiv ausgeliefert.
Bilder sind in den meisten Projekten der größte Posten beim Datenvolumen – und die Entscheidung, die am wenigsten bewusst getroffen wird. Meist wird genommen, was aus dem Programm fällt: PNG, weil es nach Qualität klingt, oder JPEG, weil es immer funktioniert hat.
Die erste Entscheidung: Vektor oder Raster
Sie ist die wichtigere und wird am häufigsten übersehen.
SVG ist ein Vektorformat und eignet sich für weniger komplexe geometrische Formen – Logos, Text, Icons. Der Vorteil: scharfe Ergebnisse bei jeder Auflösung und jeder Zoomstufe, bei meist winziger Dateigröße.
Rasterformate – PNG, JPEG, WebP, AVIF – eignen sich für komplexe Szenen wie Fotos. Beim Hochskalieren eines Rasterbilds entstehen zackige und unscharfe Darstellungen, weshalb mehrere Auflösungen gebraucht werden.
Praktische Folge: Ein Logo als PNG ist in fast jedem Fall ein Fehler. Es ist größer als nötig und auf hochauflösenden Bildschirmen unscharf.
Die Formate im Überblick
| Bildtyp | Format | Hinweis |
|---|---|---|
| Logo, Icon, Diagramm, Text als Grafik | SVG | Skaliert verlustfrei, kleinste Datei |
| Foto, Produktbild, Beitragsbild | AVIF oder WebP | Bessere Kompression, mit JPEG als Rückfallebene |
| Foto, wenn Umstellung nicht möglich | JPEG | Mehrere Qualitätsstufen ausprobieren statt eine festlegen |
| Screenshot mit feinen Linien | WebP verlustfrei oder PNG | Verlustfreies WebP kann effizienter sein als PNG |
| Grafik mit Transparenz | WebP oder AVIF | Beide können Transparenz – PNG nur bei maximaler Treue |
| Animation | Video | GIF ist auf 256 Farben begrenzt und erzeugt viel größere Dateien |
Die letzte Zeile ist die mit dem größten Einzeleffekt. Ein animiertes GIF von zwei Megabyte entspricht einem kurzen Video von wenigen hundert Kilobyte – bei besserer Darstellung. Die Empfehlung lautet ausdrücklich, für Animationen Video statt GIF oder APNG zu verwenden.
Die Rückfallebene
WebP und AVIF werden von allen modernen Browsern unterstützt. Empfohlen wird trotzdem, sie mit JPEG oder PNG als Rückfallebene auszuliefern – das kostet nichts und deckt alte Umgebungen ab.
In WordPress erledigen das gängige Bildoptimierungs-Plugins: Sie erzeugen die modernen Varianten und liefern sie aus, wo sie unterstützt werden. Wer ohne Plugin arbeitet, löst es über das picture-Element mit mehreren Quellen.
Der Punkt, der mehr bringt als das Format
Die Auflösung. Ein Bild, das in 3.000 Pixel Breite hochgeladen und auf 600 Pixel angezeigt wird, verschwendet den größten Teil seiner Daten – unabhängig vom Format.
Dazu kommt die Gegenrichtung: Ein Bildschirm mit doppelter Pixeldichte braucht die vierfache Pixelzahl eines einfachen. Beides zusammen ergibt die Regel, die in der Praxis zählt:
- Mehrere Größen ausliefern, nicht eine. WordPress erzeugt sie automatisch und nutzt sie über
srcset– vorausgesetzt, das Theme gibt sie aus. - Die größte Variante am Bedarf orientieren, nicht an der Originaldatei. Für eine Inhaltsspalte von 800 Pixeln ist 1.600 die sinnvolle Obergrenze.
- Beim Hochladen verkleinern, nicht erst beim Ausliefern.
Das ist derselbe Gedanke wie bei mobiler Optimierung: Was auf einem kleinen Bildschirm ausgeliefert wird, muss nicht für den größten dimensioniert sein.
Wo die Umstellung sich lohnt
Nicht überall gleichmäßig. Die Reihenfolge nach Wirkung:
- Das größte Bild im sichtbaren Bereich. Es bestimmt meist den LCP und damit eine der Core Web Vitals.
- Logos und Icons, die als PNG ausgeliefert werden – schnell erledigt, wirkt auf jeder Seite.
- Animierte GIFs. Meist wenige, aber jedes einzelne ist ein großer Posten.
- Produkt- und Galeriebilder, wo viele Bilder zusammen laden.
- Alles andere, bei Gelegenheit.
Was danach noch zu tun ist – Dateinamen, Alternativtexte, Einbindung in die Sitemap –, steht in Bilder-SEO. Wie die ausgelieferten Dateien dann zwischengespeichert werden, in Caching verstehen; die Reihenfolge der Maßnahmen insgesamt in WordPress-Performance.
Und bevor ein Bild überhaupt hochgeladen wird, bleibt eine Frage, die das Format nicht beantwortet: Darf es verwendet werden? Dazu Bildrechte – und für maschinell erzeugte Bilder KI-Bilder.
Häufige Fragen
Für neue Bilder lohnt es sich. Einen bestehenden Bestand komplett umzuwandeln bringt vor allem dort etwas, wo große Bilder im sichtbaren Bereich liegen. Priorisiere nach Dateigröße und Position auf der Seite, nicht nach Vollständigkeit.
PNG kann sie, WebP und AVIF können sie auch – bei besserer Kompression. PNG bleibt sinnvoll, wenn maximale Treue ohne Verlust gebraucht wird; sonst ist es meist die größere Datei ohne Gegenwert.
Weil verlustbehaftetes WebP und AVIF Informationen verwerfen und dabei einzelne Farben abweichen können. Bei Produktfotos, wo die Farbe zählt, lohnt ein Vergleich nebeneinander – bei Blogbildern fällt es nicht auf.
Quellen
- web.dev: Choose the right image format (abgerufen am 14.10.2026)
- Google Search Central: Google Images best practices (abgerufen am 14.10.2026)
Lass uns dreißig Minuten über deine Sichtbarkeit sprechen
Kostenlos, unverbindlich, und mit einer ehrlichen Einschätzung - auch wenn die lautet, dass du mich gerade nicht brauchst.
Erstgespräch vereinbaren