Wie man aus Figma und Photoshop gestochen scharfe Bilder exportiert

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.

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!