Transparenter Hintergrund: welche Formate ihn unterstützen (PNG, WebP, AVIF)

•18 wörter•1m lesen

Nach dem Freistellen brauchst du ein Format mit Alpha‑Kanal, sonst entstehen Halos und ausgefranste Ränder. Praxisleitfaden zu PNG, WebP und AVIF.

1) Kern: Alpha‑Kanal

Echte Transparenz braucht einen Alpha‑Kanal pro Pixel. Ohne Alpha werden Kanten mit einer matten Farbe vorvermischt – sichtbare Halos sind die Folge.

2) Formate mit Transparenz

  • PNG (lossless): perfekte Transparenz und scharfe Kanten. Ideal für UI/Logos/Icons, schwerer bei Fotos.
  • WebP: Alpha in lossy und lossless. Sehr gutes Größen/Qualitäts‑Verhältnis.
  • AVIF: überlegene Kompression mit Alpha. Verläufe prüfen; Encode teils langsamer.
  • SVG: Vektor, skalierbar, Transparenz via Formen/Opacity.

3) Formate, die nicht taugen

  • JPEG: kein Alpha – führt zu Fringing.
  • GIF: binäre Transparenz → Treppeneffekte.

4) Halos vermeiden: Matte & premultiplied

Ohne korrekte Export‑Einstellungen (kein Matte) bleiben helle Ränder auf dunklem Hintergrund. Mit echtem Alpha exportieren und auf hell/dunkel testen.

5) PNG, WebP oder AVIF?

  • Flache UI/Logos: PNG oder WebP lossless.
  • Freigestellte Fotos: WebP/AVIF mit Alpha oft am besten.
  • Vektor: wann immer möglich SVG.

6) Empfohlener Orqui‑Workflow

  1. Hintergrund entfernen.
  2. Konvertieren zu WebP/PNG.
  3. Optimieren & visuell prüfen.

7) Qualitäts‑Checkliste

  • Keine Halos auf hell/dunkel.
  • Abmessungen passend zur Nutzung.
  • Format mit Alpha (PNG/WebP/AVIF) oder SVG.
  • Angemessene Dateigröße.

Verwandte Tools & Artikel

In anderen Sprachen

FAQ

  • Warum ist JPEG ungeeignet?
    JPEG hat keinen Alpha‑Kanal. Pseudo‑Transparenz wird mit einer matten Hintergrundfarbe simuliert und erzeugt Halos auf andersfarbigen Hintergründen.
  • PNG oder WebP für Logos?
    PNG (lossless) ist gestochen scharf; WebP lossless kann bei einfachen Paletten kleiner sein. Kanten auf hell/dunkel prüfen.
  • Ist AVIF‑Transparenz zuverlässig?
    Ja, AVIF unterstützt Alpha. Sehr gute Kompression, aber teils langsamer Encode und heikle Verläufe – visuell prüfen.
  • Unterstützt SVG Transparenz?
    Ja, als Vektor über Formen/Opacity. Ideal für skalierbare Logos & Icons.

Zähler deiner lokalen Transformationen hier (konvertieren, optimieren, skalieren, zuschneiden, Hintergrund entfernen). Alles passiert privat im Browser.