Verliert mein Logo seine Transparenz, wenn es ein WEBP wird?

Nein. WEBP unterstützt den Alphakanal sowohl im verlustfreien als auch im verlustbehafteten Modus, das heißt der transparente Hintergrund Ihres Logos und die weichen Kantenübergänge bleiben bei der Umwandlung erhalten. Das ist der deutlichste Vorteil von WEBP gegenüber JPG; bei einer Umwandlung nach JPG würden die transparenten Bereiche dauerhaft mit Weiß oder Schwarz gefüllt. Nach der Umwandlung genügt es, das Logo auf einen dunklen Untergrund zu legen und zu prüfen, ob an den Kanten ein Saum entstanden ist.

Macht WEBP bei einer kleinen Icon-Datei wirklich einen Unterschied?

Bei einem einzelnen Icon ist der Unterschied meist gering, denn einfache einfarbige Grafiken erzeugen schon als PNG recht kleine Dateien. Spürbar wird der Unterschied in der Summe, in Oberflächen mit sehr vielen Icons. Außerdem kann die WEBP-Ausgabe bei manchen sehr kleinen und einfachen Icons sogar größer ausfallen als das PNG, weil die Kopfdaten des Formats einen erheblichen Teil der Datei ausmachen. In dieser Größenordnung lautet die richtige Frage nicht, welches Format, sondern ob sich die Icons als Vektorgrafik ausliefern lassen.

Warum verwenden wir überhaupt noch PNG oder WEBP, wo es doch Vektorformate gibt?

Vektorformate sind für Logos und Icons technisch überlegen; sie bleiben in jeder Größe scharf und erzeugen meist sehr kleine Dateien. Doch nicht jede Umgebung akzeptiert Vektoren: Profilbilder in sozialen Netzwerken, E-Mail-Signaturen, manche Content-Management-Systeme und Integrationen von Drittanbietern verlangen eine pixelbasierte Datei. Außerdem lassen sich Logos mit komplexen Verläufen, Texturen oder fotografischen Elementen nicht effizient als Vektor darstellen. Deshalb hält man in der Praxis die Vektorquelle vor und erzeugt Pixelfassungen nach Bedarf.

PNG oder WEBP für Logos und Icons?

Q: Soll ich von demselben Logo sowohl eine PNG- als auch eine WEBP-Fassung aufbewahren?

Wenn Sie auf Ihrer Website WEBP einsetzen, ja – es ist sinnvoll, zusätzlich eine PNG-Fassung als Rückfalloption vorzuhalten. In aktuellen Browsern ist die WEBP-Unterstützung verbreitet, aber E-Mail-Programme, Office-Dokumente und manche Drittsysteme können das Format möglicherweise nicht verarbeiten. Da das Logo das Bild ist, das von Ihrer Website an die meisten unterschiedlichen Orte kopiert wird, ist das Kompatibilitätsrisiko hier höher als bei anderen Bildern. Zwei Fassungen aufzubewahren kostet wenig und verhindert viel.

Warum sich dieser Vergleich von den anderen unterscheidet

Bei der Wahl eines Fotoformats läuft die Entscheidung meist auf das Verhältnis von Größe und Qualität hinaus. Bei Logos und Icons liegt der Fall anders: Die Dateien sind ohnehin klein, ein Größenvorteil allein ist also nicht ausschlaggebend. Entscheidend sind hier drei andere Dinge – dass die Transparenz korrekt erhalten bleibt, dass die Kanten scharf bleiben und dass sich die Datei überall dort öffnen lässt, wohin sie geht.

In diesem Beitrag vergleichen wir PNG und WEBP entlang dieser drei Achsen und klären, welches Format in welchem Szenario die richtige Wahl ist.

Transparenz: beide beherrschen sie, aber mit einem Unterschied

Bei Logos und Icons ist Transparenz keine optionale Eigenschaft, sondern meist zwingend. Ihr Logo muss sich mit derselben Datei auf weißem Grund, in einer dunklen Kopfleiste und in einem farbigen Kampagnenbild einsetzen lassen.

PNG unterstützt das von Grund auf. Es speichert für jedes Pixel einen Transparenzwert mit 256 Stufen; dadurch verschmelzen die geschwungenen Kanten des Logos übergangslos mit dem Untergrund, und Schatten wirken natürlich.

Auch WEBP unterstützt den Alphakanal – und zwar sowohl im verlustfreien als auch im verlustbehafteten Modus. Der Unterschied liegt darin, dass WEBP die Transparenz erhalten und zugleich verlustbehaftet komprimieren kann. In PNG gibt es diese Option nicht; wollen Sie Transparenz, müssen Sie verlustfrei bleiben. Bei einem Logo mit Schatten, Verläufen und komplexem Aufbau kann diese Flexibilität einen nennenswerten Größenvorteil bringen.

In Sachen Transparenz genügen also beide, WEBP bietet aber mehr Möglichkeiten.

Kantenqualität: verlustfrei bleiben ist Pflicht

Die visuelle Qualität von Logos und Icons zeigt sich an ihren Kanten. Ein leichter Saum oder eine Weichzeichnung an einer scharfen Kante fällt in kleinen Größen sofort auf und lässt die Marke nachlässig wirken.

Da PNG verlustfrei ist, besteht dieses Risiko nicht; das gespeicherte Bild bleibt exakt erhalten.

Bei WEBP hängt das Ergebnis vom gewählten Modus ab. Im verlustfreien Modus erhalten Sie dasselbe Resultat wie mit PNG – es wird keinerlei Pixelinformation verworfen. Im verlustbehafteten Modus dagegen sind scharfe Übergänge die Strukturen, mit denen die Kompression am meisten zu kämpfen hat, sodass bei niedrigen Qualitätsstufen sichtbare Artefakte an den Kanten entstehen können.

Die praktische Regel: Bleiben Sie bei einfarbigen Logos und Icons im verlustfreien Modus. Da die Datei bei diesem Inhalt ohnehin klein ist, rechtfertigt der Gewinn eines Wechsels in den verlustbehafteten Modus das Risiko nicht. Bei komplexen Logos mit Schatten oder fotografischen Elementen lässt sich der verlustbehaftete Modus mit hoher Qualitätsstufe erproben, das Ergebnis muss aber unbedingt vergrößert kontrolliert werden.

Dateigröße: der Gewinn hängt vom Maßstab ab

Verlustfreies WEBP erzeugt bei grafik- und textlastigen Inhalten meist eine kleinere Datei als PNG. Das rührt von seinen fortschrittlicheren Vorhersage- und Packverfahren her und ist ein echter Vorteil.

Im Maßstab von Logos und Icons sollte man die praktische Wirkung dieses Vorteils allerdings nicht überschätzen. Ein einfaches, einfarbiges Icon ist schon als PNG sehr klein; der Gewinn eines Wechsels zu WEBP bleibt in absoluten Zahlen gering. Bei sehr kleinen und einfachen Dateien kann die WEBP-Ausgabe sogar größer ausfallen als das PNG, weil die Kopfdaten des Formats einen erheblichen Anteil der Gesamtgröße ausmachen.

Wirklich spürbar wird der Gewinn dort, wo viele Grafikelemente zusammenkommen – also in Bedienoberflächen – sowie bei komplexen Logos mit Verläufen und Schatten. Bei solchen Dateien gerät die verlustfreie Kompression von PNG unter Druck, und der Vorsprung von WEBP wird deutlich.

Kompatibilität: der stärkste Trumpf von PNG

Das Logo ist das am häufigsten kopierte Bild einer Website. Es landet im Pressekit, wird an E-Mail-Signaturen gehängt, auf Partnerseiten veröffentlicht, in Präsentationen und Office-Dokumente eingefügt und auf Drittplattformen hochgeladen.

PNG funktioniert in all diesen Umgebungen reibungslos. Seine Kompatibilität ist universell; es gibt kein Szenario, in dem ein System es nicht öffnen könnte.

WEBP wird in aktuellen Browsern breit unterstützt, doch sehr alte Browser und manche Drittsysteme können das Format möglicherweise nicht verarbeiten. In E-Mail-Programmen ist die Unterstützungslage nicht so verlässlich wie in Browsern. Bei einem Asset wie dem Logo, das an Orte außerhalb Ihrer Kontrolle geht, wiegt dieses Risiko schwerer als bei anderen Bildern.

Die Entscheidung nach Szenario

Logo, das auf den eigenen Seiten Ihrer Website gezeigt wird: WEBP ist möglich, halten Sie eine PNG-Fassung als Rückfalloption vor. Bleiben Sie im verlustfreien Modus.

Pressekit, Weitergabe an Geschäftspartner, Unternehmensunterlagen: PNG. Sie wissen nicht, mit welchem Werkzeug die Gegenseite die Datei öffnet; Kompatibilität geht dem Gewinn vor.

E-Mail-Signaturen und Newsletter: PNG. Die WEBP-Unterstützung in E-Mail-Programmen ist nicht verlässlich.

Icon-Sets für Bedienoberflächen: Prüfen Sie zuerst ein Vektorformat; ist das nicht möglich, verlustfreies WEBP oder PNG. Zählt das Gesamtgewicht vieler Icons, macht WEBP einen spürbaren Unterschied.

Komplexe Logos mit Schatten oder Verläufen: WEBP. Genau bei diesem Inhaltstyp gerät PNG unter Druck; selbst im verlustfreien Modus können Sie einen deutlichen Gewinn sehen.

Profilbilder in sozialen Netzwerken: Richten Sie sich nach dem Format, das die Plattform akzeptiert; die meisten verlangen PNG oder JPG und rechnen das hochgeladene Bild ohnehin in ihr eigenes Format um.

Bei der Umwandlung

Fällt Ihre Entscheidung auf WEBP, achten Sie bei der Umwandlung von PNG zu WEBP auf zwei Dinge. Erstens: Vergewissern Sie sich, dass Sie den verlustfreien Modus gewählt haben; in manchen Werkzeugen ist der verlustbehaftete Modus voreingestellt und kann an Logokanten unerwünschte Artefakte erzeugen. Zweitens: Löschen Sie die Original-PNG-Dateien nicht – sowohl als Kompatibilitätsreserve als auch, weil Sie später Ausgaben in anderen Größen benötigen könnten.

Legen Sie das Logo nach der Umwandlung sowohl auf einen hellen als auch auf einen dunklen Untergrund und kontrollieren Sie die Kanten vergrößert. Die Transparenz muss erhalten und die Kanten müssen sauber geblieben sein.

Zusammengefasst

Bei Logos und Icons unterstützen beide Formate Transparenz, die Entscheidung fällt also über Größe und Kompatibilität. Verlustfreies WEBP liefert meist eine kleinere Datei als PNG, doch in dieser Größenordnung bleibt der Gewinn absolut betrachtet begrenzt; der eigentliche Unterschied zeigt sich bei komplexen Logos mit Verläufen und in der Summe vieler Icons. Die universelle Kompatibilität von PNG ist bei einem Asset wie dem Logo, das überallhin kopiert wird, dagegen ein gewichtiger Vorteil. Die praktische Lösung besteht darin, beides vorzuhalten: Liefern Sie auf Ihrer Website WEBP aus und verwenden Sie überall dort, wo Sie Dateien nach außen geben, PNG.