JPG in AVIF umwandeln — Hero-Fotos auf minimaler Größe

Wie viel Qualität verliere ich bei Quality 85?

Bei Quality 85 ist der Unterschied auch auf großformatigen Displays selbst für geübte Augen praktisch nicht erkennbar. AVIF nutzt den AV1-Video-Codec, der pro Bildblock mehr Prädiktions-Pfade evaluiert als ältere Codecs wie JPEG. Praktische Folge: AVIF erzeugt weniger sichtbare Artefakte bei gleicher Bitrate.

Wo AVIF gegenüber JPG besonders gewinnt:

• Glatte Farbverläufe: Himmel, Hauttöne, Bokeh-Hintergründe — JPG zeigt hier oft Banding (8x8-Block-Sprünge), AVIF erzeugt weiche Übergänge.
• Hochkontrast-Kanten: Schrift in Fotos, scharfe Schatten, architektonische Details — AVIF behält Schärfe ohne Ringing-Artefakte.
• Niedrige Bitraten unter Quality 60: wo JPG sichtbar zerfällt, hält AVIF noch akzeptable Qualität.

Für höchste Anforderungen (Photography Portfolios, Print-Vorbereitung) gehst du auf 90 oder 95 — die zusätzlichen Bytes sind in dieser Auflösungsklasse vernachlässigbar.

Wie liefere ich AVIF mit Browser-Fallback aus?

AVIF erreicht 95 Prozent globale Browser-Reichweite — die verbleibenden 5 Prozent (ältere Android-Geräte, Safari iOS unter 16.4) brauchen einen Fallback. Das <picture>-Element löst das elegant:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero-Beschreibung"
       width="1920" height="1080" />
</picture>

Was passiert: der Browser wählt die erste Source, deren type er unterstützt. Moderne bekommen AVIF (~600 KB), Mittelalter WebP (~900 KB), Legacy JPG (~1.4 MB). Der width/height-Hint am <img> reserviert den Platz vor dem Laden — verhindert Layout-Sprünge beim Largest Contentful Paint.

Für Responsive Images kombinierst du das mit srcset:

<picture>
  <source type="image/avif"
          srcset="hero-800.avif 800w, hero-1600.avif 1600w" />
  <source type="image/webp"
          srcset="hero-800.webp 800w, hero-1600.webp 1600w" />
  <img src="hero-1200.jpg" alt="Hero"
       sizes="(max-width: 800px) 100vw, 1200px" />
</picture>

So bekommt jedes Gerät die optimale Größen-/Format-Kombination — Hauptsache deine Build-Pipeline generiert die Varianten konsistent.

Welche Use-Cases sind ideal?

AVIF aus JPG lohnt sich überall dort, wo die letzten 20 bis 30 Prozent Bandbreitenersparnis gegenüber WebP zählen:

• Photography Portfolios: Hero-Bilder im Vollbild, oft 1920px breit oder mehr. JPG-Original 1.5 MB, WebP 1.0 MB, AVIF 700 KB — bei sichtbar identischer Qualität.
• E-Commerce Hero Shots: das große Header-Foto auf Produktseiten ist Conversion-kritisch. Schnellere Ladezeit = höhere Konversionsrate.
• Blog-Header in mobile-first-Märkten: wo 4G die Norm ist und 5G die Ausnahme bleibt, machen 200 ms LCP-Differenz spürbar etwas aus.
• Picture-Element-Setup: wenn das CMS oder der Build-Step mehrere Quellen ausliefert, ist AVIF die natürliche Erste-Wahl-Source.

Weniger sinnvoll bei: Bestandsbild-Massenkonvertierung ohne Picture- Element-Auslieferung (dann lieber JPG zu WebP, weil breitere Browser-Reichweite); oder bei kleinen Thumbnails unter 50 KB — der absolute Gewinn ist dort minimal.

Wie schnell encodiert AVIF im Browser?

AVIF-Encoding ist langsamer als WebP-Encoding. Das ist intrinsisch — der AV1-Codec evaluiert mehr Block-Partitionen, mehr Prädiktions-Modi und mehr Quantisierungs-Schritte pro Bildblock. Was du in diesem Tool merkst:

• Modernes Laptop, 4 MB Hero-Foto: 2 bis 5 Sekunden.
• Mid-Range-Smartphone, gleiche Datei: 5 bis 15 Sekunden.
• Älteres Android-Gerät: 15 bis 30 Sekunden — der Fortschrittsbalken bleibt aktiv.

Wichtig zu wissen: Der Encode-Speed ist eine Server-Pipeline-Sorge, nicht deine. Bei lokal-im-Browser-Tools wie diesem ist das deine Wartezeit, nicht die deiner Besucher. Letztere bekommen am Ende eine fertige AVIF-Datei, die genauso schnell decodiert wie eine JPG.

Datenschutz — 100 % im Browser

Die Umwandlung läuft vollständig in deinem Browser. Deine JPG-Dateien werden zu keinem Zeitpunkt an einen Server gesendet, gespeichert oder analysiert. Es gibt kein Tracking, kein Cookie-Banner und keine Anmeldung. Nach dem ersten Laden funktioniert das Tool auch offline — die benötigten Browser-APIs sind seit 2018 in allen aktuellen Browsern verfügbar.

Welche Bild-Tools sind verwandt?

Wenn dein Workflow andere Quell- oder Zielformate kennt:

• Bild-Format-Konverter — Hub mit Format-Vergleich und allen vier Format-Paaren.
• PNG zu AVIF — wenn deine Quellen Logos oder Screenshots mit Transparenz sind.
• JPG zu WebP — wenn breitere Browser-Kompatibilität wichtiger ist als die letzten 25 Prozent Bandbreitenersparnis.
• Metadaten entfernen — EXIF, GPS und Kamera-Infos selektiv strippen vor oder nach der Umwandlung.