PNG vs WebP vs AVIF｜Wie man das Bildformat auswählt und konvertiert
Eine der größten Faktoren, die die Anzeigegeschwindigkeit einer Website beeinflusst, ist die Wahl des Bildformats. Im Jahr 2026 sind die Hauptoptionen <strong>PNG / JPEG / WebP / AVIF</strong>, insgesamt 4 Formate. Dieser Artikel ordnet die Merkmale, Verwendungen und Browser-Kompatibilitätsstatus der einzelnen Formate und erklärt, wie man das ideale Format auswählt.
Formatvergleichstabelle
| Format | Kompressionsmethode | Transparenz | Animation | Bildqualität | Dateigröße | Browserunterstützung |
|---|---|---|---|---|---|---|
| PNG | Reversibel (verlustfrei) | ✅ | APNG | Höchste (keine Degradation) | Groß | Alle Browser |
| JPEG | Verlustbehaftet (Lossy) | ❌ | ❌ | Qualitätsanpassung verfügbar | Klein bis mittel | Alle Browser |
| WebP | Reversibel / Irreversibel | ✅ | ✅ | Besser als JPEG | 25-35% kleiner als JPEG | 95%+ |
| AVIF | Verlustbehaftet / Verlustfrei | ✅ | ✅ | Besser als WebP | 20% kleiner als WebP | 92%+ |
Welches Format sollte man wählen
Fälle zur Auswahl von PNG
- <strong>Logo, Icon, Screenshot</strong> und andere Fälle, in denen Qualitätsverlust nicht akzeptabel ist
- Bilder mit Text (schwer lesbar, wenn durch Kompression unscharfgestellt)
- Wenn Transparenz erforderlich ist und IE11-Kompatibilität erforderlich ist (fast unnötig)
Fälle zur Auswahl von JPEG
- Wenn <strong>maximale Kompatibilität</strong> bei Bildern mit vielen Fotos und Gradienten erforderlich ist
- Bei Lieferung als E-Mail-Anlage oder für ältere Geräte
Fälle für die Wahl von WebP (Empfohlen)
- <strong>Die meisten Bilder von Websites</strong> — 25〜35% kleiner als JPEG
- Transparenz + Kompression gleichzeitig (PNG-Alternative)
- Animation (GIF-Alternative — viel kleiner)
- Browserunterstützung 95%+, also praktisch keine Probleme
Fälle für die Wahl von AVIF (Spitzentechnologie)
- <strong>Minimale Dateigröße</strong> angestrebt — 20% kleiner als WebP
- Wenn Sie hochwertige Fotos so leicht wie möglich halten möchten
- Browserunterstützung 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
Implementierungsmuster: Verteilung mit <code>picture</code>-Element
Die solideste Methode ist die Angabe mehrerer Formate mit dem Element <code><picture></code>. Der Browser wählt die erste unterstützte Quelle aus.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>Mit dieser Methode laden AVIF-kompatible Browser AVIF, Browser die nur WebP unterstützen laden WebP, und Browser die keines der beiden unterstützen laden JPEG.
Mit Tool konvertieren
<a href="/ja/tools/image-convert/">DevLab-Tool zur Bildformat-Konvertierung</a> ermöglicht die Konvertierung von PNG ⇄ WebP ⇄ JPEG ⇄ AVIF direkt im Browser. Sie können während der Konvertierung das Gleichgewicht zwischen Dateigröße und Bildqualität mit dem Qualitätsschieber überprüfen. Kein Server-Upload erforderlich, Datenschutz ist gewährleistet.
Verwandt: <a href="/ja/tools/exif/">EXIF-Viewer</a> zum Überprüfen von Fotometadaten und Entfernen von Standortinformationen, <a href="/ja/tools/image-base64/">Bild → Base64 Konvertierung</a> zum Generieren von Inline-Data-URLs.
Zusammenfassung
- Im Zweifelsfall <strong>WebP</strong> — beste Balance
- Wenn Sie es noch kleiner machen möchten, <strong>AVIF</strong> (mit Fallback in picture)
- Falls verlustfrei, verwenden Sie <strong>PNG</strong>
- Wenn maximale Kompatibilität erforderlich ist, verwenden Sie <strong>JPEG</strong>