1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Logo leicht unscharf trotz exakten Maßen

Dieses Thema im Forum "Design" wurde erstellt von pinkabelle, 20. Juli 2017.

  1. pinkabelle

    pinkabelle Member

    Registriert seit:
    3. April 2017
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo liebe Leute,

    ich habe bei der Webseite http://www.upnswutschimnorden.de/ das Logo eingefügt. Als Theme nutze ich Activello, WP 4.8. Das Bild ist als .png Datei hochgeladen mit 400x200px. Activello selbst gibt auch die Maße 400x200px vor (hab in der functions.php nachgesehen).

    <img src="http://www.upnswutschimnorden.de/wp-content/uploads/2017/07/Up-n-Swutsch-im-Norden-Logo-400-x-200.png" class="custom-logo" alt="Up'n Swutsch im Norden" itemprop="logo" width="400" height="200">

    Dennoch erscheint das Logo leicht unscharf. Mein Ziel ist einfach, dieses Logo schärfer zu kriegen. Ich recherchiere seit 2 Tagen in Foren und Blogs nach Lösungen, aber meistens gehts ja darum, dass die falschen Maße fürs Bild verwendet werden, oder das Wordpress die Bilder nach dem Upload skaliert und es daran liegt. Aber da ja bei mir die Maße identisch sind, weiß ich nicht was ich noch machen kann. Woher dann die Unschärfe, oder übersehe ich hier was wesentliches?

    Mir ist klar, das .png Dateien nicht so scharf darstellen wie z.B. .svg's. Ich habe versucht über das Plugin Safe SVG und auch SVG Support das Hochladen und Einfügen von .svg's möglich zu machen, allerdings wird mir die Logo.svg dann in der Mediathek nicht angezeigt, da ist nur ein "graues Bild" und beim Einfügen kommt die Fehlermeldung "Konnte nicht eingefügt werden". Auch mit dem Einfügen eines php Codes in die functions.php hat es nicht funktioniert (nach dieser Anleitung). Dachte vielleicht das wäre eine Alternative, aber wie gesagt, es funktioniert auch nicht.

    Ich wäre für Hilfe sehr dankbar.

    LG, Jasmin
     
  2. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Kurz vorab: Das halte ich für ein Gerücht.

    Bei mir ist das Logo ehrlich gesagt perfekt scharf. Auch in unterschiedlichen Browsern.

    Aber ich habe ein Vermutung... Du verwendest nicht zufällig ein Retina-Gerät?
    Falls ja, liegt da das Problem. Für Retina musst du quasi immer doppelt so große Abmessungen verwenden, wie das Bild später dargestellt werden soll (in diesem Fall also 800x400px).

    Edit: Du könntest die Grafik alternativ auch einfach direkt als SVG einfügen (also nicht über die Mediathek, sondern durch anlegen eines Child-Themes und bearbeiten der entsprechenden Theme Dateien (vermutlich header.php). Bei SVG Dateien besteht das Retina-Skalierungs-Problem nicht.
     
    #2 danielgoehr, 20. Juli 2017
    Zuletzt bearbeitet: 20. Juli 2017
  3. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.684
    Zustimmungen:
    1.786
    Am Rande bemerkt: Falls es nicht daran liegt, ist es manchmal die Browser-Skalierung, die nicht auf 100% steht, das führt ggf. auch zu den interessantesten Effekten.
     
  4. pinkabelle

    pinkabelle Member

    Registriert seit:
    3. April 2017
    Beiträge:
    5
    Zustimmungen:
    0
    Danke für eure Antworten.

    Nein ich habe kein Retina-Display, daran kann es also nicht liegen. @daniel: Bei dir erscheint es also scharf? Das ist ja eigentlich gut und das was ich möchte.

    Ich habe mir die Seite auch auf verschiedenen Geräten angeschaut. Beim Smartphone (Sony Xperia Z) sieht es auch etwas schärfer aus, als auf dem Laptop. Das könnte ja mit der Browserskalierung zusammenhängen.

    Also mir stellt sich jetzt die Frage: Ist die optimale Schärfe jetzt erreicht? Oder kann ich noch irgendwas machen, dass es schärfer erscheint? Es geht mir ja vor Allem darum, dass Besucher der Seite kein unscharfes Logo vorgesetzt bekommen, wenn es nur bei mir leicht unscharf angezeigt wird, kann ich damit leben. Was meint ihr?
     
  5. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Das ist jetzt schwer zu beantworten. Ich empfinde es als scharf. Vielleicht siehst du das selbe und findest es unscharf?

    Mach doch mal einen Screenshot vom original Bild und der Darstellung, wie du sie im Browser siehst. Dann kann man besser beurteilen, was du mit unscharf meinst.

    Ansonsten, wenn die Grafik ohnehin als Vektor-Datei vorliegt, versuch meinen zweiten Vorschlag.

    Edit:
    Das es auf dem Xperia Z schärfer aussieht ist eigentlich unlogisch. Durch die Pixeldichte müsste es eigentlich unschärfer sein.
     
    #5 danielgoehr, 21. Juli 2017
    Zuletzt bearbeitet: 21. Juli 2017
  6. pinkabelle

    pinkabelle Member

    Registriert seit:
    3. April 2017
    Beiträge:
    5
    Zustimmungen:
    0
    Hm, ja das ist die Frage. Ich habe ein Screenshot gemacht und es hier hochgeladen:

    http://www.upnswutschimnorden.de/wp-content/uploads/2017/07/logo_meinesicht.png

    Ich würd deinen Vorschlag mit der svg ja gern probieren. Hab das Childtheme bereits angelegt (funktioniert auch) und die header.php aus dem elterntheme reinkopiert. Ich weiß allerdings nicht, welchen Code ich jetzt einfügen und wo ich die svg logo datei uploaden muss. -.-

    ---------------------
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    --------------------------------------
     

    Anhänge:

    #6 pinkabelle, 21. Juli 2017
    Zuletzt von einem Moderator bearbeitet: 21. Juli 2017
  7. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.684
    Zustimmungen:
    1.786
    Versuche mal, die Browserskalierung auf 100% zu stellen, in Firefox z.B. mit der Tastenkombination "Strg" und "0" (Null). lt. Screenshot "vergrössert" der Browser derzeit die Seite.
     
  8. pinkabelle

    pinkabelle Member

    Registriert seit:
    3. April 2017
    Beiträge:
    5
    Zustimmungen:
    0
    Das habe ich gemacht, bevor ich das Screenshot aufgenommen habe. Und gerade nochmal überprüft. Also daran kann es denke ich jetzt eigentlich nicht mehr liegen. Mal ein ganz anderer Ansatz, kann es sein dass meine Bildschirmeinstellungen oder Grafikeinstellungen vom Laptop irgendwie nicht optimal sind?
    Den Anhang 17397 betrachten
     
  9. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Der Anhang funktioniert bei mir leider nicht.

    Wenn du das Logo direkt als svg einfügen willst, lädst du am besten das svg in das Child-Theme-Verzeichnis. Dort kannst du (falls nicht eh schon vorhanden) z.B. ein Verzeichnis "images" erstellen.

    Dann ersetzt du in der header.php das div mit der id "logo" gegen folgenden Code:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dadurch "deaktivierst" du die Logo-Verwaltung deines Theme und ersetzt sie durch eine Datei aus deinem Theme-Verzeichnis (in diesem Fall die Datei logo.svg im Unterverzeichnis images).
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden