Почему на сайте появляется белый кантик вокруг картинки?

Вопрос: 

Здравствуйте!

Я сохраняю изображение для Web на прозрачном фоне в формате PNG. В штатном просмотре изображений Windows рисунок выглядит нормально. Но, когда я переношу его на сайт, вокруг изображения появляется противный белый кантик, ободок, шириной 2-3 пикселя, который всё портит. Как мне это исправить?

Ответ: 

Дело в том, что Вы сохраняете рисунок в формате PNG-8-обычный. Прозрачность то он поддерживает, но только либо 0, либо 100%, а прозрачность, к примеру, в 50% невозможна. А края практически любого изображения несколько размыты, т.е. имеют какую-то непрозрачность. Они и преобразуются в светло-серый ободок при сохранении для Web. На самом деле, Photoshop в окне сохранения для Web показывает эти края, смотрите внимательнее. На примере я сохраняю круг с плавной растушёвкой краёв в 3 пикселя:

p

В настройках сохранения для web есть опция для определения цвета полупрозрачных пикселей, по умолчанию он задан "матовый", и лучше всего изменить его на параметр "Не показывать":

p

Но это тоже не вариант, т.к. края картинки станут рубленными.

Так что у Вас два выхода:

  1. Сохранить картинку в формате PNG-24, но картинки, сохранённый в PNG-24 могут получиться очень тяжеловесные
  2. Сохранить картинку в компактном JPG на фоне, таком же, как и у сайта. Это, конечно, подойдет, если фон сайта однотонный и в ближайшем будущем не изменится.

Есть и третий способ, это сохранения изображения в формате PNG-8 с альфа-каналами. Как это не смешно, но сделать это в Photoshop до сих пор нельзя. Надо пользоваться сторонними сервисами, например, http://tinypng.org, в нём Вы сможете сконвертировать полноцветные PNG-24 в PNG-8 с сохранением альфа-прозрачности. Но я лично им никогда не пользовался, поэтому свои впечатления рассказать не могу.

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Looking for a glucophage? Not a problem! Guaranteed Worldwide Shipping Discreet Package Low Prices 24/7/365 Customer Support 100% Satisfaction...
Looking for a zocor? Not a problem! Guaranteed Worldwide Shipping Discreet Package Low Prices 24/7/365 Customer Support 100% Satisfaction...
Господа Хорошие, будьте добры ответить: - при работе в Фотошоп CS5 - выделяю (волшебной палочкой или выделение контура), но выделяется ненужное,...
Looking for a vytorin? Not a problem! Guaranteed Worldwide Shipping Discreet Package Low Prices 24/7/365 Customer Support 100% Satisfaction...