Beste Bildformate für die Web-Performance 2026 | Bulk Image Compressor

Published March 17, 2026

Bilder sind dein größtes Performance-Problem

Auf den meisten Websites machen Bilder 40–60 % des gesamten Seitengewichts aus. Wenn deine Seite langsam lädt, sind Bilder wahrscheinlich der Hauptgrund. Ein einziges unoptimiertes Hero-Bild kann größer sein als all dein HTML, CSS und JavaScript zusammen.

Das ist wichtig für Benutzer (niemand wartet 5 Sekunden auf das Laden einer Seite) und für die Suchmaschinenplatzierung. Googles Core Web Vitals messen direkt, wie schnell deine Inhalte erscheinen, und Bilder sind fast immer der Engpass.

Core Web Vitals und Bilder

Drei Metriken bilden die Core Web Vitals, und Bilder beeinflussen alle drei:

Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte sichtbare Element geladen ist. Auf den meisten Seiten ist das ein Bild. Google betrachtet alles unter 2,5 Sekunden als “gut”. Ein 3 MB Hero-Bild auf einer langsamen Verbindung überschreitet diesen Wert deutlich.

Cumulative Layout Shift (CLS) misst, wie stark die Seite während des Ladens springt. Bilder ohne angegebene Breiten- und Höhenangaben verursachen Layout-Verschiebungen, weil der Browser nicht weiß, wie viel Platz reserviert werden muss, bis das Bild heruntergeladen ist.

Interaction to Next Paint (INP) misst die Reaktionsfähigkeit. Große Bilder, die den Hauptthread während der Decodierung blockieren, können diesen Score beeinträchtigen, besonders auf mobilen Geräten.

Die Lösung für alle drei beginnt mit der Wahl des richtigen Formats und der richtigen Komprimierungsstufe.

Formatvergleich für 2026

JPEG

Funktioniert immer noch. Wird überall noch unterstützt. Aber speziell für die Web-Performance gibt es heute bessere Optionen. JPEG-Dateien sind typischerweise 25–35 % größer als WebP bei gleicher Qualität und unterstützen keine Transparenz.

Verwende JPEG, wenn du Kompatibilität außerhalb des Webs benötigst: E-Mail-Anhänge, Dokumente, Social-Media-Uploads, die WebP nicht akzeptieren.

PNG

Gleiche Geschichte. PNG ist perfekt für Screenshots, Logos und Grafiken, aber die Dateigrößen sind größer als bei modernen Alternativen. Für verlustfreie Web-Bilder produziert WebP lossless kleinere Dateien.

Verwende PNG, wenn du Dateien teilen musst, die in Bildbearbeitungsprogrammen geöffnet werden, oder wenn du garantierte Kompatibilität in Nicht-Browser-Kontexten benötigst.

WebP

WebP ist im Jahr 2026 zum Standard-Bildformat für das Web geworden. Die Browserunterstützung ist universell in Chrome, Firefox, Safari und Edge. CDNs und Bilddienste liefern WebP automatisch aus. Die meisten CMS-Plattformen verarbeiten WebP jetzt nativ.

Die Zahlen sprechen für sich: 25–35 % kleiner als JPEG bei Fotos, 25 % kleiner als PNG bei Grafiken, bei gleicher visueller Qualität. Es unterstützt verlustbehaftete, verlustfreie, Transparenz und Animation.

Wenn du nur ein Format für deine Website auswählen möchtest, ist WebP heute die naheliegende Wahl. Für einen tieferen Vergleich mit JPEG und PNG sieh dir unseren JPEG-vs-PNG-vs-WebP-Vergleich an.

AVIF: Der nächste Schritt

AVIF basiert auf dem AV1-Videocodec und treibt die Komprimierungseffizienz noch weiter. AVIF-Dateien sind typischerweise 20–30 % kleiner als WebP, was sie etwa 50 % kleiner als JPEG macht.

Die Browserunterstützung hat sich deutlich verbessert. Chrome, Firefox und Safari unterstützen alle AVIF. Edge unterstützt es ebenfalls. Der Hauptnachteil ist die Encodierungsgeschwindigkeit: Das Erstellen von AVIF-Dateien dauert erheblich länger als WebP oder JPEG. Für eine Seite mit Tausenden von Bildern summiert sich die Encodierungszeit.

AVIF lohnt sich, wenn dein Build-Prozess die Encodierungszeit verkraften kann. Für die meisten Seiten ist die Auslieferung von AVIF mit einem WebP-Fallback die ideale Einrichtung.

Responsive Bilder mit srcset

Das richtige Format zu wählen, ist nur die Hälfte der Gleichung. Du musst auch die richtige Größe ausliefern.

Ein Besucher auf einem Telefon mit einem 390px breiten Bildschirm braucht kein 1920px Bild. Das srcset-Attribut ermöglicht es dir, mehrere Größen bereitzustellen und den Browser die beste auswählen zu lassen:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Produktfoto"
  width="1200"
  height="800"
  loading="lazy"
>

Dies teilt dem Browser mit: Auf kleinen Bildschirmen verwende die 400px Version. Auf mittleren Bildschirmen verwende 800px. Auf großen Bildschirmen verwende 1200px. Die Bandbreiteneinsparungen auf mobilen Geräten sind erheblich.

Beachte auch das Attribut loading="lazy". Dies teilt dem Browser mit, das Bild nur zu laden, wenn es in den sichtbaren Bereich scrollt. Verwende Lazy Loading nicht für dein LCP-Bild (das erste große Bild, das der Benutzer sieht), aber verwende es für alles unter dem Falz.

Formatempfehlungen nach Inhaltstyp

Hero-Bilder und Banner: AVIF mit WebP-Fallback. Dies sind deine größten Bilder und profitieren am meisten von besserer Komprimierung. Liefere mit maximal 1920px Breite aus, mit kleineren srcset-Varianten für Mobilgeräte.

Produktfotos: WebP lossy bei Qualität 80. Für E-Commerce zeigst du vielleicht Hunderte von Produktbildern pro Kategorieseite. Selbst eine 10%ige Größenreduktion pro Bild summiert sich schnell.

Blogbeitragsbilder: WebP lossy bei Qualität 75–82. Blogbilder werden normalerweise 800–1200px breit angezeigt, müssen also nicht riesig sein. Vor dem Komprimieren skalieren.

Icons und Logos: SVG wo möglich. Für Rasterlogos WebP lossless oder PNG. Diese Dateien sind so oder so klein, daher spielt die Formatwahl hier eine geringere Rolle.

Screenshots und Diagramme: WebP lossless oder PNG. Beide bewahren Text und scharfe Kanten perfekt. WebP ergibt etwa 25 % kleinere Dateien.

Benutzer hochgeladene Inhalte: Verarbeite alles beim Hochladen zu WebP. Verwende Bulk Image Compressor zum Batch-Konvertieren, wenn du bestehende Bildbibliotheken migrierst.

Schnelle Erfolge für die Seitengeschwindigkeit

Wenn du die Bildperformance deiner Website heute verbessern möchtest, sind hier die Änderungen mit der größten Wirkung:

Wechsle zu WebP für alle Web-Bilder. Das allein kann die Bilddatenmenge um 25–35 % reduzieren.
Skaliere Bilder auf die Maße, in denen sie tatsächlich angezeigt werden. Liefere kein 4000px Foto in einem 600px Container aus.
Füge width- und height-Attribute zu jedem img-Tag hinzu. Dies verhindert Layout-Verschiebungen.
Lazy Lade Bilder unter dem Falz. Nur deine ersten sichtbaren Bilder sollten sofort geladen werden.
Lade dein LCP-Bild vor, wenn es ein statisches Hero ist. Verwende <link rel="preload" as="image" href="hero.webp"> im Kopf deines Dokuments.
Verwende ein CDN, das Bilder von Standorten in der Nähe deiner Besucher ausliefert.

Wie sieht die Zukunft aus?

JPEG XL war ein weiteres vielversprechendes Format, aber die Einführung im Browser kam ins Stocken. Chrome hat seine experimentelle Unterstützung entfernt, und ohne Chrome ist eine breite Einführung unwahrscheinlich. AVIF ist die praktikablere Wahl für die Zukunft.

Der Trend ist klar: Neuere Formate komprimieren besser, und die Browserunterstützung holt im Laufe der Zeit auf. WebP ist derzeit der sichere Standard. AVIF lohnt sich, wenn deine Werkzeuge es unterstützen. In jedem Fall sorgen die Formatwahl in Kombination mit der richtigen Größenanpassung und Lazy Loading dafür, dass deine Bilder kein Performance-Engpass sind.

Weitere Hintergrundinformationen zur Funktionsweise der Bildkomprimierung auf technischer Ebene findest du in unserem Leitfaden warum Website-Bilder komprimiert werden müssen.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor