Warum die richtige PNG-Größe wichtig ist

  • Falsch dimensionierte PNGs verursachen unscharfe Darstellungen auf Retina-Displays.
  • Übergroße, transparente PNGs verschwenden Bandbreite und Speicherplatz.
  • Einheitliche Größenangaben verhindern Layoutverschiebungen in UI-Komponenten.
  • Die PNG-Assets des Designsystems müssen exakt den Token-definierten Abmessungen entsprechen.

Bewährte Methoden zur PNG-Größenänderung

  • Skalieren Sie immer von der größten Quelldatei aus – skalieren Sie niemals von kleineren PNGs hoch.
  • Generieren Sie @2x- und @3x-Varianten für Retina- und High-DPI-Displays.
  • Überprüfen Sie die Alpha-Kanten der PNG-Datei nach der Größenänderung – achten Sie auf Ringing oder Halos.
  • Bewahren Sie die PNG-Masterdatei für zukünftige Größenänderungen in verschiedenen Dimensionen auf.
  • Testen Sie die PNG-Ausgabe auf hellem und dunklem Hintergrund auf Alpha-Korrektheit.