Warum sind Text und Begrenzungen/Kanten von Grafiken in diesem Bild verschwommen, und wie kann ich das beheben?

Ihr Originalbild ("8SLgo.png", in Ihrer Frage mit "hier ist das Bild" gekennzeichnet) weist bereits die Unschärfe zwischen Quadraten und unscharfem Text auf. Hier ist es, 5x vergrößert und vor einem weißen Hintergrund komponiert:

Für mich sieht es so aus, als ob Ihr Freund das Bild in einer kleineren Größe erstellt und es dann auf die Größe 110 x 130 vergrößert hat, bevor er es Ihnen sendet. Wenn die Vergrößerung auf die übliche Weise durchgeführt würde, würde dies interpolierte (verschwommene) Pixel zwischen den durchgehenden Farbbereichen und um die Ränder der Buchstaben erzeugen.

Es wäre schwierig, wenn überhaupt möglich, den Schaden an dem Image, das Sie haben, rückgängig zu machen. Stattdessen müssten Sie zum Anfang zurückgehen und das Bild in der Größe erstellen, die Sie ursprünglich wollten, und die entsprechende Schriftgröße verwenden.

Beachten Sie, dass ich durch die 5-fache Vergrößerung des Bildes keine zusätzliche Unschärfe eingeführt habe, da ich eine "Sampling" -Methode und keine "Skalierung" verwendet habe, um einfach die einzelnen Pixel zu vergrößern.

BEARBEITEN: Nachdem ich diese Antwort gesendet hatte, wurde die Datei "Hier ist das Bild" durch ein GIF mit etwas größeren Abmessungen ersetzt. Hier ist das Bild, ebenfalls 5-fach vergrößert. Beachten Sie, wie anders, aber immer noch schlecht, der Text aussieht und dass die Unschärfe zwischen den Volltonbereichen größer ist, 3 Pixel breit statt 1 Pixel breit. Diese Unterschiede sind wahrscheinlich auf die zweite Größenänderung von dem bereits unscharfen PNG auf GIF zurückzuführen (Größe von 110 x 130 auf 120 x 153 geändert).

Ok, es gibt mehrere Möglichkeiten. Sie können versuchen, die Ursache Ihres Problems anhand einer Liste möglicher Ursachen zu identifizieren, oder direkt zu einem anderen Ansatz springen, den ich vorschlagen würde.

Liste möglicher Ursachen

1. Mit welcher Software erstellen Sie dieses Logo? Wenn Sie Vektor-SW wie Illustrator verwenden, würde ich vorschlagen, sie in Photoshop neu zu erstellen, da Regeln, die normalerweise bedeuten, dass das Logo immer ein Vektor sein sollte, in Ihrem Fall wahrscheinlich nicht zutreffen. Dies ist nicht so häufig, aber auf dem Weg vom Vektor zum Raster kann das Bild etwas verzerrt werden.
2. Welche Art von Anti-Aliasing verwenden Sie für Text? Ich würde mit Crisp gehen.
3. Und am wichtigsten, sind Sie sicher, dass Ihr Bildelement, das das Logo in Ihrem WP-Design enthält, pixelgenau dieselbe Größe hat wie das aus PS/Illustrator exportierte Bild? Denken Sie daran, dass selbst kleinste Dimensionsänderungen seltsame Verzerrungen verursachen können.
4. Überlegen Sie abschließend, wie Ihr Logo in die WP-Website eingefügt wird. Ist es in Ihrem benutzerdefinierten Design als Link zu einer per FTP hochgeladenen Datei fest codiert, oder haben Sie es mit einer WP-Funktion hochgeladen, die vielleicht in Ihrem Design vorinstalliert ist? Der Punkt ist, ist es möglich, dass Ihr Logobild auf dem Weg zum Server noch etwas mehr komprimiert wurde? Bedenken Sie dies und wenn Sie denken, dass es doppelt komprimiert sein könnte, versuchen Sie, es über FTP hochzuladen und Ihr Design zu ändern, es sollte ziemlich einfach sein.

Neuer Ansatz

Dies alles basiert auf der Annahme, dass Sie auf Ihrer Website ein Logo im Rasterformat verwenden. Aber Sie können diese Angelegenheit von einem ganz anderen Blickwinkel aus angehen. Sie können Ihr Logo einfach in einer Vektorsoftware wie Illustrator entwerfen und es dann auch im Vektorformat auf der Website verwenden. Ich verwende das Logo im .svg-Format auf der WP-Site ohne Probleme. Exportieren Sie es einfach aus Illustratr im SVG-Format und verwenden Sie es dann wie JPEG. <img src="vectorlogo.svg" class="mylogo" />sollte gut funktionieren. Denken Sie nur daran, die Abmessungen Ihres Logos wegen des Vektorformats in CSS festzulegen. Auf diese Weise wird Ihr Logo auf allen Displays, einschließlich hochauflösender Displays wie Retina usw., sauber und gestochen scharf angezeigt.

Persönlich würde ich zuerst versuchen, das Logo im Vektorformat zu implementieren und die Liste nur dann durchzugehen, wenn der Vektor fehlschlägt. Wenn Sie es zuerst mit Vektor versuchen, können Sie einige Zeit sparen, wenn Sie Probleme mit meiner Liste identifizieren, und ich kann mir in diesem Fall keine Nachteile der Verwendung von svg anstelle von jpeg oder png vorstellen.

Ich hoffe, dies kann Ihnen helfen, Ihr Problem zu lösen oder zumindest mögliche Ursachen besser zu verstehen.

Ihr Beispiel-GIF

Hier ist ein Bild, das in Photoshop erstellt wurde, aber genau in der erforderlichen Skalierung (nicht neu berechnet) und Text-Antialiasing auf "scharf" eingestellt ist - als PNG 24 gespeichert. Offensichtlich weiß ich nicht, welche Schriftart verwendet wurde, und deshalb habe ich Trajan Pro verwendet was ähnlich aussieht. Das Ergebnis ist viel schärfer als Ihr Beispiel.

Wenn Ihr Bild vor dem Hochladen auf Ihre Website scharf aussieht, findet möglicherweise eine zusätzliche Komprimierung statt, wie andere hier vorgeschlagen haben.

Verwenden Sie eine webtaugliche Palette, das hilft beim Dithering an den Rändern