JPG vs. PNG vs. WebP vs. SVG: Welches Bildformat sollten Sie verwenden?

Wählen Sie das falsche Bildformat, und entweder blähen Sie Ihre Seite mit riesigen Dateien auf oder Sie erhalten verschwommene, verpixelte Grafiken. Wählen Sie die richtige aus und Ihre Website wird schneller geladen und sieht besser aus – kostenlos. Hier ist die einfache Aufschlüsselung der vier Formate, die Sie tatsächlich verwenden werden, und genau, wann Sie zu jedem Format greifen müssen.

JPG (JPEG): Fotos

JPG verwendet eine „verlustbehaftete“ Komprimierung – dabei werden Details verworfen, die das Auge kaum wahrnimmt, um kleine Dateien zu erhalten. Damit eignet es sich perfekt für Fotos und komplexe Bilder mit vielen Farben und Verläufen. Der Nachteil: Transparenz wird nicht unterstützt und wiederholtes Bearbeiten/erneutes Speichern verschlechtert die Qualität. Vermeiden Sie es bei Text, Logos oder scharfen Kanten, da diese zu sichtbaren Artefakten verschwimmen.

PNG: Grafiken, Logos und Transparenz

PNG verwendet eine „verlustfreie“ Komprimierung, sodass jedes Pixel exakt bleibt und Transparenz unterstützt wird. Es ist die richtige Wahl für Logos, Symbole, Screenshots und alle Bilder mit scharfen Kanten oder Text. Der Nachteil ist die Dateigröße – ein PNG-Foto kann um ein Vielfaches größer sein als das JPG-Äquivalent, also verwenden Sie es nicht für Fotos.

WebP: der moderne Allrounder

WebP, entwickelt von Google, bietet sowohl verlustbehaftete als auch verlustfreie Komprimierung und Transparenz – im Wesentlichen das Beste von JPG und PNG in einem Format, bei kleinerer Größe. In der WebP-Dokumentation von Google werden Einsparungen von 25–35 % gegenüber vergleichbaren JPGs und PNGs gemeldet. Es wird von jedem modernen Browser unterstützt und sollte daher für die meisten Websites Ihre Standardeinstellung sein. Konvertieren Sie Ihre vorhandenen Bilder mit JPG in WebP oder PNG in WebP – und wenn Sie jemals einen Ersatz benötigen, macht WebP in JPG dies rückgängig.

SVG: Logos, Symbole und alles, was skalierbar ist

SVG ist grundlegend anders: Anstelle von Pixeln speichert es Vektoranweisungen (Linien, Kurven, Formen) als Code. Das bedeutet, dass es sich ohne Qualitätsverlust auf jede beliebige Größe skalieren lässt – vom Favicon bis zur Werbetafel – und die Dateien für einfache Grafiken winzig sind. Verwenden Sie es für Logos, Symbole und Illustrationen. Für Fotos ist es nicht geeignet. Entfernen Sie Überschwemmungen aus exportierten SVGs mit unserem SVG-Optimierer. Der MDN-Leitfaden zu Bilddateitypen ist die maßgebliche Referenz, wenn Sie tiefer gehen möchten.

Kurzanleitung zur Entscheidung

• Foto auf einer Webseite? WebP (oder JPG als Fallback).
• Logo oder Symbol? SVG, wenn Sie den Vektor haben; andernfalls PNG.
• Benötigt Transparenz? WebP, PNG oder SVG – niemals JPG.
• Drucken oder herunterladen, wo Kompatibilität wichtig ist? JPG oder PNG.

Vergessen Sie nicht, zu optimieren

Das Format ist nur die halbe Miete – die Größe ist genauso wichtig. Was auch immer Sie wählen, passen Sie die Größe mit dem Bild-Resizer auf die tatsächlich angezeigten Abmessungen an und komprimieren Sie es mit dem Bildkompressor. Den vollständigen Arbeitsablauf finden Sie in unserem Leitfaden zur Bildoptimierung.

Was ist mit AVIF, dem neuen Konkurrenten?

WebP hat einen neueren Konkurrenten: AVIF. Es komprimiert oft noch kleiner als WebP bei gleicher Qualität, was es für leistungskritische Websites attraktiv macht. Der Nachteil ist eine etwas geringere universelle Unterstützung und eine langsamere Kodierung, obwohl die Browserabdeckung jetzt stark ist. Ein gängiger moderner Ansatz besteht darin, AVIF mit einem WebP-Fallback und einem JPG/PNG als letztem Sicherheitsnetz bereitzustellen – der Browser wählt das beste Format aus, das er unterstützt. Für die meisten Websites bleibt WebP heute die pragmatische Standardeinstellung, wobei AVIF ein lohnenswerter nächster Schritt ist.

Verlustbehaftet vs. verlustfrei: der zentrale Kompromiss

Unter den Formatnamen steht eine Entscheidung: verlustbehaftet oder verlustfrei. Verlustbehaftet (JPG und WebP/AVIF im verlustbehafteten Modus) wirft Daten weg, die das Auge kaum wahrnimmt, und erzeugt so winzige Dateien – perfekt für Fotos, falsch für scharfen Text. Lossless (PNG, SVG und WebP im verlustfreien Modus) sorgt dafür, dass jedes Pixel exakt bleibt, was für Logos, Screenshots und Grafiken mit scharfen Kanten unerlässlich ist. Die Anpassung dieser Auswahl an Ihren Bildtyp ist wichtiger als die spezifische Formatbezeichnung.

Speichern Sie verlustbehaftete Bilder nicht wiederholt.

Eine praktische Warnung: Jedes Mal, wenn Sie ein JPG (oder ein anderes verlustbehaftetes Format) bearbeiten und erneut speichern, verliert es etwas mehr an Qualität – „Generationsverlust“, wie beim Fotokopieren einer Fotokopie. Behalten Sie immer ein Original, bearbeiten Sie es und exportieren Sie eine neue Kopie, anstatt wiederholt dasselbe JPG zu speichern. Arbeiten Sie bei Bildern, die Sie häufig bearbeiten, in einem verlustfreien Format und exportieren Sie sie erst als letzten Schritt in das verlustbehaftete Format. Dann optimieren Sie mit unserem Bildkompressor.

Fazit

WebP für Fotos, SVG für Logos und Symbole, PNG, wenn Sie verlustfreie Transparenz benötigen, JPG für maximale Kompatibilität. Passen Sie das Format an den Inhalt an und Sie erhalten schärfere Bilder und schnellere Seiten, ohne etwas auszugeben.