AVIF-Bilder aus Photoshop exportieren: Qualität, Transparenz und Web-Workflow

Ein Produktfoto sieht in Photoshop perfekt aus, die Datei ist sauber freigestellt und für den Shop vorbereitet. Beim Export soll sie nun möglichst klein werden, ohne dass feine Kanten, Schriftzüge oder Schatten leiden. Genau an dieser Stelle wird AVIF interessant: Das moderne Bildformat kann Fotos und viele Webgrafiken sehr effizient komprimieren. Damit die Ersparnis nicht mit sichtbaren Artefakten, falscher Transparenz oder fehlenden Fallbacks bezahlt wird, braucht es jedoch einen klaren Workflow.

Infografik zu AVIF-Bilder aus Photoshop exportieren: Qualität, Transparenz und Web-Workflow (KI-generiert).

Was AVIF für Websites und Shops interessant macht

AVIF ist ein Bildformat für das Web, das auf dem AV1-Videocodec basiert. Es kann Bildinformationen bei geringer Dateigröße speichern und eignet sich besonders für Fotos, Produktansichten, großformatige Header-Motive und Social-Media-Teaser auf Websites. Im Vergleich zu JPEG lassen sich häufig kleinere Dateien erzielen, ohne dass ein Qualitätsverlust sofort auffällt.

Anders als JPEG kann AVIF auch Transparenz unterstützen. Das macht das Format grundsätzlich für freigestellte Motive, Logos oder grafische Elemente interessant. Trotzdem ist AVIF kein automatischer Ersatz für PNG: Bei klaren Kanten, kleinen Texten, flächigen Farben und Illustrationen solltest du das Ergebnis besonders kritisch prüfen. Kompression kann dort schneller sichtbar werden als in einem Foto mit natürlichen Strukturen.

Für Teams ist vor allem wichtig: AVIF ist ein Auslieferungsformat. Die bearbeitbare Masterdatei bleibt eine PSD, häufig ergänzt durch verknüpfte Smartobjekte, RAW-Dateien oder hochwertige TIFF-Dateien. Exportiere AVIF also erst am Ende, wenn Zuschnitt, Retusche, Farbkorrektur und Freistellung freigegeben sind.

AVIF in Photoshop exportieren: Erst die Voraussetzungen prüfen

Ob AVIF in Photoshop direkt verfügbar ist, hängt von deiner installierten Photoshop-Version ab. Adobe entwickelt die Export- und Speicheroptionen laufend weiter. Aktualisiere Photoshop über die Creative-Cloud-Desktop-App und prüfe anschließend die verfügbaren Formate im jeweiligen Exportdialog.

Je nach Version findest du AVIF in einem Export- oder Speicherdialog. Wichtig ist, die Dialoge nicht zu verwechseln:

• „Exportieren als“ ist für die Ausgabe optimierter Webdateien gedacht.
• „Für Web speichern“ ist ein älterer Dialog und bietet moderne Formate nicht zwingend an.
• „Speichern unter“ oder „Kopie speichern“ dient je nach Dokument und Version eher der Dateiverwaltung als der gezielten Weboptimierung.

Wenn AVIF in deinem Photoshop nicht angeboten wird, ist das kein Grund, Dateien unkontrolliert über fremde Online-Konverter hochzuladen. Gerade bei Produktbildern, Kampagnenmotiven, Kundenmaterial oder noch nicht veröffentlichten Inhalten sollte der Umgang mit Dateien geregelt sein. In einem professionellen Workflow kann die AVIF-Konvertierung auch nach Photoshop durch das Content-Management-System, einen Bilddienst oder eine freigegebene Build-Strecke erfolgen.

Qualität richtig einstellen und nicht nur auf die Dateigröße schauen

Die Qualitätsvorgabe beim AVIF-Export ist kein absoluter Maßstab. Ein Wert zeigt nicht bei jedem Motiv dieselbe sichtbare Qualität. Eine Nahaufnahme mit Haaren, Stoff, Laub oder Produktstruktur reagiert anders auf Kompression als eine glatte Studioaufnahme mit einfarbigem Hintergrund.

Gehe deshalb nicht nach dem Prinzip „möglichst klein“, sondern vergleiche gezielt. Exportiere von einem repräsentativen Bildmotiv mehrere Varianten und öffne sie in der tatsächlichen vorgesehenen Größe. Prüfe zudem bei 100 Prozent Ansicht, ob Bildfehler entstehen.

Achte besonders auf diese Bereiche:

• Feine Kontrastkanten an Produkten, Verpackungen und Schriftzügen
• Haare, Fell, Stoffstrukturen und transparente Materialien
• Gleichmäßige Farbverläufe, etwa Himmel, Hintergründe oder Schatten
• Scharfe Konturen von Logos und grafischen Formen
• Bildrauschen in dunklen Flächen
• Hauttöne und Farbflächen mit Markenfarben

Bei Fotos darf eine sehr leichte Kompression zulässig sein, sofern sie bei normaler Ansicht nicht auffällt. Bei Produktbildern kann dagegen schon eine kleine Unruhe an Etiketten oder Konturen störend wirken. Lege daher mit deinem Team keine pauschale Qualitätszahl fest, sondern definiere Vergleichsmotive und eine sichtbare Mindestqualität.

Die Grundlage bleibt eine saubere Bildbearbeitung. Übertriebene Nachschärfung, starkes Rauschen oder unruhige Retusche werden durch jede verlustbehaftete Kompression eher betont. Wenn du Tonwerte und Farben vor dem Export sauber steuerst, erhältst du meist bessere Ergebnisse. Unsere Anleitung zu Einstellungsebenen für Farbe und Tonwert zeigt, warum diese Korrekturen getrennt vom Originalbild angelegt werden sollten.

Transparenz: Wann AVIF sinnvoll ist und wann PNG besser bleibt

AVIF kann Transparenz enthalten. Das ist praktisch, wenn du freigestellte Produktmotive oder grafische Elemente möglichst datenarm ausliefern möchtest. In Photoshop muss die Transparenz aber bereits im Dokument vorhanden sein. Ein weißer Hintergrund ist keine Transparenz, auch wenn ein Produkt darauf freigestellt aussieht.

Kontrolliere vor dem Export im Ebenenbedienfeld, ob hinter dem Motiv tatsächlich keine Hintergrundebene liegt. Das Karomuster von Photoshop zeigt transparente Bereiche an. Bei komplexen Freistellungen solltest du die Kante außerdem auf unterschiedlichen Hintergründen prüfen, etwa auf Weiß, Schwarz und einer Markenfarbe. Halbtransparente Haare, Glas, Schatten oder weiche Stoffkanten können bei schlechter Maskierung schnell unnatürlich wirken.

Für eine zuverlässige Beurteilung helfen diese Fragen:

Motiv	AVIF mit Transparenz prüfen?	PNG weiterhin erwägen?
Freigestelltes Produktfoto mit Schatten	Ja	Ja, wenn Kanten sichtbar leiden
Foto mit rechteckigem Hintergrund	Ja, aber Transparenz ist nicht nötig	Nein, JPEG oder AVIF reichen meist
Logo mit wenigen Farben und scharfen Kanten	Möglich	Häufig sinnvoll
Kleine UI-Grafik mit Text	Möglich	Oft besser geeignet
Komplexe Illustration mit weichen Übergängen	Ja, sorgfältig vergleichen	Je nach Ergebnis sinnvoll

PNG bleibt besonders verlässlich, wenn Transparenz und pixelgenaue Kanten wichtiger sind als die kleinste Dateigröße. Für Fotos ohne Transparenz ist PNG dagegen selten die wirtschaftlichste Wahl. Wenn du regelmäßig Produkte freistellst, findest du in unserem Beitrag Freistellen in Photoshop: die besten Methoden passende Techniken für unterschiedliche Motivarten.

AVIF neben JPEG, PNG und WebP einsetzen

Ein stabiler Web-Workflow setzt nicht darauf, dass ein Dateiformat alle Fälle löst. AVIF ergänzt bestehende Formate. Welche Datei ausgeliefert wird, entscheidet idealerweise das Content-Management-System, der Shop oder eine vorgeschaltete Optimierungslösung anhand der Browserunterstützung und des Einsatzzwecks.

Die wichtigste Regel lautet: Bewahre das Masterbild unabhängig vom Webformat auf. Eine PSD ist keine Website-Datei, sondern die Quelle für spätere Anpassungen. Exportiere daraus bei Bedarf erneut AVIF, WebP, JPEG oder PNG. So vermeidest du, dass ein bereits komprimiertes AVIF später nochmals bearbeitet und erneut verlustbehaftet gespeichert wird.

Ein praxistauglicher Ablauf sieht so aus:

1. Bild in Photoshop in Originalgröße bearbeiten und als PSD sichern.
2. Zuschnitt und Ausgabegröße für den jeweiligen Verwendungszweck festlegen.
3. AVIF mit passender Qualitätsvorgabe exportieren.
4. Sichtprüfung in Originalgröße und in der späteren Anzeigegröße durchführen.
5. Vergleichsformat erzeugen, wenn es der technische Web-Workflow verlangt.
6. Dateinamen, Abmessungen und Einsatzzweck nachvollziehbar dokumentieren.
7. Dateien im Staging oder Testsystem auf Darstellung und Ladeverhalten prüfen.

WebP bleibt dabei ein wichtiger Begleiter. Es ist in vielen Workflows etabliert und unterstützt ebenfalls Transparenz. JPEG ist weiterhin sinnvoll, wenn ältere Systeme, externe Plattformen oder einfache Übergaben es voraussetzen. PNG bleibt die sichere Wahl für viele Grafiken, Screenshots und transparente Elemente, bei denen die Qualität Vorrang hat.

Für die Formatentscheidung ist auch die Art der Grafik entscheidend. Eine große Kampagnenaufnahme behandelt man anders als eine kleine Werbemittelvariante oder ein Social-Media-Motiv. Wenn du mehrere Kanäle aus einem Layout bedienst, helfen Zeichenflächen für LinkedIn, Instagram und Display-Banner, um Größen und Varianten kontrolliert vorzubereiten.

Farbe und Größe vor dem Export verbindlich festlegen

AVIF macht keine ungeeignete Bildgröße besser. Lade keine übergroße Datei hoch, wenn sie auf der Website nur klein angezeigt wird. Reduziere die Pixelmaße passend zum vorgesehenen Platz. Gleichzeitig solltest du Bilder nicht unnötig klein exportieren, wenn sie auf hochauflösenden Displays deutlich größer dargestellt werden können.

Für Webbilder ist ein konsistenter RGB-Workflow entscheidend. Prüfe, welcher Farbraum im Webauftritt vorgesehen ist, und halte dich an die Vorgaben des Teams. Für viele Websites ist sRGB die robuste Wahl, weil die Farbdarstellung über Geräte und Browser hinweg besser kalkulierbar bleibt. Die Zusammenhänge zwischen Profilen, Monitor und Farbräumen erläutern wir ausführlich in Farbmanagement verstehen: Farbräume, Profile, Monitor.

Dokumentiere im Team außerdem, wer exportiert, welche Dateigrößen zulässig sind und wo die Masterdatei liegt. Besonders bei wiederkehrenden Shopbildern verhindert das Doppelarbeit und sorgt für einheitliche Ergebnisse. Für standardisierte Produktansichten lohnt sich ein verbindlicher Ablauf für Zuschnitt, Hintergrund und Schatten, wie wir ihn in Produktfotos für den Onlineshop einheitlich bearbeiten beschreiben.

Checkliste für die AVIF-Ausgabe

• Liegt die bearbeitbare PSD als Masterdatei vor?
• Sind Bildgröße und Seitenverhältnis für den Webplatz korrekt?
• Wurde Transparenz nur verwendet, wenn sie tatsächlich benötigt wird?
• Sind Kanten, Schatten, Haarbereiche und Schriftzüge geprüft?
• Wurde AVIF mit einem passenden Vergleichsformat getestet?
• Ist der Farbraum für den Webauftritt abgestimmt?
• Sind Dateiname, Version und Verwendungszweck eindeutig?
• Ist die Darstellung im Zielsystem getestet?

AVIF kann die Bildauslieferung deutlich effizienter machen, wenn Bearbeitung, Export und technische Auslieferung zusammenpassen. Der größte Hebel liegt nicht in einer einzelnen Qualitätseinstellung, sondern in einem abgestimmten Prozess: saubere Masterdateien, passende Bildgrößen, Sichtprüfung und klare Verantwortlichkeiten. Passende Seminare und Termine findest du bei uns auf cmt.de.