Bild-Grundlagen
JPG, PNG oder WebP? So wählst du das richtige Bildformat
Kurz gesagt: Nimm JPG (oder WebP) für Fotos, PNG (oder verlustfreies WebP) für Screenshots, Text und alles mit transparentem Hintergrund und SVG für Logos und Icons, die aus Formen gezeichnet sind. Ist ein Formular, eine E-Mail oder ein altes Programm wählerisch, sind JPG für Fotos und PNG für Grafiken die sicherste Wahl. Brauchst du ein anderes Format? Wandle es mit den verlinkten Refentra-Werkzeugen im Browser um. Eine Umwandlung bringt nie Details zurück, die schon verloren sind.
Dateien werden lokal verarbeitet.
Auf dieser Seite
Zwei Fragen entscheiden fast alles
1. Foto oder Grafik? Fotos bestehen aus weichen Farbübergängen, das Format darf also winzige Details weglassen, die du nicht bemerkst (verlustbehaftete Kompression: JPG, WebP mit Verlust). Screenshots, Diagramme, Logos und Text haben harte Kanten; verlustbehaftete Kompression hinterlässt dort Unschärfe und Farbsäume, deshalb brauchen sie verlustfreie Formate (PNG, verlustfreies WebP).
2. Braucht es Transparenz oder Animation? JPG kann weder transparente Pixel speichern noch animieren. PNG und WebP können Transparenz speichern; WebP und AVIF können auch animieren. GIF ist das älteste Animationsformat und das am wenigsten effiziente.
Welches Format für welche Aufgabe
- Foto für Website oder zum Teilen
- WebP oder JPG (AVIF, wo unterstützt). WebP mit Verlust ist bei ähnlicher Qualität im Schnitt 25–35 % kleiner als JPEG.
- Screenshot, Text, Diagramm
- PNG. Verlustfreies WebP ist im Schnitt etwa 26 % kleiner als PNG.
- Braucht transparenten Hintergrund
- PNG oder WebP. JPG hat keine Transparenz.
- Logo oder Icon aus Linien und Formen
- SVG. Es skaliert ohne Unschärfe auf jede Größe; für Fotos ist es nicht gedacht.
- Kurze Animation
- Animiertes WebP oder AVIF. GIF nur, wenn nichts anderes angenommen wird.
- Formulare, E-Mail, ältere Programme
- JPG für Fotos, PNG für Grafiken. Prüfe zuerst die zugelassenen Formate.
Quelle: MDN, Image file type and format guide (englisch), geprüft am 5. Oktober 2026. Die Ersparnisse sind Durchschnittswerte von dieser Seite; deine Dateien weichen ab. Refentra steht in keiner Verbindung zu MDN.
Fehler, die Qualität oder Größe kosten
- JPG in PNG umwandeln, um die Qualität zu „verbessern“. Das Bild bleibt genau so weich wie vorher, aber die Datei wird deutlich größer.
- Einen Screenshot als JPG speichern. Text bekommt unscharfe Kanten und Farbsäume. Nimm PNG.
- PNG für Fotos verwenden. Die Datei ist oft mehrfach größer als ein JPG, ohne sichtbaren Gewinn.
- Dasselbe JPG immer wieder neu speichern. Jedes Speichern verliert etwas mehr. Behalte das Original und exportiere einmal eine Kopie.
- WebP senden, wo nur JPG oder PNG angenommen wird. Wandle es vorher um, siehe unten.
Im Browser umwandeln
- JPG in PNG und PNG in JPG (bei transparenten Bereichen bestätigst du eine Hintergrundfarbe).
- WebP in JPG und WebP in PNG, wenn eine Seite oder ein Programm WebP ablehnt.
- Bild in WebP und Bild in AVIF für kleinere Website-Dateien.
Für deine eigene Website
MDN empfiehlt, für Rasterbilder WebP oder AVIF zu bevorzugen und für Browser, die sie nicht darstellen können, einen JPEG- oder PNG-Ersatz anzubieten. Das Element picture erledigt das:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" width="1200" height="800" alt="…" />
</picture>Die Attribute width und height verhindern, dass das Layout beim Laden springt. Siehe auch PageSpeed-Bildwarnungen beheben.
Quellen und Methode
Formateigenschaften und Empfehlungen stammen von der verlinkten MDN-Seite, geprüft am 5. Oktober 2026. Werkzeugnamen und Grenzen wurden an den aktuellen Refentra-Werkzeugen geprüft. Dieser Ratgeber wurde mit KI-Unterstützung erstellt und redaktionell bearbeitet.