Das Speichern von Bildern im PNG-Format in Photoshop macht es verschwommen, wenn sie auf Websites verwendet werden

Wenn ich PNG-Bilder für das Web in Photoshop speichere, werden die Kanten unscharf. Ich möchte diese PNGs auf mobilen Websites verwenden:

Geben Sie hier die Bildbeschreibung ein

Irgendeine Lösung dafür?

Beachten Sie, dass einige mobile Browser und Apps Ihr Bild hinter den Kulissen skalieren. Stellen Sie sicher, dass der Browser das Bild nicht streckt.
Um den Kommentar von Horatio zu vertiefen, stellen Sie Ihre Bildbreite und -höhe immer genau so ein wie Ihre Bildabmessungen. Wenn Sie Retina-Unterstützung möchten, stellen Sie es genau auf die Hälfte ein, damit der Browser weniger Interpretation erfordert. Dies ist schwierig, wenn Sie flüssige Bilder machen, aber für ein Symbol sollte dies nicht der Fall sein.

Antworten (4)

Wenn Sie Formen/Vektoren verwenden, versuchen Sie, sie auf das nächste Pixel auszurichten. PS verwendet Antialiasing, um es abzurunden. Wenn Ihre Form- / Vektorlinien also Subpixel sind, wird am Rand ein halbtransparentes Pixel erstellt, um diese „halbe Strecke zwischen 2 Pixeln“ darzustellen.

Dies ist auch ein häufiges Problem beim Verkleinern eines Bildes. Es hilft, die Originalgröße als Vielfaches der kleineren beizubehalten. Machen Sie es x2 oder x4, um beim Verkleinern sauberere Kanten zu erhalten.

Ich verwende Vektordateien von Illustrator und wechsle dann zu PNG. Ich habe das PNG x2 gemacht. Jetzt sieht es gut aus.
Bei so kleinen Bildern haben Sie nicht viele Pixel, mit denen Sie arbeiten können. Es hilft wirklich, in die Nähe zu zoomen und Ihre Kurve / Vektoren ein wenig zu verschieben. Wenn Sie sie mit Pixelgitterkanten ausrichten, erhalten Sie das beste und sauberste Ergebnis.

Das Bild ist derzeit 37 x 25 groß. Versuchen Sie, es in einem Seitenverhältnis oder einer Leinwand mit geraden Zahlen zu speichern. Wie 42x28

Das hat nichts mit dem Problem zu tun.

Wie beschneidest du die besagten Bilder? Wenn Sie das Lasso verwenden, stellen Sie sicher, dass in der oberen Symbolleiste kein Federwert eingestellt ist.

Ich verwende Vektordateien von Illustrator und wechsle dann zu PNG

Vielleicht ist die Auflösung Ihrer PNG-Datei zu hoch für eine mobile Website. Versuchen Sie, die Auflösung auf die Größe zu reduzieren, die Sie auf Ihrer Website verwenden. Konvertieren Sie es andernfalls in eine .svg-Datei, da es auf dem Telefon eine bessere Qualität hat. Ich hoffe, das wird Ihnen weiterhelfen.

Das Speichern von Bildern im PNG-Format in Photoshop macht es verschwommen, wenn sie auf Websites verwendet werden
AntwortenHierDatenschutz-Bestimmungen1y, 0v