Save for Web erzeugt verschwommene PNGs mit weißer Durchzeichnung

Ich habe ein Problem, das ich scheinbar nicht umgehen kann. Ich würde mich nicht als Grafikdesigner bezeichnen, da ich nur Photoshop und Illustrator in Bezug auf Webdesign verwende, also weiß ich genug, um gefährlich zu sein. Ich hatte in der Vergangenheit mehrfach ein Problem, wenn ich Save for Web verwende und ein Bild als PNG-24 speichere, es wird verschwommen und hat oft eine weiße Spur entlang der Innenkante von Teilen des Bildes. Ich bin mir nicht sicher, ob das Sinn macht, aber Sie können es hier mit dem Logo in Aktion sehen:

Beachten Sie, dass das graue Flugzeug im Hintergrund eine schwache weiße Spur hat. Ob Sie es glauben oder nicht, dies ist eines der besseren, da ich hier viel gelesen und verschiedene Dinge ausprobiert habe. Das letzte, was ich versucht habe, war, das Originalbild viermal so groß zu machen wie ich wollte, und sicherzustellen, dass es genau ohne halbe Pixel verkleinert wird. Kein Glück.

Im Dialogfeld "Für Web speichern" sieht alles scharf und ohne weiße Linien aus, und wenn ich auf die Schaltfläche "Vorschau" klicke, ist das resultierende Bild perfekt scharf.

Wenn ich das Bild von der Website in einem anderen Tab öffne, sieht der Text klarer aus, aber die weißen Linien auf dem Flugzeug sind immer noch da. Ich vermute also, dass Wordpress einiges davon verursacht, aber ich bin mir nicht sicher, wie ich es beheben kann. Ich habe auch versucht, das Bild in der Größe hochzuladen, die ich verwenden möchte, also 120 Pixel hoch.

Hat jemand Tipps?

Screenshot wie gewünscht posten, aber hier kaum sichtbar:

Geben Sie hier die Bildbeschreibung ein

Könnten Sie einen aktuellen Screenshot posten, auf dem das Problem sichtbar ist? Auf meinem W7, Firefox 29.0.1, befindet sich das Logo auf einem weißen Hintergrund, wodurch die Ablaufverfolgung unsichtbar wird.
Ich habe einen Screenshot hinzugefügt, aber die Verfolgung befindet sich tatsächlich auf dem grauen Teil des Flugzeugs im Hintergrund. Es ist wie eine innere Spur, in Ermangelung eines besseren Wortes. Es ist eine schwache weiße Linie direkt am Rand des Flugzeugs.
Verwenden Sie "Für Web speichern" von Illustrator? Und wenn ja, hat Ihr Logo einen transparenten Hintergrund?
Ich habe versucht, "Für Web speichern" von Illustrator zu verwenden, aber die Version, die jetzt vorhanden ist, stammt von der Funktion "Für Web speichern" in Photoshop. Ich habe ähnliche Ergebnisse mit beiden. und es hat einen transparenten Hintergrund.

Antworten (1)

Dies klingt eher nach einem Browser-Rendering-Problem als nach der Methode, mit der Sie das Bild aus Photoshop exportieren (das Bild sieht in Chrome perfekt aus).

Braucht Ihr PNG eigentlich einen transparenten Hintergrund? Sie können für das Web speichern, wenn das Kontrollkästchen „Transparent“ deaktiviert ist, um einen durchgehend weißen Hintergrund zu erhalten.

Da Ihr Quellbild die gleiche Größe hat, können Sie schließlich die ursprünglich hochgeladene Version des Logos (Synergy-316_120.png) anstelle des von Wordpress angepassten Bildes (Synergy-316_120-316x120.png) verwenden. Es besteht die Möglichkeit, dass Wordpress Ihr Bild während des Upload-/Größenänderungs-/Komprimierungsprozesses schlecht komprimiert hat.

Das ist seltsam, weil ich Chrome verwende, aber ich habe es in Firefox hochgezogen, und es sieht dort großartig aus. PFUI! Ich brauche eigentlich keinen transparenten Hintergrund, also habe ich als PNG ohne Transparenz gespeichert und das Flugzeug hat keine weiße Spur mehr. In Chrom ist es jedoch immer noch verschwommen, also muss ich das herausfinden. Was das in der Größe geänderte Bild betrifft, denke ich, dass mein Thema dies tut, obwohl das von mir hochgeladene Bild die gewünschte Größe hat. Dem muss ich auf den Grund gehen.
Ok, ich habe eine viel größere Version in Photoshop erstellt und dann die Größe im Dialogfeld "Für Web speichern" reduziert und die Transparenz entfernt. Jetzt sieht es in Chrom und Firefox knackig aus. Vielen Dank für Ihre Hilfe!