Logo wird unscharf dargestellt

Hallo zusammen,

meine erstellte Seite http://www.lieblingsplatz-tiengen.de ist soweit fertig.

Ich habe allerdings ein letztes, kleines Problem, dass mich aber sehr stört. Und zwar wird das Logo, welches oben angezeigt werden soll, unscharf dargestellt.

Das Logo kann man direkt über das Template Menü hochladen. Dadurch muss ich aber die Größe auf 220 x 191 anpassen, was zur Unschärfe führt.

Ich habe das Logo jetzt gleichzeitig mal als Modul eingefügt. Dort ist das Logo scharf. Problem ist nur, dass es keine Modulposition gibt, welche oberhalb des Menüs liegt. Ich bekomme das Logo also nicht über das Menü, so wie das unscharfe Logo. (Info: Es geht mir dabei nur um die Darstellung am Desktop PC.)

Meine Frage ist jetzt: Gibt es eine Möglichkeit, dass ich das scharfe Logo (welches als Modul angelegt wurde) über das Menü bekomme? Oder gibt es eine Möglichkeit, das unscharfe Logo (welches direkt über das Template Menü hochgeladen wird) scharf zu bekommen?

Ich lasse jetzt mal beide Logos angezeigt, damit man den Unterschied sehen kann.

Vielen Dank schon einmal für etwaige Hilfe.

Zitat von Re:Later

Hm, bei mir ist das nicht unscharf und besser lesbar als das untere. Vielleicht mal den Browser-Cache löschen?

Bei mir wird das obere Bild auf allen Geräten unscharf angezeigt. (siehe Screenshot)

Unten so wie es sein soll.

Zitat von Dudlhofer

Die Unschärfe ist so marginal, dass man sie mit der Lupe suchen muss...

Hast Du denn das Original nicht in größerer Auflösung? Herunterskalieren gibt Dir ein deutlich besseres Ergebnis als hochskalieren.

Zitat von Elwood

Sind ja auch zwei unterschiedliche Bilder.

Den Unterschied kann man sehr gut mit 'Rechte Maustaste'- 'Grafik-Info anzeigen' sehen.

Ja das sind zwei unterschiedliche Bilder. Das untere hat eine große Auflösung. Nur wie gesagt kann ich das obere nicht in großer Auflösung hochladen, da es sonst auch so groß dargestellt wird. Ich muss es also auf die größe runterskalieren, wie es dargestellt werden soll.

Anders ist es ja beim unteren Logo. Das wurde als Modul angelegt und da kann ich ja das Logo mit der großen Auflösung nehmen und im Editor einfach klein ziehen.

Nur bekomme ich wie gesagt das untere Logo nicht übers Menü, da es keine Modulposition dafür gibt.

Zitat von Harmageddon

Also du willst das Logo in der kleinen Auflösung, bist aber mit dessen Schärfegrad unzufrieden? Hast du es mal probiert, wie es aussieht, wenn du es als .png statt .jpg abspeicherst? Das ist für Logos und alles andere mit klaren Kanten immer besser. Oder gleich als SVG, dann ist es beliebig skalierbar.

Ja genau. Also eigentlich muss die Auflösung des Logos ja größer sein. Es soll aber einfach in 200 x 200 dargestellt werden. Ich würde halt gerne das Logo als Modul anlegen, genau so wie ich das kleine Logo, welches schön scharf unten am Contentende der Seite angezeigt wird (Das ist eigentlich 1280 x 600, wird aber in 166 x 78 dargestellt, weil ich es einfach so klein gezogen habe im Editor). Dann hätte ich das Problem gelöst. Nur gibt es halt keine Modulposition die höher als das Menü liegt.

Das Problem ist, dass das original Logo eine .eps Datei ist. Ich habe aber das Problem, dass keines meiner Grafikprogramme (Lightroom und GIMP) diese Datei öffnen kann.

Nur in OpenOffice konnte ich die Datei öffnen. Dann musste ich davon einen Screenshot machen, um es als .jpg oder .png zu speichern. Beide Dateien sind aber bei der Größe 200 x 200 unscharf, was ja eigentlich auch nicht anders möglich ist. SVG habe ich in GIMP nicht gefunden.

Wenn es aber sonst keine Lösung gibt, lasse ich es einfach so. Stört mich zwar, den meisten wird es aber wohl eh nicht auffallen.

Zitat von firstlady

Das große hat >700kb und ist daher als Logo nicht brauchbar.

Du hast das Logo wahrscheinlich machen lassen? Kannst du den Grafiker nicht bitten, es in einem kleineren Format in guter Qualität zur Verfügung zu stellen?

Bei deinem Verfahren kommt es unweigerlich zu Verlusten, auch wenn ich sie nicht als dramatisch empfinde.

Dramatisch ist es nicht, trotzdem stört es mich. Es soll ja schließlich alles perfekt aussehen.

Ich habe jetzt mal nachgefragt, ob mir der Grafiker direkt das Logo in kleinem Format zuschicken kann. Da warte ich jetzt noch ab ob das klappt.

Falls nicht lasse ich es einfach so. Ich markiere hier dann auch das Thema als erledigt.

Vielen Dank für alle Antworten.

Zitat von Shuffle

Moin,

schick mir die Datei per PM zu, ich wandle diese für dich um.

Gruß Shuffle

Danke für das Angebot. Ich denke aber nicht, dass es was nützen wird. Ich habe jetzt nämlich vom Grafiker das Logo direkt als .png zugeschickt bekommen. Und es hat sich nichts geändert.

Auf meinen bisherigen Websites habe ich Logos immer als Modul angelegt. Und alle sind knackscharf. Leider ist es eben bei diesem Template nicht möglich ein Modul auf der Modulposition "Logo" zu erstellen. Und wie gesagt sind alle verfügbaren Modulpositionen unterhalb des Menüs. Ich will aber das Logo schon über dem Menü haben, da es so einfach besser aussieht.

Zitat von Elwood

Vielleicht auch eine Möglichkeit:

EasyImageResizer

Danke Elwood. Habe ich mal ausprobiert. Ich bin mir aber nicht ganz sicher was das Plugin macht und wie es funktioniert.

Hatte jedenfalls keinen Erfolg.

Zitat von anka

Das hat etwas mit dem Display (Retina, HiDPI) zu tun. Hier wird es etwas vereinfacht, dafür aber recht verständlich erklärt ("Was ist das "Retina"-Problem?").

Hier wird eine relativ einfache Lösung beschrieben ("Retina-Optimierung für das HTML-Element (img)"). Bei deinem Problem müsstest du die Grösse, in der das Logos tatsächlich angezeigt werden soll, einfach im CSS definieren:

1. Verwende ein Logo in doppelter Grössen (habe hier eins angehängt, weiss aber nicht, ob es passt)

2. Füge das hier ins CSS ein:

Code

.logo img {
max-width: 220px;
height: auto;
}

Alles anzeigen

Hallo Anka,

Danke für deine Antwort. Ich glaube das ist die Lösung. Ich habe jetzt das größere Logo drin und den Code in die Datei

template_rtl.css eingefügt. (Bin mir nicht sicher ob es dort rein muss)

Das Logo wird jetzt jedenfalls noch in voller Größe dargestellt.