Сохранение изображений в формате png в Photoshop делает их размытыми при использовании на веб-сайтах.

Когда я сохраняю изображения PNG для Интернета в Photoshop, они становятся размытыми по краям. Я хочу использовать эти PNG на мобильных сайтах:

введите описание изображения здесь

Любое решение для этого?

обратите внимание, что некоторые мобильные браузеры и приложения будут масштабировать ваше изображение за кулисами. Убедитесь, что браузер не растягивает изображение.
Чтобы уточнить комментарий Горацио, всегда устанавливайте ширину и высоту изображения точно такими же, как размеры вашего изображения. Если вы хотите сделать поддержку сетчатки, установите ее ровно наполовину, чтобы браузеру требовалось меньше интерпретаций. Это сложно, если вы делаете плавные изображения, но для значка это не должно быть так.

Ответы (4)

Если вы используете фигуры/векторы, попробуйте выровнять их до ближайшего пикселя. PS будет использовать сглаживание, чтобы округлить его, поэтому, если ваши линии формы / вектора являются субпиксельными, он сделает полупрозрачный пиксель на краю, чтобы представить эту «половину между 2 пикселями».

Это также распространенная проблема при уменьшении размера изображения. Это помогает сохранить исходный размер как кратное меньшему. Сделайте его x2 или x4, чтобы получить более четкие края при уменьшении размера.

Я использую векторные файлы из иллюстратора, а затем меняю на png. Я сделал pngx2. Теперь он выглядит нормально.
Для таких маленьких изображений у вас не так много пикселей для работы. Это действительно помогает увеличить масштаб и немного подтолкнуть кривую/векторы. Выравнивание их по краям пиксельной сетки даст наилучший и максимально чистый результат.

Изображение в настоящее время имеет размер 37x25, попробуйте сохранить его с соотношением сторон или холстом с четными числами. Вроде 42х28

Это не имеет никакого отношения к проблеме.

Как вы вырезаете указанные изображения? При использовании лассо убедитесь, что на верхней панели инструментов не установлено значение растушевки.

Я использую векторные файлы из иллюстратора, а затем меняю на png

возможно, разрешение вашего png-файла слишком велико для мобильного веб-сайта. Попробуйте уменьшить разрешение до размера, который вы используете на своем сайте. В противном случае конвертируйте его в файл .svg, потому что его качество лучше на телефоне. Я надеюсь, что это поможет вам.

Сохранение изображений в формате png в Photoshop делает их размытыми при использовании на веб-сайтах.
СпросиСетьПолитика конфиденциальности1y, 0v