Die Wahl des richtigen Bildformats gehört zu den einfachsten und wirkungsvollsten Optimierungen für jede Website. Doch mit JPG, PNG, WebP, AVIF, SVG und GIF stehen mehrere Optionen zur Verfügung – und keine davon ist universell die beste. Dieser Leitfaden zeigt, welches Format wann die richtige Wahl ist.
| Format | Komprimierung | Transparenz | Animation | Ideal für |
|---|---|---|---|---|
| JPEG / JPG | Verlustbehaftet | Nein | Nein | Fotografien |
| PNG | Verlustfrei | Ja (Alpha) | Nein (APNG: ja) | Grafiken, Logos, Screenshots |
| WebP | Beides | Ja (Alpha) | Ja | Fotos und Grafiken für Web |
| AVIF | Beides | Ja (Alpha) | Ja | Höchste Komprimierung |
| SVG | Textbasiert | Ja | Ja (CSS/SMIL) | Logos, Icons, Vektorgrafiken |
| GIF | Verlustfrei (256 Farben) | 1-Bit | Ja | Einfache Animationen |
JPEG ist seit Jahrzehnten das Format der Wahl für Fotografien. Die verlustbehaftete Komprimierung macht Fotos klein, ohne dass die meisten Menschen den Unterschied sehen. Bei einer Qualitätsstufe von 80–85 % ist kaum ein Unterschied zum Original erkennbar.
Verwenden Sie JPEG, wenn: Sie Fotos für das Web benötigen und WebP (noch) nicht verwenden können – etwa für E-Mail-Anhänge oder Systeme ohne WebP-Unterstützung.
Vermeiden Sie JPEG, wenn: Das Bild Transparenz benötigt, Text enthält oder mehrfach bearbeitet und gespeichert werden soll.
PNG speichert Bilder verlustfrei und unterstützt vollständige Transparenz. Es ist die richtige Wahl überall dort, wo Präzision wichtiger ist als kleine Dateigröße.
Verwenden Sie PNG, wenn: Das Bild Transparenz benötigt, Text oder scharfe Linien enthält (Logos, Icons, Screenshots) oder für die Weiterbearbeitung gespeichert werden soll.
Vermeiden Sie PNG, wenn: Es sich um Fotos handelt – PNG-Fotos sind unnötig groß.
WebP ist heute für die meisten Webanwendungen die beste Wahl. Es bietet:
Verwenden Sie WebP für: Produktbilder in Online-Shops, Blogbilder, Hintergründe, Galerien – kurz: fast alles auf einer modernen Website.
AVIF erreicht eine noch bessere Komprimierung als WebP – oft 40–55 % kleiner als JPEG bei gleicher Qualität. Die Browserunterstützung liegt bei etwa 90–93 %, steigt aber schnell.
Verwenden Sie AVIF, wenn: Maximale Komprimierung Priorität hat und ein WebP-Fallback implementiert ist.
SVG ist kein klassisches Bildformat im Sinne von Pixeln – es beschreibt Grafiken als mathematische Formen. Das Ergebnis: unbegrenzte Skalierbarkeit ohne Qualitätsverlust.
Verwenden Sie SVG für: Logos, Icons, Illustrationen mit flachen Farben, Diagramme, Karten. Niemals für Fotos.
GIF ist technisch veraltet – 256 Farben und schlechte Komprimierung machen es für statische Bilder ungeeignet. Für Animationen ist es durch WebP und AVIF überholt, bleibt aber durch maximale Kompatibilität relevant.
Verwenden Sie GIF, wenn: Animationen in Kontexten benötigt werden, die kein WebP unterstützen (z. B. ältere E-Mail-Clients).
Die modernste und zuverlässigste Strategie liefert je nach Browser das optimale Format:
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Bildbeschreibung" width="800" height="600">
</picture>
Browser, die AVIF unterstützen, erhalten die kleinste Datei. WebP-Browser erhalten die zweitbeste Option. Ältere Browser erhalten JPEG als universellen Fallback.
Die klare Empfehlung für 2024 und darüber hinaus: WebP als Standard für alle neuen Webprojekte, mit AVIF für zukunftsorientierte Projekte und einem JPEG/PNG-Fallback für maximale Kompatibilität. SVG bleibt unverzichtbar für Vektorgrafiken. GIF überlebt nur dort, wo keine Alternative möglich ist.
Wenn die Datei vertraulich ist, ist der sicherste Weg der, auf dem sie Ihren Rechner gar nicht erst verlässt. Bild optimieren läuft vollständig im Browser: Die Datei wird von Ihrer Festplatte gelesen, im Arbeitsspeicher verarbeitet und wieder zurückgeschrieben — an einen Server geht nichts.
Direkt im Browser erledigen — die Datei verlässt Ihr Gerät nicht: Bild optimieren