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

Вопрос: 

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

Я сохраняю изображение для 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 с сохранением альфа-прозрачности. Но я лично им никогда не пользовался, поэтому свои впечатления рассказать не могу.

Помощь сайту

Понравился сайт? Уроки оказались полезными? Мы будем благодарны, если Вы окажете небольшую помощь в развитии проекта (на кофе и сервер).

Райфайзен банк прямой перевод на карту

QIWI кошелёк: ссылка для пополнения на никнейм NOSTROM

Сбербанк, номер карты для прямого перевода: 4274 3200 5092 4219

PayPal ссылка для перевода

WebMoney, рублёвый кошелёк R250684729036, долларовый кошелёк: Z170567175694

Яндекс.Деньги, форма для пополнения:

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

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

Когда искала как пользоваться Photoshop CS6, наткнулась на ваш сайт, и в отличии от других, здесь все очень понятно и доходчиво описано. Решила...
Здравствуйте. Не могу найти перекрёстную кисть в Photoshop CS6 - подскажите
При установке Photoshop CS6 мне выдал сообщение, что у меня установлены старые драйвера видеокарты. Как мне поставить нормальные?
Уважаемый админ! Буду крайне признательна,если вы толково(как для чайника) объясните мне как вставить фото в рамку в фотошоп CS6... либо посоветуйте...