Ich bin mir nicht sicher, ob es an Antialiasing oder etwas anderem liegt, aber das Logo und das Twitter-Symbol auf meiner Website sehen verschwommen aus, besonders auf Mobilgeräten: http://scarletstringstudios.com/
Die Logoquelle war eine 512 x 512 PSD, deren Größe ich geändert und versucht habe, sowohl als PNG als auch als JPG zu speichern. Ich habe auch nur zum Testen einen AI-Vektor des Logos zusammengestellt, aber das exportierte PNG kam immer noch so heraus, wie Sie es sehen.
Ich habe definitiv schon früher kleinere, schärfere Symbole auf Websites gesehen. Warum sieht das Herunterskalieren meines Bildes schlecht aus?
Ich habe sogar versucht, ein SVG als img src zu verwenden, und das hat irgendwie funktioniert, aber dann hat mein Browser die falsche Schriftart für das Logo gerendert.
Sobald Sie diese Größe erreicht haben, gibt es wirklich nur zwei Möglichkeiten:
(a) Steigen Sie mit Ihrem bevorzugten pixelverschiebenden Bildeditor ein und optimieren Sie die Pixel einzeln. Dies kann (und wird wahrscheinlich) bedeuten, dass das Bild gegenüber dem Original sehr leicht verzerrt wird, aber wenn alles auf einem Pixelraster ausgerichtet ist, werden die Dinge scharf. Oder;
(b) Erstellen Sie das Symbol als Schriftglyphe, komplett mit Hinweisen für Subpixel-Rendering und so weiter, und lassen Sie den Browser sich um die Ausrichtung des Pixelgitters kümmern. Dies ist etwas riskanter, da die Ausrichtung auf einer Weise auf einer RGB-Triade landen kann, die unbeabsichtigte Farbartefakte an den Rändern einführt - aber das ist eher ein Problem, wenn Sie für mehrere Größen entwerfen.
Ehrlich gesagt ist das Pixel-Pushing einfacher, wenn Sie an einem einzelnen Element arbeiten. Sie können normalerweise bequem an einem riesigen Raster arbeiten, während Sie ein Miniaturbild in einem anderen Bedienfeld betrachten. (Ja, es gibt Skalierungsmodi, die zu gestochen scharfen Bildern führen können, aber Sie haben keine Kontrolle über die Verzerrung, die zwangsläufig als Teil des Prozesses auftreten wird. Mathematisch korrekt ist nicht dasselbe wie optisch ansprechend.)
Ihr Symbol ist problematisch. Es weist zu feine Details auf, die sich nicht gut auf die beabsichtigte Größe skalieren lassen. Erhöhen Sie die Schriftstärke auf „Studios“.
Das Hauptproblem scheint zu sein, dass Sie ein hochauflösendes Display und Pixel-Assets in Standardauflösung haben. Deshalb sehen Pixel verschwommen aus und SVG sieht besser aus. Eine benutzerdefinierte Schriftart für Symbole würde auch funktionieren. Oder stellen Sie Pixel-Assets in doppelter Auflösung bereit.
Jorik