Logo unscharf auf der Website? Ursachen und Lösung für scharfe Bilder

Wir bei Talha Aslan und Team hören diese Beschwerde meist in genau einer Form: Am Rechner sieht alles gut aus, am Smartphone verschwommen. Allerdings liegt das Problem nicht am Smartphone, sondern an der Datei. In diesem Beitrag konzentrieren wir uns auf ein einziges Thema: warum Logo und Bilder unscharf wirken und wie Sie das Schritt für Schritt beheben. Allgemeine Tipps zur Komprimierung finden Sie in einem eigenen Ratgeber.

Was ist die Gerätepixelrate und warum ist sie wichtig?

Die Gerätepixelrate (device pixel ratio, DPR) beschreibt das Verhältnis zwischen physischen Pixeln und CSS Pixeln eines Bildschirms. Laut MDN steht der Wert 1 für einen klassischen Desktopbildschirm. Der Wert 2 ist bei Retina Displays üblich, und manche Smartphones liegen sogar darüber.

Das heißt: Geben Sie dem Logo im Layout 200 Pixel Breite, zeichnet ein Smartphone mit dem Wert 2 diese Fläche mit 400 physischen Pixeln. Ist Ihre Datei nur 200 Pixel breit, muss der Browser die fehlenden Pixel schätzen. Folglich werden Buchstabenkanten weich und feine Linien grau.

Zudem verändert auch der Seitenzoom diesen Wert. Daher reicht ein Test an einem einzigen Bildschirm nie aus. Prüfen Sie mindestens ein hochauflösendes Smartphone und einen normalen Desktopbildschirm. Für den technischen Hintergrund ist die MDN Seite zu devicePixelRatio ein guter Einstieg. Kurz gesagt erklärt die Gerätepixelrate, warum dieselbe Datei auf verschiedenen Bildschirmen unterschiedlich wirkt.

Was sollten Sie in den ersten fünf Minuten prüfen?

Bevor Sie etwas ändern, gehen Sie diese Reihenfolge durch. Meist zeigt sich die Ursache schon in den ersten drei Schritten.

1. Öffnen Sie das Logo per Rechtsklick in einem neuen Tab und notieren Sie die echte Pixelbreite der Datei.
2. Messen Sie mit den Entwicklertools des Browsers, wie viele CSS Pixel breit das Logo auf der Seite steht.
3. Vergleichen Sie beide Werte. Ist die echte Breite kleiner als das Doppelte der angezeigten Breite, haben Sie das Problem gefunden.
4. Prüfen Sie, ob die Seite die Originaldatei lädt oder eine kleinere Kopie mit Größenangabe im Dateinamen.
5. Achten Sie auf das Dateiformat. Ist das Logo ein JPG, stammen die Artefakte vermutlich daher.

Zum Beispiel braucht ein Logo, das mit 180 Pixeln angezeigt wird, eine Datei mit mindestens 360 Pixeln Breite. Danach wählen Sie in den folgenden Abschnitten die passende Lösung.

Warum ist SVG für ein Logo die sicherste Wahl?

SVG ist ein Vektorformat. Es beschreibt Formen mathematisch statt mit Pixeln. Deshalb zeichnet der Browser das Logo für jeden Bildschirm neu, egal wie hoch die Pixeldichte ist, und die Kanten bleiben scharf. Eine einzige Datei liefert also dieselbe Schärfe am Desktop und am iPhone.

Allerdings ist nicht jede SVG Datei sauber. Manche Grafikprogramme betten beim Export ein Pixelbild in die Datei ein. Dann endet die Datei zwar auf .svg, die Unschärfe bleibt aber. Außerdem ersetzt der Browser die Schrift durch eine andere, wenn Sie den Text nicht in Pfade umgewandelt haben.

• Fordern Sie von Ihrer Designerin oder Ihrem Designer die Vektordatei des Logos an.
• Wandeln Sie vor dem Export alle Texte in Pfade um.
• Prüfen Sie, dass kein Pixelbild in der SVG Datei steckt.
• Beschränken Sie SVG Uploads dort, wo Besucher Dateien hochladen können; das Logo fügt nur die Administration ein.

Zudem sind SVG Logos oft kleiner als vergleichbare PNG Dateien. Somit gewinnen Sie Schärfe, ohne Ladezeit zu verlieren. Wie sich ein Logo für kleine Größen vereinfachen lässt, zeigt unser Beitrag zu responsiven Logovarianten.

Welche Größe braucht ein PNG Logo, wenn SVG nicht möglich ist?

Haben Sie nur eine PNG Datei, gilt eine einfache Regel. Laden Sie die Datei mindestens in doppelter, besser in dreifacher Anzeigebreite hoch. So müssen Bildschirme mit dem Wert 2 oder 3 keine Pixel erfinden.

Beispielrechnung: Zeigt Ihr Desktopkopf das Logo mit 160 CSS Pixeln, deckt eine Datei mit 320 Pixeln Bildschirme mit doppelter Dichte ab. Eine Datei mit 480 Pixeln reicht auch für dreifache Dichte. Die Anzeigebreite legen Sie dann per CSS auf 160 Pixel fest. Die Datei wird etwas größer, bei einer kleinen, schlichten Grafik bleibt der Zuwachs aber meist vertretbar.

Speichern Sie ein Logo dagegen nie als JPG. JPG erzeugt Artefakte an harten Farbkanten, also genau dort, wo Buchstaben sitzen. Brauchen Sie einen transparenten Hintergrund, nutzen Sie stattdessen PNG oder verlustfreies WebP. Dabei hilft unser Werkzeug PNG in WebP umwandeln, und mit Bild verkleinern erstellen Sie die Versionen in doppelter und dreifacher Größe.

Was passiert, wenn das Theme das Logo per CSS vergrößert?

Das Vergrößern per CSS ist die zweithäufigste Ursache, wenn ein Logo unscharf wirkt. Das Theme gibt dem Logobereich eine feste Höhe oder Breite vor. Laden Sie eine kleinere Datei hoch, streckt der Browser sie auf diese Fläche. Folglich sehen Sie die Unschärfe sogar am normalen Desktopbildschirm.

Manche Themes setzen das mobile Logo außerdem in einen eigenen Rahmen und verzerren dabei die Proportionen. Ändern sich Breite und Höhe ungleichmäßig, wirkt das Logo zugleich verschwommen und gestaucht. Prüfen Sie deshalb die maximale Logohöhe in den Theme Einstellungen und ebenso die Optionen für den mobilen Kopfbereich.

Die praktische Regel lautet: Die natürliche Breite der Datei darf nie unter der Breite liegen, die CSS vorgibt. Liegt sie darunter, laden Sie eine größere Datei hoch oder verkleinern die Logogröße im Theme. Möchten Sie nicht selbst in die Themedateien eingreifen, richtet professionelles Webdesign den Logobereich von Anfang an für jede Pixeldichte richtig ein.

Wie machen srcset und sizes Bilder schärfer?

srcset ist ein HTML Attribut, das mehrere Größen desselben Bildes auflistet. Laut web.dev ersetzt es das Attribut src nicht, sondern arbeitet daneben. Der Browser wählt die passende Variante für den Bildschirm und lädt die große Datei nur, wenn er sie braucht.

Es gibt zwei Arten von Angaben: x für die Pixeldichte und w für die Breite. Für Grafiken mit fester Breite wie ein Logo genügen 1x, 2x und 3x. Für Fotos, die sich an die Inhaltsspalte anpassen, verwenden Sie dagegen Angaben mit w. Dann ist das Attribut sizes Pflicht, denn der Browser möchte vor dem Seitenaufbau wissen, wie viel Platz das Bild einnimmt.

• Mischen Sie Angaben mit x und w nicht im selben srcset.
• Schreiben Sie den Wert für sizes passend zum echten Layout, denn ein falscher Wert lenkt den Browser zu einer kleinen Datei.
• Geben Sie jedem Bild die Attribute width und height, damit die Seite beim Laden nicht springt.

Eine vollständige Anleitung bietet der Leitfaden von web.dev zu responsiven Bildern als offizielle und aktuelle Quelle. In der Praxis laden Desktopbesucher so keine übergroßen Dateien, und Smartphones bekommen keine verschwommenen.

Warum führt ein falscher Wert für sizes zu unscharfen Bildern?

Das ist einer der tückischsten Fehler. Angenommen, sizes besagt, dass das Bild ein Drittel des Bildschirms füllt. Tatsächlich nimmt es aber die volle Breite ein. Dann wählt der Browser eine kleine Variante und streckt sie. Somit wirken Ihre Fotos weich, obwohl srcset eingerichtet ist.

Beispielszenario: Ein Beitragsbild füllt mobil den ganzen Bildschirm. Das Theme hat sizes allerdings für eine Seitenleiste am Desktop geschrieben. Das Smartphone lädt die kleine Kopie und vergrößert sie um den Faktor 2. Der Besucher sieht nur ein verschwommenes Titelbild.

Zur Kontrolle klicken Sie in den Entwicklertools auf das Bild und sehen nach, welche Datei tatsächlich geladen wurde. Dann multiplizieren Sie die angezeigte Breite mit der Gerätepixelrate. Ist die geladene Datei schmaler als dieser Wert, fehlt etwas bei sizes oder in der Liste der Varianten. Anschließend korrigieren Sie das in den Einstellungen von Theme oder Plugin.

Komprimiert Ihr CMS die hochgeladenen Bilder erneut?

Ja, viele Content Management Systeme tun das standardmäßig. Sie laden eine hochwertige Datei hoch. Dann erstellt das System Kopien in mehreren Größen und speichert sie mit seiner eigenen Qualitätsstufe. Auf der Seite erscheint eine dieser Kopien statt Ihres Originals.

WordPress ist ein gutes Beispiel. Die Mediathek erzeugt beim Upload Zwischengrößen, und das Theme ruft eine davon auf. Fordert das Theme eine zu kleine Größe an oder senkt ein Optimierungsplugin die Qualität zu stark, nützt Ihnen die scharfe Originaldatei nichts.

• Achten Sie auf den Dateinamen auf der Seite. Eine Größenangabe am Ende zeigt eine Zwischenkopie an.
• Prüfen Sie die Qualitätseinstellung Ihres Optimierungsplugins.
• Stellen Sie sicher, dass das Logo aus der Originaldatei geladen wird und nicht aus einer verkleinerten Kopie.
• Erzeugen Sie nach einer Änderung die alten Kopien neu und leeren Sie den Cache.

Die allgemeine Balance zwischen Komprimierung und Qualität beschreiben wir in Bilder für die Website optimieren; deshalb wiederholen wir sie hier nicht.

Welche Qualitätsstufe passt für WebP und AVIF?

Eine einzige richtige Zahl gibt es nicht, denn dieselbe Einstellung wirkt bei verschiedenen Bildarten unterschiedlich. Fotos verbergen starke Komprimierung recht gut. Logos, Text und Grafiken mit harten Kanten zeigen dagegen bei derselben Einstellung sofort Schäden.

Teilen Sie Ihre Bilder deshalb in zwei Gruppen ein, statt eine Qualitätsstufe für die ganze Website zu verwenden. Bei Fotos ist stärkere Komprimierung oft vertretbar. Bei Logos, Icons und Bildern mit Text wählen Sie verlustfreies oder sehr hochwertiges Speichern. So behalten Sie Ladezeit und Schärfe gleichermaßen im Blick.

Außerdem sollten Sie nur einmal umwandeln. Wer ein bereits komprimiertes JPG in WebP und danach in ein weiteres Format überführt, verliert bei jedem Schritt etwas Qualität. Wandeln Sie immer aus der saubersten Quelldatei um. Prüfen Sie das Ergebnis dann mit eigenen Augen auf einem hochauflösenden Smartphone. Ein feiner Saum oder Farbfleck um Buchstaben zeigt zum Beispiel, dass Sie die Qualität erhöhen oder verlustfrei speichern sollten.

Ist das Logo unscharf nur auf dem iPhone?

Wenn ja, liegt es meist an der Pixeldichte. iPhone Bildschirme arbeiten mit hoher Gerätepixelrate. Eine Datei, die am Desktop mit einfacher Dichte genügt, reicht am Smartphone nicht aus. Das heißt, nicht Safari ist die Ursache, sondern die zu kleine Datei.

Sehen Sie auf dem iPhone allerdings auch verrutschte oder überlaufende Elemente, steckt vermutlich etwas anderes dahinter. Solche Layoutprobleme behandeln wir im Beitrag Website auf iPhone Safari fehlerhaft.

Öffnen Sie die Seite zudem auf einem Android Smartphone. Zeigen beide Geräte dieselbe Unschärfe, ist fast sicher die Dateigröße verantwortlich. Auf dem iPhone drücken Sie lange auf das Logo, öffnen das Bild und zoomen hinein. Wirken die Kanten schon vor dem Zoomen weich, ist die Datei zu klein. Sind sie in der Bildansicht scharf, auf der Seite aber weich, wirkt CSS Skalierung oder eine falsche Variante aus srcset.

Warum braucht das Favicon eine eigene Behandlung?

Das Favicon ist das kleine Websitesymbol im Browsertab und in den Suchergebnissen. Nutzen Sie Ihr Hauptlogo direkt als Favicon, wird das Ergebnis oft verschwommen und kaum lesbar. Schließlich pressen Sie ein breites Logo in ein winziges Quadrat.

Laut Google Search Central muss ein Favicon quadratisch sein, also ein Seitenverhältnis von 1:1 haben. Google empfiehlt zudem eine Datei größer als 48 mal 48 Pixel, damit es auf verschiedenen Oberflächen gut aussieht. Die Details finden Sie in den Google Richtlinien für Favicons.

• Verwenden Sie für das Favicon eine schlichte Bildmarke Ihres Logos.
• Bereiten Sie eine quadratische, hochauflösende Quelldatei vor.
• Entfernen Sie feinen Text, der in kleiner Größe unlesbar wird.

Erscheint das Symbol in den Suchergebnissen gar nicht, geht es nicht um Schärfe, sondern um ein technisches Zugriffsproblem. Dazu lesen Sie unseren Beitrag Favicon wird in Google Suchergebnissen nicht angezeigt.

Wie beheben Sie ein Logo unscharf, ohne die Ladezeit zu verschlechtern?

Jedes Bild in dreifacher Größe hochzuladen macht Seiten schwer. Deshalb brauchen Sie eine Balance. Die Tabelle zeigt unseren Ansatz je nach Bildart. Es handelt sich um einen Startwert aus der Praxis, nicht um eine Garantie.

Zusammengefasst bringt der Wechsel zu Vektoren bei Logos und Icons den größten Gewinn an Schärfe. Bei Fotos verhindert ein korrektes srcset, dass Smartphones mehr laden als nötig. Wie die Ladezeit das Ranking beeinflusst, erklären wir in Wie beeinflusst die Ladezeit SEO.

Wie finden Sie die richtige Bildgröße für den Upload?

Nutzen Sie eine einfache Formel: angezeigte CSS Breite mal die höchste Gerätepixelrate, die Sie abdecken möchten. Beispielrechnung: Ein Bild, das in der Inhaltsspalte 720 Pixel breit steht, braucht für doppelte Dichte eine Kopie mit 1440 Pixeln.

Slider und Banner in voller Breite ändern sich allerdings mit der Bildschirmbreite. Für diese Bereiche bereiten Sie mehrere Kopien vor, statt eine einzige Zahl festzulegen, und überlassen dem Browser per srcset die Wahl. In der Praxis decken Sie ein kleines Smartphone, ein großes Smartphone, ein Tablet und einen breiten Desktop ab, jeweils mit der gewünschten Dichte.

Die richtige Größe zu finden ist außerdem nur die halbe Arbeit. Prüfen Sie nach dem Upload, ob die Seite wirklich diese Kopie anfordert. Sonst wählt das Theme womöglich doch eine kleinere Zwischengröße, und das Bild bleibt weich.

Warum werden Bilder mit Text schneller unscharf als Fotos?

Das Auge erkennt kleine Schäden an Buchstabenkanten viel leichter als in einem Foto. Deshalb wirkt ein Aktionsbanner mit Text bei derselben Komprimierung schlechter als ein Foto.

Wenn möglich, betten Sie Text nicht ins Bild ein. Legen Sie ihn stattdessen als HTML über das Bild. Dann bleibt der Text auf jedem Bildschirm scharf, und Suchmaschinen sowie Screenreader können ihn lesen. Müssen Sie ihn doch einbetten, speichern Sie das Bild in hoher Qualität und laden es in doppelter Anzeigebreite hoch. Wiederholen Sie zudem die Kernaussage im Seitentext, damit auch Besucher ohne Bildanzeige sie erhalten.

Zum Beispiel ist kleine Schrift auf einem Banner, das mobil in einen schmalen Bereich passt, am anfälligsten. Eine eigene mobile Version mit größerer Schrift ist oft die sauberste Lösung.

Kann der Cache oder ein CDN die alte unscharfe Datei weiter zeigen?

Ja. Haben Sie ein neues, scharfes Logo hochgeladen, sehen aber weiterhin das alte, ist vermutlich der Cache schuld. Browser, Cachingplugin oder ein Content Delivery Network (CDN) liefern die alte Kopie unter Umständen noch eine Weile aus.

1. Nutzen Sie zunächst die Leeren Funktion Ihres Cachingplugins.
2. Arbeiten Sie mit einem CDN, leeren Sie die Datei dort im eigenen Dashboard.
3. Öffnen Sie ein privates Browserfenster und prüfen Sie die Seite erneut.
4. Laden Sie die Datei notfalls unter einem neuen Namen hoch, damit keine Ebene die alte Kopie ausliefern kann.

Ein neuer Dateiname ist der zuverlässigste Weg, denn für jede Ebene bedeutet er eine neue Datei. Danach wählen Sie die neue Datei in der Logoeinstellung Ihres Themes aus.

Welche typischen Fehler lassen ein Logo unscharf bleiben?

Wir haben die Fehler gesammelt, die uns in der Praxis am häufigsten begegnen. Bleibt Ihr Logo unscharf, gehen Sie zuerst diese Liste durch, denn meist steckt einer davon dahinter.

• Das Logo nur als kleine PNG Datei in einfacher Größe hochladen.
• Das Logo als JPG speichern.
• Die Logohöhe im Theme größer einstellen als die Datei.
• Das Optimierungsplugin auch das Logo komprimieren lassen.
• Den separaten Platz für das mobile Logo leer lassen.
• Das breite Hauptlogo statt eines eigenen Favicons verwenden.
• Nach einer Änderung vergessen, den Cache zu leeren.

Die meisten Punkte beheben Sie in wenigen Minuten. Treffen allerdings mehrere gleichzeitig zu, beheben Sie sie einzeln und testen dazwischen. So sehen Sie, welche Änderung tatsächlich gewirkt hat, und vermeiden denselben Fehler beim nächsten Redesign.

Lohnen sich getrennte Logos für Mobilgeräte und Desktop?

In den meisten Fällen ja. Ein breites, horizontales Logo passt bequem in den Desktopkopf. Der mobile Kopfbereich ist dagegen schmal. Verkleinern Sie dasselbe Logo mobil, wird der Text unlesbar, und Besucher nehmen das oft als Unschärfe wahr.

Daher hilft eine kompaktere mobile Version, etwa nur die Bildmarke oder ein verkürzter Schriftzug. Viele Themes bieten dafür einen eigenen Platz. Sobald Sie ihn füllen, zeigt das Theme auf jedem Bildschirm die passende Version.

Nutzen Sie zwei Dateien, bereiten Sie beide nach denselben Regeln vor. Auch das mobile Logo sollte ein SVG sein oder mindestens in doppelter Anzeigegröße vorliegen. Sonst kehrt das Problem, das Sie am Desktop gelöst haben, mobil zurück.

Warum machen CSS Hintergrundbilder eigene Probleme?

Manche Themes binden das Logo oder das Kopfbild als CSS Hintergrund ein und nicht als HTML Bildelement. Dann greift srcset nicht, denn dieses Attribut gehört zum Bildelement. Der Browser lädt eine einzige Datei und streckt sie auf die Fläche.

Außerdem füllen Hintergrundbilder häufig den gesamten Bereich aus. Ändert sich das Seitenverhältnis des Bildschirms, schneidet der Browser einen Teil ab und vergrößert den Rest. Deshalb wirkt der Kopfbereich auf dem Smartphone zugleich beschnitten und weich.

Eine Möglichkeit ist eine CSS Funktion für Bildsätze, die je nach Pixeldichte verschiedene Dateien liefert; MDN beschreibt sie ausführlich. Dennoch ist ein echtes Bildelement für ein wichtiges Element wie das Logo besser, sowohl für die Schärfe als auch für die Barrierefreiheit, denn nur so erhält es einen Alternativtext.

Warum werden Screenshots und beschnittene Bilder nie richtig scharf?

Eine oft übersehene Ursache ist das Bild selbst. Schneiden Sie einen Screenshot vom Smartphone zu und vergrößern ihn, oder verwenden Sie eine komprimierte Datei aus sozialen Netzwerken, ist der Verlust bereits passiert. Keine Einstellung holt ihn zurück.

• Nehmen Sie das Bild immer aus der größten und am wenigsten komprimierten Quelle.
• Verwenden Sie Dateien aus Messengern nicht als Quelle, denn diese Apps verkleinern Bilder.
• Prüfen Sie nach dem Zuschneiden, ob die Breite noch über Ihrer Zielgröße liegt.
• Schneiden Sie das Logo nie aus einem Screenshot aus, sondern fordern Sie die Quelldatei an.

Kurz gesagt: Je sauberer die Quelle, desto schärfer das Ergebnis. Wer vor dem Einsatz die Pixelgröße einer Datei prüft, vermeidet die meisten späteren Probleme.

Rettet eine Vergrößerung mit KI ein unscharfes Logo?

Nur teilweise. Werkzeuge zur Bildvergrößerung füllen fehlende Pixel per Vorhersage auf, und bei Fotos ist das Ergebnis manchmal brauchbar. Für ein Logo ist das allerdings keine verlässliche Lösung, denn das Werkzeug kann Buchstabenformen und Markenfarben verändern.

Feine Buchstaben wirken danach zum Beispiel fetter, oder Ecken werden rund. Solche kleinen Abweichungen schaden der Markenkonsistenz. Fehlt also eine Quelldatei für Ihr Logo, ist eine Neuzeichnung als Vektor langfristig der solidere Weg.

Vergrößern Sie Fotos per KI, prüfen Sie das Ergebnis in voller Größe. Gesichter, Text und Muster können künstliche Details bekommen. In diesem Fall suchen Sie besser eine bessere Quelle, statt das Ergebnis zu veröffentlichen.

Wie und auf welchen Geräten testen Sie die Schärfe?

Ein Test an nur einem Bildschirm täuscht. Prüfen Sie deshalb in mindestens drei Umgebungen: an einem normalen Desktopbildschirm, an einem hochauflösenden Laptop oder iPhone und an einem Android Smartphone der Mittelklasse.

1. Öffnen Sie auf jedem Gerät die Startseite und mindestens eine Unterseite.
2. Betrachten Sie Logo, Menüsymbole und Titelbilder aus der Nähe.
3. Simulieren Sie in den Entwicklertools verschiedene Gerätepixelraten.
4. Vergleichen Sie die Breite der geladenen Datei mit der angezeigten Breite.
5. Notieren Sie das Ergebnis und wiederholen Sie den Test nach jeder Änderung.

So sehen Sie genau, welche Gerätegruppe betroffen ist. Mit Ihren Notizen wiederholen Sie die Prüfung außerdem schnell nach einem Update von Theme oder Plugin. Das ist der einfachste Weg, zurückkehrende Unschärfe früh zu erkennen.

Wie beheben Sie ein Logo unscharf Schritt für Schritt?

Die folgende Reihenfolge führt am schnellsten zur Lösung. Prüfen Sie nach jedem Schritt auf einem hochauflösenden Smartphone.

1. Suchen Sie die Vektorquelle des Logos und exportieren Sie sie als SVG.
2. Ist SVG nicht möglich, erstellen Sie ein PNG oder verlustfreies WebP in zwei bis drei facher Anzeigebreite.
3. Passen Sie den Logobereich im Theme an die Proportionen der Datei an.
4. Stellen Sie sicher, dass das Optimierungsplugin das Logo nicht erneut komprimiert.
5. Prüfen Sie bei Fotos, ob srcset und sizes zum echten Layout passen.
6. Bereiten Sie das Favicon separat als schlichte, quadratische Bildmarke vor.
7. Leeren Sie den Cache und vergleichen Sie das Ergebnis an Desktop und Smartphone.

Folglich löst auf den meisten Websites schon eine einzige Dateiänderung das Problem. Bindet das Theme das Logo allerdings fest im Code ein, oder unterscheidet sich das Layout auf jeder Seite, braucht eine dauerhafte Lösung Arbeit am Theme. Testen Sie die Änderung dann zuerst auf einer Testkopie, damit die Live Website keine überraschenden Layoutfehler bekommt.

Wann sollten Sie das Problem an Profis abgeben?

Die Logodatei auszutauschen schaffen die meisten selbst. Technisches Wissen braucht es dagegen, wenn das Theme falsche Werte für srcset erzeugt, wenn mehrere Plugins Bilder übereinander komprimieren oder wenn gar keine Quelldatei des Logos existiert.

Entdecken Sie Ihre Bilder ohne Erlaubnis auf anderen Websites, ist das ein eigenes Thema; unser Beitrag Bilder von Ihrer Website geklaut zeigt, was Sie tun können. Ebenso hilft Nachrichten aus dem Kontaktformular kommen nicht an, wenn Ihr Formular nichts mehr verschickt.

In unseren Projekten richten wir die Abläufe für Logo, Icons und Fotos von Anfang an nach der Pixeldichte aus, damit Bilder auch auf neuen Bildschirmen scharf bleiben. Außerdem legen wir für jede Bildart eigene Qualitätsregeln fest und schreiben eine kurze Uploadanleitung für Ihr Team. Möchten Sie Ihre Website auf dieser Grundlage neu aufbauen, erfahren Sie unter Website erstellen lassen, wie wir arbeiten.

Kurz gesagt: Das sollten Sie für scharfe Bilder beachten

• Die Hauptursache für Unschärfe ist eine Datei, die für die Pixeldichte zu klein ist.
• Nutzen Sie SVG für das Logo, sonst ein PNG in zwei bis dreifacher Größe.
• Speichern Sie das Logo nicht als JPG.
• Verwenden Sie für Fotos srcset mit korrektem sizes.
• Prüfen Sie die erneute Komprimierung durch CMS und Plugins.
• Bereiten Sie das Favicon separat und quadratisch vor.
• Leeren Sie nach jeder Änderung den Cache.

Setzen Sie diese Liste um, verschwindet die Beschwerde über ein Logo unscharf auf der Website weitgehend. Jede Website ist jedoch anders; prüfen Sie das Ergebnis deshalb immer auf einem echten Gerät.