Warum ist mein Logo-PNG unscharf und wie behebe ich das?

Finde die erste Stelle, an der Unschärfe auftritt

Ein größeres PNG zu exportieren hilft, wenn die ursprüngliche Grafik genügend Details enthält. Das Vergrößern einer kleinen Rasterdatei kann die exakten Kurven und Buchstabenformen des ursprünglichen Vektorlogos nicht wiederherstellen.

Öffne das PNG selbst, bevor du die Website änderst oder erneut exportierst. Prüfe es in der vorgesehenen Nutzungsgröße und auf Pixelebene. Vergleiche es dann mit der freigegebenen Quelle und der hochgeladenen Version.

Nutze die folgenden Prüfungen, um den problematischen Schritt zu finden. Sie gehen nicht davon aus, dass jede weiche Kante dieselbe Ursache hat.

• Schon in der Originalgrafik unscharf: Suche eine bessere Quelle oder prüfe die Kleinformatversion des Designs.
• Scharfe Quelle, unscharfes heruntergeladenes PNG: Prüfe Exportmaße, Begrenzungen und Rasterungseinstellungen.
• Scharfer Download, unscharf auf der Website oder in E-Mail: Prüfe, welches Bild ausgeliefert und wie es skaliert wird.
• Scharfes Zeichen, unleserliche winzige Schrift: Prüfe die Mindestgröße des Logos oder verwende eine freigegebene vereinfachte Version.

Prüfe, was die Quelle tatsächlich enthält

Eine echte Vektor-Masterdatei enthält Formen, die in einer neuen Größe gerendert werden können. Ein SVG kann auch eingebettete Bitmap-Bilder enthalten; ein SVG-Dateiname allein belegt daher keine Vektorgrafik.

Ist deine Quelle ein kleines PNG von einer alten Website, fordere die ursprüngliche Arbeitsdatei oder einen geprüften Vektorexport an. Ein erneuter größerer Export dieses kleinen PNGs ergänzt geschätzte Pixel. Adobe beschreibt Hochskalieren als einen Vorgang, der Artefakte erzeugen kann und keine im Original fehlenden Details ergänzt.

Wenn die Masterdatei fehlt, ist das Rekonstruieren oder Nachzeichnen des Zeichens eine separate Designaufgabe. Vergleiche rekonstruierte Buchstabenformen und Formen mit einer freigegebenen Referenz, bevor du sie als neue Masterdatei verwendest.

Weiterführende Artikel: MDN: Bildformate · Adobe: Bildgröße und Neuberechnung

Vergleiche Dateipixel mit angezeigten Pixeln

Verwende die tatsächliche Anzeigegröße statt der erwarteten Layoutbreite. Browser-Entwicklertools helfen beim Prüfen des gerenderten Bildbereichs. Berücksichtige responsive Breakpoints und Transformationen, die das Logo vergrößern.

Ein vorhandenes PNG von 200 × 50 auf 400 × 100 zu skalieren entspricht nicht einem Export aus Vektorgrafik. Beide Dateien können dieselben Maße haben und trotzdem unterschiedliche Kantendetails enthalten. Das Gerätepixelverhältnis beschreibt das Verhältnis zwischen physischen Bildschirmpixeln und CSS-Pixeln.

Die vollständige Berechnung und Übergabebeispiele findest du unter Logo-PNG-Größen für Websites und E-Mail.

Hier ein anschauliches Beispiel mit dem fiktiven Morrow-Quay-Logo, kein tatsächlicher Kundentest:

• Der Header zeigt das Logo mit 200 × 50 CSS-Pixeln an.
• Das hochgeladene PNG enthält nur 200 × 50 Pixel.
• Ein 2×-Ziel erfordert 400 × 100 Pixel.
• Exportiere die Vektorgrafik erneut mit 400 × 100, während die Anzeige bei 200 × 50 bleibt.

Weiter mit: Logo-PNG-Größen für Websites und E-Mail

Weiterführende Artikel: MDN: devicePixelRatio

Prüfe das Bild, das das Zielsystem tatsächlich ausliefert

Ein großes Original hilft nicht, wenn die Seite ein kleineres erzeugtes Vorschaubild lädt. Prüfe die gewählte Ressource und ihre Pixelmaße. Bei responsiven Bildern zeigt die Browser-Eigenschaft currentSrc die ausgewählte Bild-URL. Vergleiche diese Ressource mit dem ursprünglichen Upload.

Ist die ausgelieferte Datei kleiner, prüfe die CMS-Bildeinstellungen oder bitte den Entwickler, das passende Asset zu verwenden. Stimmen die Maße, vergleiche die Dateien visuell, bevor du Optimierung verantwortlich machst. Ein Dienst kann einen Upload skalieren, konvertieren oder anderweitig verarbeiten; stelle aber fest, welche Änderung tatsächlich stattgefunden hat.

PNG verwendet verlustfreie Komprimierung. Eine wirklich verlustfreie Verringerung der Speichergröße macht die Pixel nicht von selbst unscharf. Die Umwandlung eines bereits beschädigten JPEGs in PNG erhält auch die vorhandenen Schäden. Prüfe den gesamten Verarbeitungsweg einschließlich Skalierung oder verlustbehafteter Konvertierung, statt „Komprimierung“ als einen einzigen Vorgang zu behandeln.

Weiterführende Artikel: MDN: currentSrc · MDN: Bildformate und Komprimierung

Prüfe Innenabstände und Kanteneinstellungen

Transparenter Innenabstand beansprucht einen Teil der Bildmaße. Eine 400 Pixel breite Fläche mit einem 200 Pixel breiten Zeichen enthält nur 200 horizontale Pixel für das sichtbare Logo. Wenn du das gesamte Bild größer anzeigst, damit das Zeichen größer wirkt, vergrößerst du auch diese Pixel. Korrigiere unbeabsichtigte Begrenzungen in der Quelle und erhalte freigegebenen Schutzraum.

Eine gewisse Glättung entlang von Kurven ist normales Antialiasing. Beurteile das Asset sowohl in seiner tatsächlichen Nutzungsgröße als auch vergrößert. Extrem kleine Schrift oder dünne Linien können eine freigegebene Kleinformatalternative erfordern, selbst wenn die Exportmaße technisch ausreichen.

Figma bietet Optionen zur PNG-Bildneuberechnung: Detailed ist die Vorgabe, und Basic verwendet Nearest-Neighbor-Abtastung. Vergleiche die Einstellungen an deiner tatsächlichen Grafik; eine härter wirkende Kante ist nicht automatisch originalgetreuer. Figma akzeptiert auch eine feste Exportbreite wie 400w.

Illustrator bietet mit Export für Bildschirme native Rasterausgaben in gewählten Skalierungen. Seine PNG-Exportoptionen enthalten Antialiasing-Einstellungen. Prüfe einen neuen Export aus der Originalgrafik, statt das vorherige PNG wiederholt zu skalieren.

Weiterführende Artikel: Figma: Exporteinstellungen · Adobe: Export für Bildschirme · Adobe: PNG-Exportoptionen

Exportiere erneut und überprüfe die Korrektur

Erstelle zuerst eine Ersatzdatei in den erforderlichen Maßen, bevor du das ganze Paket neu generierst. Setze sie an derselben Stelle ein und vergleiche sie mit der vorherigen Version. Prüfe erneut die ausgelieferte Datei, damit ein altes Vorschaubild oder gecachtes Asset das Ergebnis nicht verfälscht.

Bei einer freigegebenen SVG-Quelle können die eigenen PNG-Größen von logopack.app Pro helfen, einsatzspezifische Dateien als Teil eines Logopakets zu erstellen. Dies ist ein Exportablauf, kein Dienst zur Vektorisierung oder Reparatur niedrig aufgelöster Logos.

Wenn das Zielsystem SVG unterstützt, ist eine geprüfte Vektorversion möglicherweise besser geeignet. Unser Leitfaden zu Dateiformaten erklärt diese Wahl, und unser Figma-Exportleitfaden behandelt die Vorbereitung der Quelle.

Das Problem ist behoben, wenn die richtige Datei in der vorgesehenen Größe ausreichend scharf ist, der Hintergrund funktioniert und das Zielsystem die beabsichtigten Proportionen erhält. Bewahre die geprüfte Masterdatei und Exporteinstellungen für die nächste Übergabe auf.

Weiter mit: Leitfaden zu Dateiformaten · Figma-Exportleitfaden

Weiterführende Artikel: Exporte mit logopack.app vorbereiten