Wie behebt man helle Kanten an PNGs mit geänderter Größe aus Illustrator?

Wie verhindern Sie, dass ein transparentes PNG-24-Bild beim Ändern der Größe helle Ränder bekommt, ohne dass Sie diese mithilfe der CSS-Regel „Kontrast optimieren“ von Webkit erzwingen müssen?

Erläuterung : Die Größenänderung des Bildes in Chrome führt zu helleren Linien innerhalb der Buchstaben und Formen in der Nähe der Ränder. Diese hellen Kanten machen das Bild eher gezackt als scharf, wenn es von seiner ursprünglichen Größe von 350 x 90 Pixel auf 200 x 50 Pixel verkleinert wird.

Hier ist ein besserer Screenshot des Problems:

Screenshot von

(Das Originalbild wurde mit „Für Web speichern“ in Illustrator erstellt.)

@Dominic: Die abgeschnittenen Teile stammen von mir, als ich den PNG-Fehler gescreent habe.
Kannst du ein bisschen mehr Informationen geben? Wie sieht es aus, wenn die Größe nicht geändert wird? Auf welche weißen Flecken beziehst du dich (ein vergrößerter Screenshot mit einigen Pfeilen würde funktionieren)?

Antworten (2)

Das hat mich auch so verrückt gemacht, dass ich mich anmelden musste, um darauf zu antworten, damit niemand sonst diese Frustration empfindet ...

Es scheint an dem Bildrenderer zu liegen, den der Browser verwendet, um die Größe dieser transparenten PNGs zu ändern, die ihm einen hellen Rand hinzufügen.

Ich habe festgestellt, dass das Hinzufügen der folgenden CSS-Eigenschaften zum Bildelement (oder, wenn es sich um ein Hintergrundbild handelt, das Element selbst) das Problem für mich in Chrome und Firefox behebt:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

Weitere Bildwiedergabeoptionen können Sie hier nachlesen .

Das von Ihnen gepostete Bild wurde abgeschnitten, weil Ihre Zeichenfläche kleiner war als das Bildmaterial in Illustrator.

Sie müssen entweder sicherstellen, dass Sie das Same for Web-Fenster nicht aktiviert haben . Clip to ArtboardOder Sie müssen sicherstellen, dass alle Grafiken auf die Zeichenfläche fallen.

Update nach Bearbeitung der Frage

Unter der Annahme, dass diese weißen Flecken nicht Teil des Originalbilds sind, würde ich vermuten, dass diese weißen Teile ein direktes Ergebnis eines Chrome-Rendering-Fehlers sind und es keine spezifische Möglichkeit gibt, nur das Chrome-Rendering zu korrigieren.

Ich habe die gesamte Frage geklärt und das Bild geändert.
Möchte der Downvoter das erklären?
Wie behebt man helle Kanten an PNGs mit geänderter Größe aus Illustrator?
AntwortenHierDatenschutz-Bestimmungen1y, 0v