8.1 Formate & Einsatz (JPG/PNG/SVG/WebP)

Welche Formate wann genutzt werden (JPG, PNG, SVG, WebP) und wie man sie optimiert.

Inhaltsverzeichnis

A. Formate & Einsatz

  • JPG: Fotos & Hintergründe (Kompression 80–90%)
  • PNG: Grafiken mit Transparenz
  • SVG: Icons, Logos (nur geprüfte SVGs verwenden!)
  • WebP: Moderne Alternative für JPG/PNG (bessere Kompression)

B. Optimierungstools

Empfohlene Tools:
– TinyPNG (JPG/PNG)
– Squoosh (lokale Kompression)
– SVGO (SVG-Optimierung)

Hinweis: SVGs niemals direkt aus Figma exportieren und hochladen – immer prüfen oder durch Illustrator/Cleaner laufen lassen.

  • Globale Typo verwenden
  • Nur Margin-Bottom für Abstände
  • Keine verschachtelten Container
Änderung vorschlagen

Weiter zum nächsten Kapitel →

Nächstes Kapitel