Bildformat-Leitfaden: PNG, JPG, WebP, SVG — Wann welches verwenden

Das falsche Bildformat zu wählen verschwendet Bandbreite, verlangsamt Seitenladzeiten und verschlechtert die visuelle Qualität. Jedes Format hat spezifische Stärken — Fotografien sehen in einem Format am besten aus, Logos in einem anderen und Icons in noch einem anderen. Dieser Leitfaden hilft Ihnen, jedes Mal die richtige Wahl zu treffen.

Schnelle Entscheidungstabelle

Formate im Detail

JPEG (JPG)

Der Standard für Fotografien seit 1992. Verwendet verlustbehaftete Kompression basierend auf der diskreten Kosinustransformation (DCT).

Am besten für: Fotografien, Naturszenen, komplexe Bilder mit Verläufen. Vermeiden für: Text, Logos, Screenshots, Bilder mit scharfen Kanten.

Qualitäts-Richtwerte:

• Qualität 85: Visuell verlustfrei für die meisten Fotos (bester Standard)
• Qualität 75: Gute Balance für Web-Thumbnails
• Qualität 95: Nahezu verlustfrei für Druck oder Archivierung

Tipp: JPEG unterstützt keine Transparenz. Wenn Sie ein Foto mit transparentem Hintergrund benötigen, verwenden Sie WebP oder PNG.

PNG

Verlustfreie Kompression — jeder Pixel wird exakt erhalten. Unterstützt volle Alpha-Transparenz.

Am besten für: Screenshots, UI-Elemente, Logos auf farbigen Hintergründen, jedes Bild mit Text. Vermeiden für: Fotografien (Dateien werden 5-10x größer als JPEG).

PNG-8 vs PNG-24:

• PNG-8: 256 Farben, kleinere Dateien, geeignet für einfache Grafiken
• PNG-24: 16 Millionen Farben, größere Dateien, nötig für Fotografien oder Verläufe

WebP

Googles modernes Format, das sowohl verlustbehaftete als auch verlustfreie Kompression, Transparenz und Animation unterstützt.

Am besten für: Alles im Web — es ist das beste Allzweckformat. Vermeiden für: Druck (begrenzte Software-Unterstützung), E-Mail (einige Clients zeigen WebP nicht an).

Vorteile gegenüber JPEG: 25-35% kleiner bei gleichwertiger Qualität, unterstützt Transparenz. Vorteile gegenüber PNG: 26% kleiner für verlustfreie Bilder, unterstützt verlustbehaftete Kompression. Browser-Unterstützung: 97%+ weltweit.

Konvertieren und optimieren Sie Bilder mit unserem Bild-Optimierer.

SVG

Vektorformat basierend auf XML. Bilder werden durch mathematische Formen definiert, nicht durch Pixel.

Am besten für: Logos, Icons, Illustrationen, Diagramme, jede Grafik, die skaliert werden muss. Vermeiden für: Fotografien, komplexe Rasterbilder.

Einzigartige Vorteile:

• Unendlich skalierbar ohne Qualitätsverlust
• Winzige Dateigrößen für einfache Grafiken (oft unter 1 KB)
• Mit CSS stilisierbar (Farben ändern, animieren)
• Barrierefrei (Text in SVG ist durchsuchbar und screenreader-lesbar)
• In jedem Texteditor bearbeitbar

<!-- SVG-Icon: 200 Bytes vs PNG: 5.000 Bytes -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

Das neueste Format, basierend auf dem AV1-Video-Codec. Überlegene Kompression gegenüber WebP.

Am besten für: Hero-Bilder, Produktfotos, jedes hochprioritäre Bild, bei dem maximale Kompression wichtig ist. Überlegungen: 92% Browser-Unterstützung, langsamere Kodierung, begrenzte Unterstützung in Bearbeitungstools. Einsparungen: 50% kleiner als JPEG bei gleichwertiger Qualität.

GIF

Das älteste Web-Bildformat (1987). Begrenzt auf 256 Farben.

Am besten für: Einfache Animationen (aber animiertes WebP ist besser). Vermeiden für: Fast alles andere — WebP oder APNG sind überlegene Alternativen. Legacy-Nutzung: Immer noch weit verbreitet in Messaging-Apps und sozialen Medien für Reaktionen/Memes.

Größenvergleich (gleiches Bild)

Ein 1200×800 Foto, optimiert für Web:

Dieselbe Grafik (Logo, 500×200):

Moderne Best Practice: Picture-Element

Liefern Sie das optimale Format an jeden Browser:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschreibung" loading="lazy">
</picture>

Browser wählen das erste unterstützte Format. Jeder bekommt die bestmögliche Qualität bei der kleinsten Größe.

Optimierungs-Workflow

1. Mit der höchsten Quellqualität starten — nie von einem bereits komprimierten Bild optimieren
2. Das richtige Format wählen anhand der obigen Entscheidungstabelle
3. Auf Anzeigemaße skalieren — kein 4000px-Bild in einem 800px-Container ausliefern
4. Komprimieren — verwenden Sie unseren Bildkompressor für schnelle Optimierung
5. Responsive Größen ausliefern — verwenden Sie srcset für verschiedene Viewport-Breiten
6. Lazy Loading aktivieren — loading="lazy" für Bilder unterhalb des sichtbaren Bereichs

Mehr zur Optimierung finden Sie in unserem Leitfaden zur Bildoptimierung.

FAQ

Sollte ich alle meine Bilder in WebP konvertieren?

Für die Web-Auslieferung, ja — WebP ist das beste Allzweckformat mit 97%+ Browser-Unterstützung. Behalten Sie Originaldateien in ihrem nativen Format (JPEG, PNG) für Archivierung und Bearbeitung und konvertieren Sie für die Auslieferung zu WebP. Verwenden Sie das <picture>-Element, um JPEG-Fallback für die seltenen Browser bereitzustellen, die WebP nicht unterstützen.

Ist AVIF produktionsreif?

AVIF ist produktionsreif mit 92%+ Browser-Unterstützung. Die wichtigsten Überlegungen sind langsamere Kodierung (3-10x langsamer als WebP) und begrenzte Unterstützung in Bearbeitungstools. Für statische Websites, bei denen Bilder einmal beim Build kodiert werden, ist die Kodierungsgeschwindigkeit kein Problem. Bieten Sie immer WebP- oder JPEG-Fallback an.

Verwandte Ressourcen

• Bild-Optimierer — Bilder für das Web komprimieren
• Bild-Skalierung — Auf exakte Maße skalieren
• Bildoptimierung für das Web — Vollständiger Optimierungsleitfaden