Illustrator PNG mit Transparenz Export - Weißer Umriss im Web, wenn nicht 100%?

Ich habe eine Vektorgrafik in Illustrator CC erstellt und mit "Für Web speichern" ein transparentes PNG davon erstellt. Wenn es jedoch auf meiner Website gerendert wird, fügt es einen schwachen hellen Umriss um den grauen Kreis im beigefügten Beispiel-Screenshot hinzu. Beachten Sie jedoch, dass es nur angezeigt wird, wenn die Größe des Bildes geändert wird (der Container wurde kleiner, sodass das Bild verkleinert wurde).

Bild bei 100 %, kein weißer Umriss – schön und scharf:

Bild bei 100

Bild auf 95 % herunterskaliert (oder irgendein Prozentwert außer 100), Artefaktumriss, der es verschwommen aussehen lässt:

Bildgröße geändert

Ich hatte dieses Problem noch nie und habe versucht, die Zeichenfläche auf ganze px-Beträge anzupassen, das Farbprofil zu entfernen, die Rastertransparenzeinstellungen zu ändern, zwischen cmyk- und rgb-Farbmodi umzuschalten, die Konvertierung in sRGB zu deaktivieren und eine Vielzahl anderer Optimierungen vorzunehmen I Ich vergesse es im Moment, aber das ist ziemlich frustrierend und ich hoffe, dass diese wunderbare Community einen Einblick geben kann.

Welche Anti-Aliasing-Methode wählen Sie?
Ich kenne die Gründe nicht, warum dies bei der Online-Größenänderung der Fall ist, aber ich habe das auch erlebt. Könnte browserbasiert sein. Das Beste ist, Ihr Bild in genau der Größe zu haben, die Sie für das Web benötigen, und das Bild wird auch etwas heller sein. Vielleicht könnte dieser Thread hilfreich sein: stackoverflow.com/questions/9945363/…
Speichern Sie es in PNG-8 oder PNG-24?
Speichern als PNG-24.
Es ist plausibel , dass etwas in der Kette die Auflösung des Alphakanals verändert. Ich weiß zum Beispiel, dass ältere PHP-GD-Routinen intern 7-Bit-Alpha verwenden: Die Implikation ist, dass Sie die Farbpräzision bei Transparenz verlieren, da es nur 128 mögliche Graustufen gibt.

Antworten (3)

Sie haben eine zentrale Tatsache über Pixelbilder entdeckt. Es gibt keine ungefärbten Pixel (transparent bedeutet nur, dass Farbe verborgen ist). Alle Pixel haben Farbe, auch transparente. Wenn Sie eine Interpolation des Bildes implementieren, müssen Sie unweigerlich Pixel in den transparenten Bereichen abtasten.

Naive Implementierungen interpolieren jeden Kanal separat, sodass die Farbe des transparenten Bereichs durch den Prozess fließt, da Ihr Bild in transparenten Pixeln tatsächlich weiß ist. Selbst eine nicht naive Implementierung wird manchmal große Probleme haben, weil es einfach verdammt schwer ist, es perfekt richtig zu machen.

Es gibt 2 Möglichkeiten, dies zu lösen.

  1. Nicht skalieren, das ist ein Kinderspiel
  2. Färben Sie die transparenten Pixel mit der Farbe der Randpixel. Dies ist jedoch viel schwieriger, als es sich anhört. Da Ihre Werkzeuge dies nicht ohne VIEL zusätzliche Arbeit und Fluchen für Sie erledigen. Es besteht immer noch die Möglichkeit, dass es Ihnen nicht viel hilft.

Stellen Sie im Einstellungsfenster: Bearbeiten > Einstellungen > Allgemein oder cmd+k sicher, dass Anti-Aliasing ausgewählt ist. Es wird exportierte PNG-24-Dateien gut glätten. Stellen Sie außerdem sicher, dass Sie png-24 verwenden, wie oben vorgeschlagen, und wenn Sie für das Web speichern, dass Sie Kunst optimiert ausgewählt haben (im Dropdown-Menü im Bildgrößenmenü).

Anti-Aliasing ist aktiviert.

Dies liegt daran, dass Sie sich auf den Browser verlassen, um die Größe Ihres Bildes zu ändern.

Es gibt einige Möglichkeiten, das Problem mit CSS zu umgehen - ich denke ms-interpolation-mode: nearest-neighbor;für den Internet Explorer und image-rendering: -moz-crisp-edges;für Firefox, bei Chrome, Safari oder anderen bin ich mir jedoch nicht sicher. Sie sollten danach im Stapelüberlauf suchen oder fragen.

Die einzige Möglichkeit, dies zu 100 % zu vermeiden, besteht darin, das PNG in der richtigen Größe zu speichern.

Hallo Cai, willkommen bei GDSE und danke für deine Antwort. Wenn Sie Fragen haben, wenden Sie sich bitte an das Hilfezentrum oder pingen Sie einen von uns im Grafikdesign-Chat an , sobald Ihr Ruf ausreichend ist (20). Tragen Sie weiter bei und genießen Sie die Seite!
Illustrator PNG mit Transparenz Export - Weißer Umriss im Web, wenn nicht 100%?
AntwortenHierDatenschutz-Bestimmungen1y, 0v