Scharfe Bilder aus Figma und Photoshop exportieren

Das Problem: Im Design scharf – nach dem Export unscharf

Du hast stundenlang in Figma oder Photoshop an einem wunderschönen Design gearbeitet. Auf der Arbeitsfläche sieht alles pixelperfekt aus. Doch sobald du es als JPG oder PNG exportierst und im Browser anschaust, wirkt es weich, verschwommen oder einfach … falsch.

Dieses Ärgernis kennen viele Designer. Die Unschärfe entsteht fast immer durch eines von zwei Dingen: falsche Export-Auflösung oder falsche Export-Einstellungen. Diese Anleitung gibt dir einen absolut sicheren Workflow für Figma und Photoshop, damit deine Bilder jedes Mal gestochen scharf werden.

Die Goldene Regel: 2× exportieren, 1× anzeigen

Der Schlüssel zu scharfen Bildern auf modernen High-DPI-Bildschirmen (z. B. Retina) ist: Exportiere das Bild in der doppelten Größe der geplanten Anzeigegröße.

Beispiel: Dein Hero-Banner soll auf der Website 1200 px breit sein → exportiere es mit 2400 px Breite. Dann zwingst du im HTML/CSS die Anzeigegröße wieder auf 1200 px.

<!-- Bild ist 2400 px breit, wird aber nur 1200 px breit angezeigt -->
<img src="my-banner-2400px.jpg" alt="Beschreibender Alt-Text" width="1200">

So lieferst du dem Browser die doppelte Pixeldichte → perfekt scharf auf Retina- und High-DPI-Displays.

Export aus Figma

Figma ist vektorbasiert – scharfe Exports sind daher kinderleicht.

Schritt-für-Schritt:

1. Frame oder Asset auswählen → klicke auf das gewünschte Objekt (Icon, Komponente, ganzer Frame).
2. Export-Panel öffnen → rechts im Seitenbereich unter „Export“ auf das + klicken.
3. Skalierung einstellen → das Wichtigste! Ändere 1x in 2x (für besonders wichtige Grafiken wie Logos gern auch 3x).
4. Format wählen:
   • JPG → ideal für Fotos und komplexe Bilder; Qualität ca. 80–90 %.
   • PNG → perfekt für scharfe Linien, Text und Transparenz (Logos, Icons).
   • SVG → die beste Wahl für einfache Logos und Icons – bleibt in jeder Größe 100 % scharf.
5. Exportieren → speichern. Vor dem Hochladen auf die Website am besten noch mit unserem Bildkompressor optimieren.

Export aus Photoshop

Photoshop ist rasterbasiert – deshalb von Anfang an in hoher Auflösung arbeiten!

Moderne Methode: „Für Web exportieren“ (empfohlen)

Gehe zu Datei → Exportieren → Für Web exportieren…

1. Größe prüfen → rechts unter „Bildgröße“ sicherstellen, dass Breite/Höhe bereits das 2-fache der Anzeigegröße sind.
2. Format wählen:
   • JPG → Qualität 70–85 (guter Kompromiss aus Qualität und Dateigröße).
   • PNG → bei einfachen Logos/Icons „Kleinere Datei (8-Bit)“ aktivieren → spart enorm Speicherplatz.
3. Farbraum sRGB → unten im Dialog unbedingt „In sRGB konvertieren“ anhaken (verhindert fahle Farben im Browser).
4. „Exportieren“ klicken.

Klassische Methode: „Für Web speichern (Legacy)“

Für ältere Photoshop-Versionen: Datei → Exportieren → Für Web speichern (Legacy)…

1. Preset wählen → z. B. „JPEG Hoch“ oder „PNG-24“.
2. Qualität anpassen → bei JPEG ca. 70–80; bei PNG zwischen PNG-8 (kleiner, weniger Farben) und PNG-24 wählen.
3. Größe kontrollieren → rechts unten die finale Pixelgröße prüfen.
4. „In sRGB konvertieren“ anhaken.
5. Speichern klicken.

Nach dem Export: scharf komprimieren ohne sichtbaren Verlust

Der 2×-Export löst die Schärfe, verdoppelt aber grob das Dateigewicht. Deshalb gehört zu jedem scharfen Workflow ein Komprimierungsschritt. Öffnen Sie den Bildkompressor, ziehen Sie das exportierte Bild hinein und regeln Sie die Qualität so lange nach unten, bis bei 100-Prozent-Zoom gerade noch keine Artefakte sichtbar sind. Für Fotos liegt dieser Sweet Spot meist zwischen 70 und 85 Prozent.

PNG-Grafiken mit scharfen Linien sparen oft 30 Prozent und mehr, wenn Sie sie nach WebP konvertieren. Der Bildkonverter übernimmt das direkt im Browser, ebenfalls ohne Upload. Behalten Sie zusätzlich die SVG-Originale von Logos und Icons: Wo Vektor möglich ist, brauchen Sie gar keine Rasterversion auszuliefern. Prüfen Sie nach der Komprimierung noch einmal Farbverläufe, denn aggressive Einstellungen erzeugen dort zuerst sichtbare Stufen.

Responsive ausliefern: mit srcset jedes Display bedienen

Ein einziges 2400-px-Bild für alle Geräte zu versenden ist verschwenderisch. Smartphones laden dann Desktop-Bytes über Mobilfunk. Die Lösung heißt srcset: Sie hinterlegen mehrere Breiten derselben Grafik und lassen den Browser wählen.

<img src="banner-1200.jpg"
     srcset="banner-1200.jpg 1200w, banner-2400.jpg 2400w"
     sizes="(max-width: 768px) 100vw, 1200px"
     alt="Beschreibender Alt-Text" width="1200">

Exportieren Sie dafür jede benötigte Breite einmalig aus Figma oder Photoshop, komprimieren Sie alle Varianten einzeln und verweisen Sie im Markup darauf. So bekommt das Smartphone die leichte Version, der Retina-Desktop die volle 2×-Schärfe und niemand wartet unnötig. Gerade bei Hero-Bannern und Produktbildern halbiert das die Ladezeit, ohne dass ein einziges Pixel an Schärfe verloren geht.

Die häufigsten Export-Fehler im Überblick

Wenn ein Bild trotz 2×-Regel unscharf wirkt, liegt fast immer einer dieser Fehler vor. Erstens: Das Photoshop-Dokument war von Anfang an zu klein und wurde nachträglich hochskaliert. Hochrechnen erfindet keine Details, sondern weicht Kanten auf. Arbeiten Sie deshalb immer in der finalen Exportgröße oder größer. Zweitens: Das JPG wurde doppelt komprimiert, einmal beim Export aus Photoshop und einmal durch das CMS. Deaktivieren Sie in diesem Fall die CMS-Komprimierung oder liefern Sie bereits final optimierte Dateien.

Drittens: Der sRGB-Haken fehlt und Farben wirken flau, was viele mit Unschärfe verwechseln. Viertens: Logos wurden als JPG statt als PNG oder SVG exportiert, sodass Kanten durch Kompressionsartefakte fransen. Fünftens: CSS skaliert das Bild über seine natürliche Größe hinaus, etwa width: 100% in einem Container, der breiter ist als die Datei. Dann hilft nur eine größere Exportvariante oder max-width im Stylesheet. Gehen Sie diese fünf Punkte der Reihe nach durch, und Ihre Designs sehen online genau so brillant aus wie auf der Arbeitsfläche.

Wenn du immer nach der 2×-Regel exportierst, deine Assets korrekt komprimierst und den sRGB-Farbraum sicherstellst, kannst du endlich Abschied von unscharfen Web-Bildern nehmen – deine Designs sehen online genau so brillant aus wie auf deiner Arbeitsfläche!