Bildformate erklärt: PNG, JPG, GIF, WebP, SVG

Das richtige Bildformat zu wählen ist einer der einfachsten Wege, eine Seite schneller und schärfer zu machen. Wähle falsch, und du bekommst ein verschwommenes Logo oder ein Foto, das fünfmal so viel wiegt wie nötig. Hier steht, worin jedes gängige Format gut ist, damit du das Format zum Bild passen lassen kannst.

Die zwei Familien

Zuerst eine Unterscheidung, die alles andere erklärt. Raster-Formate (PNG, JPG, GIF, WebP) speichern ein Raster aus Pixeln, verschwimmen oder verpixeln also beim Hochskalieren. Vektor-Formate (SVG) speichern Formen als Mathematik, bleiben also in jeder Größe rasiermesserscharf. Fotos sind immer Raster; Logos und Icons sind als Vektor am besten.

Die Formate

JPG / JPEG

Verlustbehaftete Kompression, gebaut für Fotografien. Hervorragende Größe für fotografische Inhalte, überall unterstützt, aber keine Transparenz und sichtbare Artefakte bei Überkompression. Der Standard für Fotos, wenn WebP keine Option ist.

PNG

Verlustfrei, mit Transparenz. Perfekt für Logos, Icons, Screenshots und alles mit scharfen Kanten, Text oder flacher Farbe. Weil es verlustfrei ist, werden als PNG gespeicherte Fotos groß.

GIF

Ein altes, auf 256 Farben begrenztes Format, heute fast ausschließlich für einfache Animationen genutzt. Für statische Bilder wird es von PNG übertroffen; für Animation sind moderne Formate (animiertes WebP oder Video) kleiner und höherwertig.

WebP

Ein modernes Format, das alles kann: verlustbehaftet oder verlustfrei, mit Transparenz und Animation. Es erzeugt bei gleicher visueller Qualität typischerweise 25–35 % kleinere Dateien als JPG oder PNG, und jeder aktuelle Browser unterstützt es. Für die meisten Webbilder heute ist WebP der beste Standard.

SVG

Vektorgrafik, als XML definiert. Ideal für Logos, Icons und Illustrationen — unendlich skalierbar, winzig bei einfachen Formen und per CSS gestaltbar. Für Fotografien ungeeignet.

Schneller Entscheidungsleitfaden

• Fotografie → WebP (oder JPG für maximale Kompatibilität)
• Logo oder Icon → SVG (oder PNG, wenn du eine Raster-Kopie brauchst)
• Screenshot oder Grafik mit Text → PNG (oder WebP)
• Braucht Transparenz → PNG, WebP oder SVG
• Einfache Animation → animiertes WebP

Sobald du ein Format gewählt hast, behandelt unser Bildkompressions-Ratgeber das Verkleinern. Konvertiere zwischen Formaten mit dem SVG-Konverter und dem Bild-Resizer, und schrumpfe Dateien mit dem Bildkompressor — alles in deinem Browser.