Bilder machen auf den meisten Websites den Löwenanteil der Datenmenge aus – oft mehr als die Hälfte dessen, was ein Besucher herunterlädt. Das falsche Format kann eine Seite dabei leicht drei- bis fünfmal schwerer machen als nötig, und das kostet Ladezeit, Google-Ranking und im Zweifel Kunden. Die gute Nachricht: Die Wahl des richtigen Formats folgt ein paar einfachen Regeln. Dieser Artikel stellt alle relevanten Formate vor, vergleicht sie ehrlich und endet mit klaren Empfehlungen – inklusive des Tricks, mit dem der Browser immer automatisch das beste Format und die passende Größe bekommt.
Bevor es um einzelne Formate geht, hilft eine Grundunterscheidung. Pixelbilder (JPG, PNG, GIF, WebP, AVIF) speichern ein Raster aus Bildpunkten – ideal für Fotos, aber beim Vergrößern wird's unscharf. Vektorgrafiken (SVG) speichern stattdessen geometrische Beschreibungen: „Kreis mit Radius 40, gefüllt in Türkis". Sie bleiben in jeder Größe gestochen scharf und sind bei einfachen Motiven winzig klein.
Daraus folgt die erste und wichtigste Regel: Logos, Icons und Illustrationen gehören ins SVG-Format, Fotos in ein Pixelformat. Wer sein Logo als PNG einbindet, verschenkt Schärfe auf hochauflösenden Displays und lädt unnötige Kilobytes.
SVG (Scalable Vector Graphics) ist ein Textformat: Die Grafik steht als XML-Code in der Datei und lässt sich sogar per CSS animieren oder umfärben. Perfekt für alles Gezeichnete – Logos, Icons, Diagramme, Illustrationen. Die Abbildungen in diesem Wissensbereich sind SVGs, deshalb schweben sie sanft und bleiben beim Zoomen scharf. Für Fotos ist SVG ungeeignet. Ein Hinweis für die Praxis: SVGs aus Design-Programmen enthalten oft massiven Ballast (Editor-Metadaten, eingebettete Schriften) – ein Optimierungslauf mit einem Werkzeug wie SVGO lohnt fast immer.
Seit über 30 Jahren das Arbeitspferd für Fotos. JPG komprimiert verlustbehaftet – Details gehen unwiederbringlich verloren, dafür werden die Dateien klein. Es kennt keine Transparenz und zeigt bei starker Kompression die typischen Klötzchen-Artefakte. Heute ist JPG vor allem eines: der Fallback, den wirklich jedes Gerät der Welt anzeigen kann – vom Uralt-Browser bis zum E-Mail-Programm.
PNG komprimiert verlustfrei: Was reinkommt, kommt exakt so wieder raus. Dazu beherrscht es echte Transparenz mit weichen Kanten. Der Preis: Bei Fotos werden PNG-Dateien riesig – gern das Zehnfache eines JPGs. Sein angestammtes Revier waren Screenshots, Grafiken mit Text und freigestellte Bilder. Ehrlicherweise ist PNG heute in fast allen Fällen von WebP und AVIF überholt, die Transparenz genauso können, aber deutlich kleiner sind. Bleiben als Einsatzgebiete: maximale Kompatibilität (etwa Bilder für Newsletter) und verlustfreie Archivierung.
GIF kann nur 256 Farben, komprimiert schlecht und ist selbst für seine Paradedisziplin – kurze Animationen – die schlechteste verfügbare Wahl: Ein animiertes GIF ist oft zehnmal größer als dasselbe Material als stummes MP4- oder WebM-Video. Dass „ein GIF verschicken" als Begriff überlebt hat, ändert nichts daran, dass das Format technisch seit Jahren keinen Platz mehr auf Websites hat.
Googles WebP komprimiert Fotos rund 25 bis 35 Prozent kleiner als JPG, beherrscht Transparenz (viel kleiner als PNG) und sogar Animationen (viel kleiner als GIF). Es wird seit Jahren von allen Browsern unterstützt und ist damit der sichere moderne Standard: Wer heute einfach „JPG durch WebP ersetzen" umsetzt, hat schon den größten Teil der Ersparnis eingesammelt.
AVIF basiert auf dem Videocodec AV1 und komprimiert nochmals deutlich besser als WebP – typisch 20 bis 40 Prozent kleiner bei gleicher Qualität, mit Transparenz und besserer Detailtreue bei starker Kompression. Konkretes Beispiel von dieser Website: Unser Titelbild wiegt als JPG 295 KB, als WebP 112 KB und als AVIF nur noch 53 KB – bei visuell identischem Ergebnis. Alle großen Browser unterstützen AVIF inzwischen standardmäßig. Einziger Haken: Das Encodieren dauert länger, und ganz alte Browser-Versionen brauchen einen Fallback – den das picture-Element elegant löst (dazu gleich mehr).
Der technisch spannende Nachfolgekandidat, der verlustfreie JPG-Umwandlung beherrscht. Praktisch spielt er aber noch keine Rolle: Nur Safari zeigt JPEG XL standardmäßig an, Chrome und Firefox halten es hinter experimentellen Schaltern. Beobachten, aber noch nicht einsetzen.
| Format | Am besten für | Transparenz | Animation | Kompression | Browser |
|---|---|---|---|---|---|
| SVG | Logos, Icons, Grafiken | ✓ | ✓ | winzig | alle |
| JPG | Fotos (Fallback) | ✗ | ✗ | Referenz | alle |
| PNG | Screenshots | ✓ | ✗ | groß bei Fotos | alle |
| GIF | – überholt | ✓ (nur 2 Stufen) | ✓ | sehr schlecht | alle |
| WebP | Fotos, Grafiken | ✓ | ✓ | −30 % vs. JPG | alle aktuellen |
| AVIF | Fotos, Hero-Bilder | ✓ | ✓ | −50 % vs. JPG | alle aktuellen |
Die verlinkten Einträge führen zu caniuse.com – dem Standard-Nachschlagewerk dafür, welcher Browser welche Web-Technik ab welcher Version unterstützt, immer tagesaktuell.
Für Bewegtbild gelten dieselben Prinzipien. MP4 mit dem H.264-Codec ist das JPG der Videowelt: läuft überall, solide Kompression – die sichere Wahl. WebM mit VP9 oder AV1 ist das AVIF-Pendant: deutlich kleinere Dateien, von allen aktuellen Browsern abspielbar. Das video-Element akzeptiert wie picture mehrere Quellen, der Browser nimmt die erste, die er kann – WebM zuerst, MP4 als Fallback. Zwei Praxisregeln dazu: Kurze Deko-Animationen als stummes, automatisch loopendes Video statt als GIF einbinden (muted autoplay loop playsinline). Und lange Videos gehören nicht auf den eigenen Webspace, sondern zu einem Streaming-Dienst, der sie in mehreren Qualitätsstufen ausliefert.
Das beste Format nützt wenig, wenn ein 2400 Pixel breites Bild an ein Smartphone mit 400 Pixel breitem Display geschickt wird. HTML löst das mit dem Attribut srcset: Man hinterlegt dasselbe Bild in mehreren Breiten, und der Browser wählt selbst die kleinste Fassung, die für das Gerät ausreicht – Bildschirmgröße und Pixeldichte eingerechnet.
Kombiniert mit dem picture-Element für die Formatwahl sieht das Ideal-Setup so aus: Der Browser bekommt AVIF, WebP und JPG jeweils in mehreren Größen angeboten und zieht sich genau eine Datei – das modernste Format in der kleinsten ausreichenden Größe. Ein Smartphone lädt dann vielleicht 15 KB statt 300 KB, ohne dass irgendjemand etwas davon merkt. So sieht die komplette Struktur aus:
<picture>
<source type="image/avif"
srcset="foto-800.avif 800w, foto-1600.avif 1600w"
sizes="(max-width: 700px) 100vw, 700px">
<source type="image/webp"
srcset="foto-800.webp 800w, foto-1600.webp 1600w"
sizes="(max-width: 700px) 100vw, 700px">
<img src="foto-1600.jpg"
srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
sizes="(max-width: 700px) 100vw, 700px"
width="1600" height="900"
alt="Aussagekräftige Beschreibung"
loading="lazy">
</picture>Von oben nach unten gelesen: Der Browser nimmt die erste source, deren Format er kennt (AVIF vor WebP, sonst das JPG aus dem img). Innerhalb der gewählten Quelle sucht er sich über srcset die kleinste ausreichende Breite aus, sizes verrät ihm dafür, wie breit das Bild im Layout erscheint. Genau deshalb gehören drei Dinge in jedes wichtige Bild-Tag: srcset mit zwei bis vier Breiten, das sizes-Attribut sowie width- und height-Angaben, damit das Layout beim Laden nicht springt.
Zwei Ergänzungen, die zusammen mit Format und Größe das Paket komplett machen: loading="lazy" für alle Bilder unterhalb des sichtbaren Bereichs (sie laden erst beim Scrollen) – und das Gegenteil, fetchpriority="high", für das eine große Bild ganz oben, das sofort da sein muss.
picture-Element – oder pragmatisch nur WebP, wenn die Pflege dreier Fassungen zu aufwendig ist.srcset, feste width/height, loading="lazy" unterhalb des Sichtbereichs.Wer ein CMS wie WordPress nutzt, bekommt einen Teil davon geschenkt: Aktuelle Versionen erzeugen automatisch mehrere Bildgrößen und liefern WebP oder AVIF aus – sofern das Theme sauber gebaut ist und niemand 6-MB-Originale direkt aus der Kamera in die Mediathek lädt. Als Faustregel fürs Hochladen: Bilder vorher auf maximal die doppelte Anzeigebreite verkleinern.
Am Ende zahlt all das auf dasselbe Konto ein: schnellere Seiten, bessere Core Web Vitals, zufriedenere Besucher – und ein Stück Google-Ranking, das viele Websites einfach liegen lassen. Du willst wissen, wie viel Ladezeit in deinen Bildern steckt? Melde dich – ich schaue mir deine Website an und sage dir, was sich lohnt.
Für Fotos ist AVIF aktuell das effizienteste Format mit breiter Browser-Unterstützung – typischerweise halb so groß wie JPG bei gleicher Qualität. Am robustesten fährt man mit dem picture-Element: AVIF zuerst, WebP als zweite Quelle, JPG als Fallback. Für Logos und Illustrationen ist SVG unschlagbar.
Nicht pauschal. Den größten Effekt haben die großen Bilder auf viel besuchten Seiten – allen voran das Titelbild der Startseite. Dort lohnt der Umbau auf AVIF/WebP sofort. Kleine Bilder tief im Archiv kann man beim nächsten Anfassen mitnehmen; ein kompletter Rückwirkend-Umbau lohnt selten.
AVIF komprimiert spürbar besser – je nach Motiv 20 bis 40 Prozent kleiner als WebP – und ist bei starker Kompression detailtreuer. WebP ist dafür schneller zu erzeugen und minimal breiter unterstützt. In der Praxis: AVIF anbieten, WebP als Fallback – oder nur WebP, wenn es unkompliziert bleiben soll.
Weil sonst jedes Gerät die volle Auflösung lädt. Mit srcset hinterlegt man dasselbe Bild in mehreren Breiten, und der Browser wählt automatisch die kleinste ausreichende – ein Smartphone lädt dann einen Bruchteil der Daten. Zusammen mit festen width/height-Angaben verhindert das außerdem, dass das Layout beim Laden springt.
Ein stummes, automatisch abspielendes Video: MP4 (H.264) oder besser WebM, eingebunden mit muted, autoplay, loop und playsinline. Das sieht identisch aus, ist aber meist um den Faktor fünf bis zehn kleiner als ein GIF.
Grafikdesigner & Programmierer. Seit über 25 Jahren in der Werbung zuhause – heute mit Fokus auf Websites, 3D, SEO und KI-Automation für Agenturen und Unternehmen.
Unverbindlich und auf Augenhöhe – ich sage dir ehrlich, was sinnvoll ist.
Termin vereinbaren → oder Kontaktdaten ansehen