Zwischen „fertig gestaltet" und „online" liegt ein Handwerk
In meiner Ausbildung zum Gestaltungstechnischen Assistenten war der Export ein Nebensatz — „dann speicherst du das halt als PNG". In elf Jahren Web-Praxis habe ich gelernt: Der Export ist kein Nebensatz, sondern der Schritt, der über die halbe Performance und die Bildschärfe der fertigen Seite entscheidet. Und es ist der Schritt, den erstaunlich viele Gestalter routinemäßig überspringen.
Der teuerste Fehler: einfach exportieren
Der Standard-Reflex — „Export as PNG", alles in einfacher Auflösung — produziert gleichzeitig zu große und zu unscharfe Dateien: zu groß für Fotos, zu unscharf für Retina. Ein guter Export unterscheidet nach Bildtyp: Vektorhaftes bleibt vektorhaft, Fotos werden zu modernen Rasterformaten, und Auflösung wird bewusst gewählt statt zufällig mitgenommen.
SVG: das am meisten missverstandene Format
Logos, Icons, Illustrationen mit klaren Flächen gehören als SVG ins Web — scharf auf jedem Display, oft nur wenige Kilobyte. Der Haken: Design-Tools exportieren SVG gern aufgebläht — mit Editor-Metadaten, unnötigen Gruppen, endlosen Nachkommastellen und eingebetteten Rasterbildern. Ein rohes Figma- oder Illustrator-SVG ist schnell drei- bis fünfmal größer als nötig.
Deshalb läuft bei mir jedes SVG nach dem Export durch eine Optimierung, die genau diesen Ballast entfernt. Was dabei passiert und worauf man achten muss, steht im Beitrag SVG-Dateien verkleinern. Wichtig: Wenn ein „Logo" nur als eingebettetes Pixelbild im SVG steckt, ist es kein echtes SVG — dann gehört es als sauberer Vektor neu aufgebaut.
Raster richtig: 1×, 2× und das richtige Format
Für Fotos und komplexe Grafiken gilt: Exportiere in 2× der Anzeigegröße für scharfe Retina-Darstellung — aber nicht in Kameraauflösung. Ein Bild, das 400 Pixel breit erscheint, braucht 800, nicht 4000. Und es gehört nicht als PNG exportiert, sondern als WebP (oder AVIF): gleiche Optik, deutlich kleiner. Wie man 1× und 2× sauber ausliefert, statt das große Bild überall zu laden, zeigt der Beitrag zu srcset und sizes.
Icons: kein PNG-Grab
Ein häufiges Muster: Jedes Icon einzeln als PNG in drei Größen exportiert — Dutzende Dateien, die einzeln geladen werden. Icons gehören fast immer als SVG (inline oder als Sprite), sind damit skalierbar, per CSS einfärbbar und in Summe winziger. Welches Icon welches Format verträgt, klärt der Vergleich SVG vs. PNG vs. JPG für Icons.
Mein Export-Preset
- Logos & Icons: SVG exportieren → optimieren → prüfen, dass kein Rasterbild eingebettet ist.
- Fotos: 2× der Anzeigegröße → WebP/AVIF → komprimieren; 1×/2× per
srcsetausliefern. - Flächige Grafiken: SVG, wenn möglich; sonst WebP mit Transparenz.
- Nie: Kameraauflösung, unkomprimiertes PNG für Fotos, Text als Bild.
Der Export ist der unscheinbare letzte Meter zwischen Entwurf und Erlebnis. Wer ihn ernst nimmt, liefert Seiten ab, die so scharf und schnell sind, wie das Design es versprochen hat. Bei JNRT Pixel läuft die Aufbereitung — Skalieren, Konvertieren, SVG-Optimieren, Komprimieren — komplett lokal im Browser, ohne Upload.
Quellen
MDN — SVG · web.dev — Serve responsive images · web.dev — Serve images in modern formats.