Es betrifft sicher nicht nur Benutzer des Divi-Themes: Man macht sich viel Mühe mit der Erstellung eines Logos in Illustrator, Photoshop, Affinity Designer oder einem anderen Grafik- oder Illustrationsprogramm und dann lädt man es auf die Website und es sieht unscharf aus!
Was kann man tun, um ein unscharfes Logo zu vermeiden?
Für eine Unschärfe können mehrere Ursachen infrage kommen:
- Das Dateiformat wurde falsch gewählt.
- Das Dateiformat ist richtig, wurde aber mit falschen Einstellungen gewählt.
- Das Format und die Einstellungen stimmen, doch das Theme skaliert die Größe des Logos bzw. der Bilddatei und der Browser kann kein gutes Ergebnis mehr darstellen.
Bevor ich zu einer ultimativen Lösung komme, hier noch das normale Vorgehen:
Das richtige Dateiformat für eine Grafik bzw. Logo im Web
Für diesen Typ benutzt man am besten das Format „png“ (sprich ping). Auf keinen Fall jpg! Am besten in der Version mit 24 statt 8 Bit, damit auch eventuelle Schatten, Verläufe und Transparenzen im Browser gut dargestellt werden können.
Bei der Umwandlung in dieses Format wird meistens auch eine Größenänderung vorgenommen. Versuchen Sie dies zu vermeiden und legen das Logo gleich in der richtigen Web-Größe an.
Sie erstellen also zuerst das Logo normal in Illustrator (oder anderer Software für Illustrationen) und speichern es ab als .ai oder .eps. Dann speichern Sie es erneut unter anderem Namen (z. B. mit dem Zusatz „web“) und verringern dort die Größe in die entsprechende Pixelzahl, die für Ihr Theme vorgesehen ist.
So müssen Sie die Grafik nicht durch den Export in andere Abmessungen verkleinern lassen und verhindern Unschärfen!
Trotzdem kann es jetzt immer noch sein, dass Ihr Theme das Logo in der Größe ändert und der Browser eine Größenanpassung vornehmen muss – mit Qualitätsverlust natürlich.
Doch es geht noch einfacher – durch SVG!
SVG bedeutet Scalable Vector Graphics und erlaubt das verlustfreie Skalieren eines Objekts. Selbst das Vergrößern auf riesige Größen verursacht keine Unschärfen, da mit Vektoren gearbeitet wird.
Speichern Sie Ihr Logo also im SVG-Dateiformat ab:
Wählen Sie diese Einstellungen:
Mit einem Klick auf die Weltkugel unten in der Mitte öffnet sich Ihr Browser mit einer Voransicht.
WordPress-Plugin für die Nutzung von SVG
Wenn Sie die erstellte SVG-Logo-Datei auch in WordPress hochladen möchten, benötigen Sie noch ein bestimmtes Plugins. Denn WordPress sieht von sich aus keine Nutzung von SVG vor. Installieren Sie das Plugin SVG Support von Benbodhi.
Nach der Aktivierung müssen Sie normalerweise nichts weiter unternehmen.
Wechseln Sie nun in den Theme-Bereich Ihres Themes und laden an entsprechender Stelle das neue Logo hoch. Bei DIVI sieht das so aus:
Nach dem Speichern haben wir gleich ein viel besseres Ergebnis:
Hier noch das Logo als separate SVG-Datei, um die Schärfe besser zu sehen:
