AVIF-Bildaudit

JPEG zu AVIF konvertieren, wenn die Seite wirklich schneller wird

AVIF ist am nützlichsten, wenn du es wie ein Bildaudit behandelst und nicht wie eine pauschale Exporteinstellung. Dieser Leitfaden hilft dir, die JPEG-Fotos zu finden, die AVIF wirklich verdienen, einen sinnvollen Prüfprozess zu wählen und keine Dateien zu veröffentlichen, die zwar kleiner sind, aber sichtbar schlechter wirken.

Kurzes Fazit

Konvertiere die Ausnahmen, nicht den ganzen Medienordner

Die beste JPEG-zu-AVIF-Entscheidung beginnt beim Einfluss auf die Seite. Konvertiere große fotografische Dateien, die nach dem Verkleinern noch bremsen. Routinemäßige Thumbnails, UI-Screenshots, Diagramme und bereits kleine Assets bleiben besser in einem einfacheren Workflow.

Starker Kandidat Großes fotografisches LCP-Bild

Nutze AVIF, wenn ein Hero- oder Landingpage-Foto nach dem Skalieren und WebP-Export weiterhin das Dateigewicht dominiert.

Vielleicht Wichtig, aber nicht dominant

Teste AVIF nur, wenn die aktuelle Datei noch spürbar schwer ist oder die Seite ein klares Speed-Problem hat.

Vermeiden Winzige, grafische oder ungeprüfte Assets

Verzichte auf AVIF, wenn das Bild klein, überwiegend UI, textlastig oder vor dem Veröffentlichen nicht prüfbar ist.

Erst Bildaudit

Stelle diese Fragen, bevor du AVIF wählst

AVIF kann hervorragend sein, ist aber kein magischer Reparaturschritt. Das Format zählt erst, wenn das Bild richtig skaliert, der passenden Rolle zugeordnet und im Layout geprüft wurde, in dem Besucher es wirklich sehen.

Frage Warum es wichtig ist Aktion
Ist die gerenderte Größe bereits korrekt? AVIF repariert kein 4000px-Bild, das mit 900px angezeigt wird. Erst skalieren, dann Formate vergleichen.
Beeinflusst dieses Bild LCP oder ersten Eindruck? Große Fotos im ersten sichtbaren Bereich haben mehr Einfluss als dekorative Bilder weiter unten. Priorisiere Hero-, Landingpage- und Kampagnenmotive.
Ist der Inhalt fotografisch? AVIF glänzt meist bei Fotos, nicht bei flacher UI oder logoartigen Grafiken. Nutze PNG, SVG oder WebP, wenn scharfe Kanten wichtiger sind.
Kannst du das Ergebnis im Kontext prüfen? AVIF kann Artefakte verbergen, bis das Bild im echten Layout sitzt. Prüfe mobile Breite, Verläufe, Gesichter und Zuschnitt.
Gibt es einen Fallback-Pfad? Nicht jede Umgebung behandelt moderne Formate gleich. Veröffentliche mit Picture-Markup oder dem entsprechenden Mechanismus deines Frameworks.

Kandidaten auswählen

Welche JPEG-Bilder sind gute AVIF-Kandidaten?

Suche nach Bildern, bei denen eine kleinere Datei die Seite spürbar verbessert und nicht nur im Dateimanager nett aussieht. Die stärksten Kandidaten sind meist fotografisch, visuell wichtig und groß genug, um die wahrgenommene Ladezeit zu beeinflussen.

Bester Kandidat

LCP-Hero-Foto

Ein großes fotografisches Hero-Bild, das den ersten Viewport prägt und nach dem Skalieren schwer bleibt, ist meist der stärkste AVIF-Anwendungsfall.

Guter Kandidat

Kampagnenbild auf einer Landingpage

Ein Kampagnen- oder Produktfoto kann die zusätzliche Prüfung rechtfertigen, wenn es weit oben auf der Seite erscheint und hochwertig wirken muss.

Selektiver Kandidat

Editoriales Beitragsbild

Nutze AVIF, wenn das Bild groß genug ist, um wirklich zu zählen, nicht nur weil alle Artikelbilder erneut exportiert werden.

Schlechter Kandidat

Textlastige Screenshots

Screenshots, UI-Aufnahmen, Diagramme und Icons verlieren oft zuerst Textklarheit, bevor sie von AVIF-Kompression profitieren.

Qualitätsprüfung

Übernimm Qualitätswerte nicht blind zwischen AVIF-Tools

AVIF-Qualitätsregler sind nicht universell. Ein Wert, der in einem Encoder gut aussieht, kann in einem anderen zu weich oder zu schwer sein. Starte mit dem Standardwert des Tools oder einem mittleren Qualitätsbereich und bewerte das Ergebnis dann auf der echten Seite.

Ziel ist nicht die kleinstmögliche AVIF-Datei. Ziel ist die kleinste Datei, die die Seite noch gut unterstützt: genug Details, saubere Verläufe, kein störender Texturverlust und keine sichtbare Farbverschiebung.

Prüfreihenfolge
  1. Vergleiche mit dem skalierten JPEG oder WebP, nicht mit der Originaldatei aus der Kamera.
  2. Prüfe das Bild in der gerenderten Desktop-Größe und in mobiler Breite.
  3. Prüfe Gesichter, Himmel, Verläufe, Schatten, feine Texturen und Markenfarben.
  4. Bestätige, dass die Datei auf der Seite, die du veröffentlichen willst, wirklich geladen wird.

Typische Bildfehler

Die AVIF-Artefakte, die du vor dem Veröffentlichen prüfen solltest

Ein guter AVIF-Export kann ausgezeichnet aussehen. Ein schlechter fällt oft leise durch: Die Datei ist kleiner, aber das Bild wirkt flach, verschmiert oder unruhig, genau dort, wo Nutzer zuerst hinsehen.

Banding in Himmel oder Verläufen Glatte Hintergründe können sichtbare Stufen zeigen, wenn die Kompression zu stark ist.
Wachsartige Haut oder Produkttextur Porträts und Produktoberflächen können natürliche Details verlieren, auch wenn die Datei auf den ersten Blick scharf wirkt.
Matschige feine Details Blätter, Stoff, Haare und kleine wiederkehrende Muster können so verschmieren, dass die Ersparnis den Qualitätsverlust nicht wert ist.
Farb- oder Kontrastverschiebung Kampagnenbilder und Produktfotos brauchen nach der Konvertierung markensichere Farbchecks.
Fehler bei Zuschnitt und Fokuspunkt Eine kleinere Datei ist kein Gewinn, wenn responsive Zuschnitte den Teil des Bildes verstecken, der die Seite verkauft.

Auslieferung

Veröffentliche AVIF mit Fallback, nicht als blinden Ersatz

Bei wichtigen Seitenbildern sollte die Auslieferung langweilig und berechenbar bleiben. Nutze AVIF zuerst, wenn es unterstützt wird, halte einen WebP- oder JPEG-Fallback bereit, setze Breite und Höhe und lass den Browser die Layoutgröße nicht erst spät herausfinden.

Preloade ein AVIF nur dann, wenn es wirklich das LCP-Bild ist. Wenn jedes konvertierte Asset vorgeladen wird, wird die Seite eher beschäftigter als schneller.

HTMLPicture-Markup mit AVIF-Fallback
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Datenschutz und Kontrolle

Halte unveröffentlichte Kampagnenbilder aus beliebigen Upload-Workflows heraus

Große JPEG-Fotos sind oft keine neutralen Dateien. Sie können unveröffentlichte Produkte, Kundenarbeit, Standortdetails, vorbereitete Kampagnenmotive oder Dateinamen enthalten, die internen Kontext verraten. Der Upload in einen Converter sollte eine bewusste Entscheidung sein, nicht der Standard.

Ein lokaler Workflow hält Quelldateien, Ausgabenamen und Prüfschritte nahe am Projekt. Das ist besonders hilfreich, wenn dieselbe Landingpage mehrere Exportversuche braucht, bis die visuelle Balance passt.

Praktischer Workflow

Ein wiederholbarer JPEG-zu-AVIF-Prozess, ohne aus jedem Bild ein eigenes Projekt zu machen

  1. 01
    Sammle nur die schweren Kandidaten

    Starte mit einer kurzen Liste großer JPEG-Fotos, die nach normalem Skalieren und WebP-Export noch relevant sind.

  2. 02
    Exportiere AVIF-Varianten getrennt

    Lege AVIF-Ausgaben in einem eigenen Ordner ab, damit Quell-JPEGs und normale WebP-Dateien leicht vergleichbar bleiben.

  3. 03
    Prüfe auf der echten Seite

    Setze den Kandidaten in die echte Komponente oder Vorlage und prüfe das sichtbare Ergebnis, nicht nur die Converter-Vorschau.

  4. 04
    Mit Fallback-Markup veröffentlichen

    Liefere AVIF dort aus, wo es unterstützt wird, und behalte WebP oder JPEG als Fallback für berechenbares Verhalten.

  5. 05
    Regel dokumentieren

    Schreibe fest, welche Bildrollen AVIF bekommen, damit das nächste Update nicht zum Ratespiel wird.

Formatgrenze

Nutze WebP als Basis und AVIF als Eskalation

Ein gesunder Workflow hat meist einen Standardpfad und einen Ausnahmepfad. WebP ist für normale Website-Bilder der Standard, weil es praktisch und breit unterstützt ist. AVIF ist die Eskalation, wenn ein großes fotografisches Bild weiterhin zu viel kostet.

Diese Grenze hält den Artikel-Workflow schnell und gibt dir trotzdem eine Möglichkeit, die Bilder zu retten, die Dateigewicht oder LCP dominieren.

Normale Artikelbilder Nutze WebP, außer eine konkrete Datei ist weiterhin zu schwer.
Großes fotografisches Hero-Bild Teste AVIF nach dem Skalieren und vergleiche das visuelle Ergebnis.
Screenshots und UI Bevorzuge PNG oder WebP, wenn Text und harte Kanten wichtig sind.
Ungeprüfte Batch-Exporte Veröffentliche AVIF nicht blind, nur weil der Ordner kleiner ist.

Checkliste vor dem Veröffentlichen

Prüfe das, bevor du ein JPEG durch AVIF ersetzt

Das Quellbild wurde skaliert Die AVIF-Datei liegt nahe an der größten angezeigten Größe, nicht am Kameraoriginal.
Die Seite nutzt das AVIF Netzwerk- oder Quelltextchecks bestätigen, dass die neue Datei wirklich ausgeliefert wird.
Ein Fallback existiert WebP oder JPEG bleibt für deinen Auslieferungspfad verfügbar.
Die Qualität wurde geprüft Die finale Seite wurde auf Desktop und Mobile auf Artefakte geprüft.
Metadaten bleiben sinnvoll Alt-Text, Open-Graph-Bilder und JSON-LD-Bildreferenzen wurden nicht versehentlich beschädigt.
Das Original bleibt erhalten Quell-JPEGs bleiben für künftige Zuschnitte, Größen und Re-Exporte verfügbar.

FAQ

Häufig gestellte Fragen

Praktische Antworten für JPEG-zu-AVIF-Entscheidungen im Publishing