Für wen: Designer, die UI- und Marketing-Assets als PNG-Sprites bündeln, und Frontend-Teams, die background-position, background-size und ggf. image-set() konsistent halten müssen. Der Leitfaden liefert eine Entscheidungsmatrix für Exportparameter, @2x/@3x mit Pixelgitter, eine Tool-/CLI-Tabelle für wiederholbare Chargen auf einem Remote Mac mini M4 sowie eine Cross-Screen-Abnahmeliste — keine Theorie ohne Umsetzungsschritte.
Kontext im Blog: Pixelausrichtung und Auto-Layout-Risiken vertiefen Sie in der Figma-Auto-Layout-PNG-Checkliste; allgemeine Retina-Rasterlogik in der SVG→Retina-PNG-Matrix. Für PSD-Quellen vor dem Sprite-Zuschnitt siehe PSD→PNG-Batch mit sips/ImageMagick.
Inhalt
PNG-Sprite: Exportparameter & Layout-Regeln
Ein belastbares Sprite entsteht, wenn Design und CSS dieselbe Referenzeinheit teilen. Legen Sie im Handoff fest: Basisdichte (z. B. 1× = 16-px-Grid), Sprite-Abmessungen in px (Breite×Höhe des Gesamtbilds), Zellengröße pro Icon/State und optional 1-px-Leerraum zwischen Motiven gegen Nachbarbleeding.
Ausführbare Schritte (Design):
- Master-Canvas auf ganzzahliges Pixelraster snappen; keine 23,7-px-Frames für Sprite-Zellen.
- PNG mit sRGB-Profil exportieren (Chunk eingebettet, nicht nur zugewiesen); bei P3-Quellen zuerst mit der Farb-Pipeline des Teams normalisieren (siehe Technik-Insights zu sRGB/Display P3).
- Benennung:
sprite_{theme}_{density}.png(z. B.[email protected]); dazu eine Koordinaten-Tabelle (CSV/Markdown): Symbol-ID, x, y, w, h in CSS-Referenzpixeln. - Abnahme: Sprite-Breite/-höhe durch Zellenmaße ohne Rest teilbar oder dokumentierte „Padding-Zeilen“; keine halbtransparenten Ränder an Zellgrenzen ohne Absprache.
Für das Frontend ist es hilfreich, in derselben Tabelle zu vermerken, ob background-position mit negativen Offsets vom linken oberen Sprite-Ursprung oder mit positiven Werten in Kombination mit einem sichtbaren Viewport gerechnet wird — beides ist üblich, aber nicht mischbar. Wenn States (Hover, Disabled) im Sprite untereinander liegen, tragen Sie die vertikale Schrittweite explizit ein, damit niemand „aus Versehen“ die nächste Zeile mitliest.
@2x/@3x & Pixelausrichtung (CSS-Handoff)
Retina liefert scharfe Darstellung nur, wenn Asset-Pixel und CSS-Logik zusammenpassen. Typische Konvention: 1×-CSS beschreibt Layout; @2x-Sprite hat die doppelte Pixelabmessung; im CSS setzen Sie background-size auf die logische Sprite-Größe (in CSS-Px), sodass der Browser skaliert.
Ausführbare Schritte (Frontend-Handoff):
- Pro Breakpoint festhalten, ob ein Sprite pro Dichte oder ein Master + Skalierung gilt — nicht beides vermischen.
background-position-Werte auf 0,5-px-Schritte vermeiden, wenn 1×-Geräte im Scope sind; auf Retina testen Sie zusätzlich Zoom-Stufen.- Für @3x (iOS-nahe Sets): entweder dediziertes 3×-Sprite oder qualitätsgeprüfte Skalierung von 2× — mit dokumentiertem Mindest-Kontrast für 1-px-Linien.
- Abnahme: Screenshot-Vergleich Referenzbrowser vs. Safari/Chrome/Firefox; eine Zeile im Report: „Koordinatenquelle = Datei X, Zeile CSV Y“.
Batch: Befehle & Werkzeug-Parameter (Remote M4)
Auf einem Remote Mac M4 lassen sich Sprite-Nachbearbeitung und QA scripten — ideal, wenn lokale Laptops thermisch limitiert sind oder dieselbe Pipeline nachts laufen soll. Pfade an Ihre Ordner anpassen (in/, out/, logs/).
| Werkzeug | Zweck | Parameter / Muster | Abnahme-Hinweis |
|---|---|---|---|
| sips | Profil zuweisen / normalisieren | sips -s profile /System/Library/ColorSync/Profiles/sRGB\ Profile.icc sprite.png |
ICC per sips -g profile verifizieren |
| ImageMagick | Sprite-Zellen schneiden | magick sprite.png -crop WxH+X+Y +repage tile.png |
Ausgabe-B×H = Erwartung; kein +repage vergessen |
| ImageMagick | 1 px Rand (Padding) ergänzen | magick in.png -background none -extent WxH out.png |
Visuell auf Nahtstellen in der DevTools-Preview |
| oxipng | Verlustfrei komprimieren | oxipng -o 4 --strip safe *.png |
Byte-Delta < Schwelle; Pixeldiff = 0 |
| pngcheck | Chunk-/Struktur-QA | pngcheck -v sprite.png |
Keine unerwarteten WARN bei Alpha |
Schrittfolge (Ops): (1) Eingangssprites in in/ versionieren, (2) Profil normalisieren, (3) optional Zellen-Split für Spot-Checks, (4) oxipng mit dokumentiertem Level, (5) Prüfsummen/Manifest schreiben, (6) Report an Design zurück. Gleiche Remote-Maschine = dieselbe reproduzierbare Font-/Color-Pipeline wie bei der oben verlinkten Figma-Pixel-Checkliste.
Manifest-Zeile (Beispiel): sha256,datei,bytes_breite,bytes_hoehe,icc — jede Release-Zeile muss zur Koordinaten-CSV passen. Wenn sich nur ein Icon ändert, aber der Hash des Gesamtsprites springt, gehört das ins Changelog, damit CDN-Invalidierung und visuelle Regression dieselbe Wahrheit lesen.
Auf dem Remote M4 lohnt sich ein fester Queue-Ordner: eingehende PNGs werden erst nach erfolgreicher pngcheck-/Größenprüfung nach releases/ verschoben; verworfene Dateien landen mit Grund in logs/reject.txt. So bleibt die Abnahme reproduzierbar, auch wenn mehrere Designer nacheinander exportieren.
Cross-Screen-Vorschau & Abnahme
Sprites versagen oft erst auf fremden Zoomstufen oder mixed-DPR-Layouts. Bauen Sie eine kurze, wiederholbare Preview-Liste — PM und QA können sie abhaken.
Abnahme-Checkliste (Häkchen):
- Referenz-Viewport: Zielbreite(n) im Browser; Sprite-Hintergrund auf Test-HTML mit echten Texten/Buttons.
- DPR: 1×, 2× und mindestens ein 3×-Gerät oder Emulator; Kanten ohne „Zweipixel-Schatten“.
- Zoom: Browser 80 %, 100 %, 125 % — keine sichtbaren Nahtlinien zwischen Zellen.
- Theming: Hell/Dunkel, falls zutreffend; gleiche Koordinaten, andere Datei — Dateiname im Ticket.
- Bytes: Gesamt-Sprite unter vereinbartem Budget; Einzelkacheln (falls Split) dokumentiert.
- Regression: Screenshot-Diff oder visuelle Sign-Off-Zeile im Release-Log.
Vergleich: Sprite vs. Einzel-PNG vs. Icon-Font/SVG
| Ansatz | Vorteil | Risiko | Wann 2026 wählen |
|---|---|---|---|
| PNG-Sprite | Weniger HTTP-Anfragen, konsistente Rastergrafik | Koordinatenpflege, Retina-Konvention | Legacy-UI, feste Icon-Matrix, strikte Pixel-Ästhetik |
| Einzel-PNG / responsive srcset | Einfacheres Caching, gezieltes Ersetzen | Mehr Dateien, mehr Manifest-Arbeit | Design-Systeme mit häufigem Einzel-Tausch |
| SVG / Icon-Font | Skalierung, oft kleinere Payload für einfache Formen | Font-Subsetting, Sicherheitsthemen bei Fonts | Flache UI-Icons, Animation mit CSS |
FAQ
Sprite @2x: verdoppeln sich CSS-Koordinaten mit? Nicht automatisch — das hängt von Ihrer background-size-Konvention ab. Dokumentieren Sie eine Zeile „CSS bezieht sich auf 1×-Logik; Asset ist 2× in px“. Vermeiden Sie gemischte Tabellen.
Warum Linien zwischen Zellen? Subpixel in der Quelle, fehlendes Padding oder aggressive Kompression an Alphakanten. Snap-to-pixel und 1-px-Gutter sind die ersten Hebel.
Ein Sprite für alle Breakpoints? Möglich, wenn Größe und Lesbarkeit passen; sonst themen- oder dichtegetrennte Sprites mit klarer Token-Zuordnung.
Öffentliche Einstiege ohne Login: MacPng-Startseite, Mieten & Kaufen, Preise & Pakete und Hilfe inkl. SSH/VNC. Weitere Workflows im Technik-Insights-Blog.
Remote Mac M4 für Sprite-Batches & QA
Wiederholbare Export- und Kompressionspipelines, stabile Apple-Silicon-Performance und SSH/VNC-Zugang — ideal, wenn Design und Frontend dieselbe Abnahmeumgebung brauchen. Angebote und Laufzeiten auf der Startseite und unter Preisen vergleichen; Einrichtung in der Hilfe nachlesen.