Я не уверен, связано ли это со сглаживанием или с чем-то еще, но логотип и значок Twitter на моем сайте выглядят размытыми, особенно на мобильных устройствах: http://scarletstringstudios.com/
В качестве источника логотипа использовался PSD-файл размером 512x512, размер которого я изменил и попытался сохранить как в формате PNG, так и в формате JPG. Я также собрал AI-вектор логотипа просто для проверки, но экспортированный PNG все равно получился, как вы его видите.
Я определенно видел более мелкие и четкие значки на веб-сайтах раньше. Почему уменьшение масштаба моего изображения приводит к тому, что оно выглядит плохо?
Я даже пытался использовать SVG в качестве img src, и это сработало, но затем мой браузер отобразил неправильный шрифт для логотипа.
Как только вы дойдете до этого размера, на самом деле есть только два варианта:
(a) Зайдите туда с помощью своего любимого графического редактора с поддержкой пикселей и индивидуально настройте пиксели. Это может (и, вероятно, будет) означать очень небольшое искажение изображения по сравнению с оригиналом, но если все выровнено по пиксельной сетке, это означает, что все будет четким. Или;
(b) Создайте значок в виде глифа шрифта, дополненного подсказками для субпиксельного рендеринга и т. д., и позвольте браузеру беспокоиться о выравнивании пиксельной сетки. Это несколько более рискованно, так как выравнивание может привести к триаде RGB таким образом, что появятся непреднамеренные цветовые артефакты по краям, но это больше беспокоит, когда вы разрабатываете для нескольких размеров.
Честно говоря, подталкивание пикселей проще, если вы работаете над одним элементом. Обычно вы можете комфортно работать с огромной сеткой, наблюдая за миниатюрой на другой панели. (Да, существуют режимы масштабирования, которые могут привести к получению четких изображений, но вы не можете контролировать искажения, которые обязательно возникнут в ходе процесса. Математически правильно — это не то же самое, что визуально приятно.)
Ваш значок проблематичен. Он имеет слишком мелкие детали, которые плохо масштабируются до предполагаемого размера. Увеличьте вес шрифта на «студиях».
Основная проблема заключается в том, что у вас есть дисплей с высоким разрешением и пиксельные активы со стандартным разрешением. Вот почему пиксели выглядят размытыми, а SVG выглядит лучше. Пользовательский шрифт для значков тоже подойдет. Или подавайте пиксельные активы в двойном разрешении.
Йорик