Logo in Shopify oder WordPress unscharf? Vorlage und Anzeigegröße prüfen
Finde die Ursache unscharfer Website-Logos: Pixelmaße, Theme-Vorschaubilder, Retina-Displays und passende SVG- oder PNG-Exporte statt endlosem Neuhochladen.
Kurzantwort
Vergleiche die echten Pixelmaße des Logos mit seiner Anzeigegröße im Theme. Ein 120-Pixel-Bild wird unscharf, wenn es auf 240 CSS-Pixel vergrößert wird. Nutze eine saubere SVG, sofern Plattform und Theme sie sicher unterstützen, oder exportiere ein ausreichend großes PNG aus einem Vektormaster. Prüfe auch automatisch verkleinerte Vorschaubilder.
Vorlage oder Theme als Ursache unterscheiden
| Beobachtung | Prüfen | Lösung |
|---|---|---|
| Original bereits verschwommen | Pixelmaße der Quelle | Original suchen oder flaches Logo vektorisieren |
| Original scharf, Kopfbereich weich | Gelieferte Datei und Anzeigebreite | Theme-Bildgröße korrigieren |
| Desktop gut, Smartphone weich | Pixeldichte des Displays | Größeres Rasterbild oder SVG |
| Logo klein in großer Fläche | Unnötige Außenränder | Zeichenfläche passend begrenzen |
CSS-Pixel und Bildpixel sind nicht immer identisch. Ein 200 CSS-Pixel breites Logo profitiert auf einem Display mit doppelter Pixeldichte von etwa 400 Quellpixeln. Das ist ein Größenbeispiel, keine Aufforderung zu riesigen Uploads. Mehr Pixel erhöhen das Dateigewicht und reparieren keine bereits unscharfe Vorlage.
Das Problem gezielt beheben
- Prüfe die tatsächlich im Kopfbereich geladene Datei, nicht nur das Original in der Mediathek.
- Notiere natürliche Pixelmaße und angezeigte Breite. Kontrolliere Desktop- und Mobilansicht getrennt.
- Suche den Originalexport des Designers. Ist nur eine flache Rastergrafik verfügbar, erstelle mit Logo zu Vektor einen Vektormaster.
- Exportiere ein vom Theme unterstütztes Format. SVG zu PNG liefert bei Bedarf eine Rasteralternative mit passender Transparenz.
- Tausche die Datei aus, leere den betreffenden Cache und prüfe die veröffentlichte Seite in einer frischen Browsersitzung.
SVG nutzen, ohne Sicherheitsregeln auszuschalten
Manche Systeme beschränken SVG-Uploads, weil das Format aktive oder externe Inhalte enthalten kann. Nutze den vorgesehenen Upload- und Bereinigungsweg deiner Plattform. Deaktiviere nicht pauschal Schutzmechanismen für ein einzelnes Logo. Ein korrekt dimensioniertes transparentes PNG ist eine brauchbare Alternative.
Der SVG-Optimierer reduziert unnötiges Markup eines sauberen Masters. Das ist keine Reparatur fehlender Details oder verzerrter Buchstaben. Kontrolliere das Aussehen nach jeder Änderung.
Die veröffentlichte Seite kontrollieren
- Kopfbereich, Mobilmenü und Fußbereich zeigen die gewünschte Datei.
- Keine Theme-Regel verzerrt das Seitenverhältnis.
- Heller und dunkler Hintergrund bieten genügend Kontrast.
- Die Bildadresse lädt und feste Abmessungen verhindern unnötiges Springen.
- Kleine Schrift bleibt in der tatsächlichen Anzeigegröße lesbar.
Häufige Fragen
Hilft die Einstellung 300 DPI im Web?
Nicht allein. Browser ordnen Bilder nach Layout und Pixelmaßen an. Entscheidend sind die tatsächlich verfügbaren Pixel und die angezeigte Größe, nicht eine Druckauflösungsangabe.
Ist SVG immer besser als PNG?
Nein. SVG passt besonders zu klaren Logos und Symbolen. PNG ist sinnvoll, wenn die Plattform SVG nicht akzeptiert oder das Motiv Rasterdetails benötigt. Wähle das einfachste sichere Format, das ausreichend scharf bleibt.