No estoy seguro de si se debe al antialiasing o a otra cosa, pero el logotipo y el ícono de Twitter en mi sitio se ven borrosos, especialmente en dispositivos móviles: http://scarletstringstudios.com/
La fuente del logotipo era un PSD de 512x512 que cambié de tamaño e intenté guardar como PNG y JPG. También armé un vector AI del logotipo solo para probar, pero el PNG exportado todavía salió como lo ves.
Definitivamente he visto íconos más pequeños y nítidos en sitios web antes. ¿Por qué la reducción de escala de mi imagen hace que se vea mal?
Incluso intenté usar un SVG como img src, y eso funcionó, pero luego mi navegador mostró la fuente incorrecta para el logotipo.
Una vez que llegas a ese tamaño, en realidad solo hay dos opciones:
(a) Ingrese allí con su editor de imágenes de empuje de píxeles favorito y modifique los píxeles individualmente. Esto puede significar (y probablemente lo hará) distorsionar ligeramente la imagen del original, pero tener todo alineado en una cuadrícula de píxeles significa que las cosas serán nítidas. O;
(b) Cree el ícono como un glifo de fuente, complete con sugerencias para la representación de subpíxeles, etc., y deje que el navegador se preocupe por la alineación de la cuadrícula de píxeles. Esto es un poco más arriesgado, ya que la alineación puede aterrizar en una tríada RGB de una manera que introduce artefactos de color no deseados en los bordes, pero eso es más preocupante cuando está diseñando para varios tamaños.
Honestamente, el empuje de píxeles es más fácil si está trabajando en un solo elemento. Por lo general, puede trabajar cómodamente en una cuadrícula enorme mientras mira una miniatura en otro panel. (Sí, hay modos de escalado que pueden dar como resultado imágenes nítidas, pero no tiene control sobre la distorsión que necesariamente ocurrirá como parte del proceso. Matemáticamente correcto no es lo mismo que visualmente agradable).
Su icono es problemático. Presenta detalles demasiado finos que no se adaptan bien al tamaño previsto. Aumente el peso de la fuente en 'estudios'.
El problema principal parece ser que tiene una pantalla de alta resolución y activos de píxeles de resolución estándar. Es por eso que los píxeles se ven borrosos y SVG se ve mejor. Una fuente de iconos personalizada también funcionaría. O sirva activos de píxeles en doble resolución.
Yorik