Logo unscharf auf der Website? Die 6 Ursachen — und was wirklich hilft

Erst die Diagnose, dann der Fix

„Logo unscharf" hat — anders als es sich anfühlt — nur eine Handvoll möglicher Ursachen. Der schnellste Weg zur Diagnose: das Logo auf der Live-Seite mit Rechtsklick → „Bild in neuem Tab öffnen" ansehen. Ist es dort scharf, liegt das Problem an der Darstellung (Ursache 4–6). Ist es schon dort unscharf, liegt es an der Datei selbst (Ursache 1–3).

Ursache 1: Rasterbild statt Vektor

Symptom: Das Logo wirkt in jeder Größe leicht weich, an schrägen Kanten treppig.
Hintergrund: Ein PNG oder JPG hat eine feste Pixel-Anzahl — jede Skalierung rechnet Pixel um und kostet Schärfe. Ein Logo ist aber fast immer als Vektorgrafik entstanden (Illustrator, Figma, Affinity), und im SVG-Format bleibt es in jeder Größe mathematisch scharf.

Lösung: Beim Designer die SVG- oder AI/EPS-Datei anfordern und das Logo als SVG einbinden. Vor dem Einbau durch den SVG-Optimierer laufen lassen — Export-SVGs aus Design-Tools enthalten oft das Zehnfache an unnötigem Code. Warum SVG für Logos und Icons fast immer gewinnt, steht ausführlich im Beitrag SVG, PNG oder JPG für Icons.

Ursache 2: Die Retina-Falle — Datei zu klein für moderne Displays

Symptom: Auf dem älteren Büro-Monitor scharf, auf MacBook, iPhone und den meisten aktuellen Smartphones weich.
Hintergrund: High-DPI-Displays packen 2–3 Geräte-Pixel in einen CSS-Pixel. Ein Logo, das mit 200 px Breite angezeigt wird, braucht als Bilddatei 400–600 px — sonst rechnet das Display hoch, und hochgerechnet heißt unscharf.

Lösung: Wenn SVG nicht möglich ist: das PNG in doppelter Anzeigegröße exportieren (für 200 px Anzeige also 400 px Datei) und per CSS/Attribut auf die Zielgröße setzen. Die Details mit srcset stehen im Beitrag Retina-Bilder optimieren.

Ursache 3: JPG-Kompression auf harten Kanten

Symptom: Um Buchstaben und Konturen liegt ein grauer „Schmutz-Rand", Flächen zeigen Wolken-Muster.
Hintergrund: JPG ist für Fotos gebaut. Harte Kanten — genau das, woraus Logos bestehen — erzeugen die typischen Ringing-Artefakte, und jede erneute Speicherung verstärkt sie.

Lösung: Logos nie als JPG. PNG (verlustfrei) oder SVG. Liegt nur noch ein verartefaktetes JPG vor, hilft kein Filter — das Logo muss aus der Original-Vorlage neu exportiert werden. Mit dem Konverter lässt sich zumindest die weitere Verschlechterung stoppen (einmal zu PNG, danach nie wieder JPG).

Ursache 4: Der Browser skaliert — CSS-Größe ≠ Dateigröße

Symptom: Die Datei ist im neuen Tab scharf, auf der Seite nicht; die Unschärfe ändert sich beim Zoomen.
Hintergrund: Wird ein 317 px breites PNG per CSS auf 200 px oder 250 px gequetscht, entstehen krumme Skalierungsfaktoren — der Browser verteilt Pixel auf halbe Positionen, das Ergebnis wirkt weich. Besonders sichtbar bei dünnen Linien und kleiner Schrift im Logo.

Lösung: Datei-Breite als ganzzahliges Vielfaches der Anzeige-Breite exportieren (Anzeige 200 px → Datei exakt 400 px, nicht 317). Zum Nachmessen der tatsächlichen Anzeigegröße: Browser-DevTools, Element inspizieren — dort stehen Render-Größe und intrinsische Größe direkt untereinander.

Ursache 5: Das CMS hat mitkomprimiert

Symptom: Die hochgeladene Datei war einwandfrei, die ausgelieferte ist kleiner und weicher.
Hintergrund:WordPress, Shopify & Co. erzeugen beim Upload eigene Bildgrößen und komprimieren dabei — WordPress etwa standardmäßig JPGs auf Qualität 82 und skaliert sehr große Bilder herunter. Auch Optimierungs-Plugins und CDNs (z. B. mit aktivierter automatischer WebP-Konvertierung) greifen ungefragt ein.

Lösung: Logos vom Auto-Processing ausnehmen: in WordPress das Logo in exakt benötigter Größe hochladen (dann greift keine Skalierung), in Optimierungs-Plugins die Datei auf die Ausnahmeliste setzen — oder schlicht SVG verwenden, das die meisten Pipelines unangetastet lassen.

Ursache 6: Transparenz-Kante gegen falschen Hintergrund

Symptom: Um das Logo liegt ein heller oder dunkler Saum, besonders im Dark Mode.
Hintergrund: Das ist keine Unschärfe, sieht aber so aus: Die halbtransparenten Kantenpixel des PNGs wurden gegen Weiß gerechnet und stehen nun auf dunklem Grund — der weiße „Heiligenschein".

Lösung: PNG mit sauberer Transparenz neu exportieren (gegen transparent, nicht gegen Weiß freigestellt) — oder für Dark Mode eine eigene Logo-Variante ausliefern. SVG umgeht auch dieses Problem vollständig.

Die Kurzform als Entscheidungshilfe

Fazit in einem Satz: Für Logos ist SVG die Antwort auf fünf von sechs Problemen — nur die Transparenz-Kante braucht in Ausnahmefällen noch einen zweiten Blick. Wer die Vorlage nur als PNG hat: großzügig groß exportieren, verlustfrei lassen und exakt auf ganzzahlige Faktoren skalieren.

Quellen

MDN — SVG · MDN — srcset · WordPress Developer — jpeg_quality.