Jedes Bild auf einer Website ist ein Kompromiss zwischen Dateigröße, Qualität und Funktionen. PNG, JPG und WebP decken fast alles ab, sind aber nicht austauschbar. Dieser Leitfaden erklärt, worin jedes Format stark ist und wie du wählst, ohne zu raten.
Die kurze Antwort
- JPG für Fotos und komplexe Bilder, bei denen eine kleine Datei wichtiger ist als perfekte Pixel.
- PNG für Screenshots, Diagramme, Logos und alles, was Transparenz oder verlustfreie Details braucht.
- WebP wenn du die kleinste Datei bei ähnlicher Qualität willst, inklusive Transparenz.
Schnellvergleich
| Format | Kompression | Transparenz | Am besten für |
|---|---|---|---|
| PNG | Verlustfrei | Ja | Screenshots, Grafiken, Logos |
| JPG | Verlustbehaftet | Nein | Fotos, Teilen, E-Mail |
| WebP | Verlustbehaftet oder -frei | Ja | Moderne Websites, kleinere Dateien |
PNG: scharfe Pixel, größere Dateien
PNG ist verlustfrei. Jedes Pixel bleibt exakt erhalten, was es zur ersten Wahl für Screenshots, UI-Mockups, Diagramme und Logos mit harten Kanten macht. PNG unterstützt außerdem einen Alphakanal, transparente Hintergründe bleiben also transparent.
Der Preis ist die Größe. Ein Foto als PNG ist schnell fünf- bis zehnmal größer als dasselbe Foto als JPG, weil Fotos viele feine Farbabstufungen enthalten, die verlustfreie Kompression nicht verwerfen kann. Deshalb ist PNG ein schlechter Standard für Fotogalerien.
Nutze PNG, wenn:
- das Bild Text, dünne Linien oder scharfe Kanten hat;
- du einen transparenten Hintergrund brauchst;
- du die Datei später weiterbearbeitest und wiederholte verlustbehaftete Kompression vermeiden willst.
JPG: kleine Fotos, keine Transparenz
JPG nutzt verlustbehaftete Kompression. Es verwirft Details, die das Auge kaum bemerkt, und ist damit für Fotos sehr effektiv. Ein hochwertiges JPG wirkt oft identisch zum Original und ist deutlich kleiner.
Die Kompromisse sind real: JPG hat keinen Alphakanal, und jedes Speichern kostet ein wenig mehr Detail. Ein JPG immer wieder zu bearbeiten und neu zu speichern ist keine gute Idee. Text und scharfe Kanten bekommen sichtbare Artefakte, besonders bei niedriger Qualität.
Nutze JPG, wenn:
- das Bild ein Foto ist;
- die Dateigröße wichtiger ist als pixelgenaue Wiedergabe;
- das Bild keine Transparenz braucht.
Eine Qualitätsstufe um 80–90 ist meist der beste Punkt. Unter 70 werden Artefakte auf Gesichtern, Himmeln und Verläufen schnell sichtbar.
WebP: der moderne Standard
WebP unterstützt verlustbehaftete und verlustfreie Kompression, dazu Transparenz. Bei ähnlicher visueller Qualität ist es oft 25–35 % kleiner als JPG und kann PNG für Grafiken mit Alphakanal ersetzen.
Browser-Support ist längst kein Problem mehr: Aktuelle Versionen von Chrome, Firefox, Safari und Edge zeigen WebP an. Nur wenn du sehr alte Browser unterstützen musst, brauchst du einen JPG- oder PNG-Fallback – die meisten Seiten nicht mehr.
Nutze WebP, wenn:
- du die kleinste Datei fürs Web willst;
- das Bild Transparenz braucht;
- moderne Browser dein Ziel sind.
Wie du ohne Nachdenken wählst
- Ist es ein Foto? Starte mit JPG oder WebP.
- Braucht es Transparenz? Nimm PNG oder WebP.
- Ist es ein Screenshot oder Logo? PNG oder verlustfreies WebP.
- Zählt Bandbreite? WebP zuerst, dann JPG.
- Bearbeitest du es mehrfach? Behalte ein PNG als Master und exportiere eine komprimierte Kopie.
Im Browser kannst du mit dem Bildformat-Konverter zwischen den drei Formaten wechseln. Er behält die Originalabmessungen und lässt dich die Qualität für JPG und WebP einstellen.
Häufige Fehler
- Screenshots als JPG speichern. Textkanten werden unscharf, und die Datei ist nicht einmal viel kleiner. Nimm PNG oder WebP.
- Fotos als PNG speichern. Die Datei ist viel größer ohne sichtbaren Vorteil. Nimm JPG oder WebP.
- Ein 4000-px-Bild mit 400 px Breite anzeigen. Erst skalieren, dann komprimieren; der Browser soll keine Pixel laden, die er nie darstellt.
- Ein JPG mehrfach neu speichern. Jedes Speichern summiert Kompressionsartefakte. Behalte das Original und exportiere einmal.
- Transparenz vergessen. JPG füllt transparente Bereiche mit Weiß, was ein Logo auf farbigem Hintergrund ruinieren kann.
Wenn du ein großes Foto vor dem Upload verkleinern willst, kann der Bild-Kompressor es lokal skalieren und komprimieren. Und für ein Website-Icon erzeugt der Favicon-Generator aus einem Bild alle Größen.
Eine einfache Faustregel
Nutze WebP fürs Web, wenn du kannst, JPG für Fotos und PNG für Screenshots, Grafiken und Transparenz. Konvertiere bewusst, skaliere vor dem Komprimieren und behalte ein verlustfreies Master für alles, was du noch einmal bearbeiten willst.