Illustrator PNG с прозрачностью Экспорт - белый контур в Интернете, если не 100%?

Я создал векторную графику в Illustrator CC и использовал «Сохранить для Интернета», чтобы создать из нее прозрачный PNG. Однако при рендеринге на моем сайте он добавляет слабый светлый контур вокруг серого круга на приведенном снимке экрана. Однако обратите внимание, что он появляется только в том случае, если размер изображения изменился (его контейнер стал меньше, поэтому изображение уменьшилось).

Изображение в масштабе 100%, без белого контура — красивое и четкое:

Изображение на 100

Изображение уменьшено до 95 % (или любого %, кроме 100), контур артефакта делает его размытым:

Размер изображения изменен

У меня никогда не было этой проблемы раньше, и я пытался настроить монтажную область на целые значения пикселей, удалил цветовой профиль, изменил настройки прозрачности растра, переключился между цветовыми режимами cmyk и rgb, неконтролируемое преобразование в sRGB и множество других настроек. В данный момент я забываю, но это довольно неприятно, и я надеюсь, что это замечательное сообщество может дать некоторое представление.

Какой метод сглаживания вы выбираете?
Я не знаю, почему это происходит при изменении размера в Интернете, но я тоже сталкивался с этим. Может быть на основе браузера. Лучше всего иметь изображение точного размера, необходимого для Интернета, и изображение также будет немного светлее. Может быть, эта тема может быть полезна: stackoverflow.com/questions/9945363/…
Вы сохраняете его в PNG-8 или PNG-24?
Сохранение в формате PNG-24.
Вполне вероятно , что что-то в цепочке изменяет разрешение альфа-канала. Я знаю, например, что более старые подпрограммы PHP GD используют 7-битную альфу внутри: это означает, что вы теряете точность цвета при прозрачности, поскольку существует только 128 возможных уровней серого.

Ответы (3)

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

Наивные реализации интерполируют каждый канал отдельно, поэтому цвет прозрачной области просачивается через процесс, поскольку ваше изображение на самом деле белое в прозрачных пикселях. Даже у ненаивных реализаций иногда будут большие проблемы, потому что чертовски сложно сделать это идеально правильно.

Есть 2 способа решить эту проблему.

  1. Не масштабируйте, это ежу понятно
  2. Раскрасьте прозрачные пиксели цветом краевых пикселей. Хотя это намного сложнее, чем кажется. Поскольку ваши инструменты не сделают этого за вас без МНОГО дополнительной работы и проклятий. Есть еще шанс, что это вам мало поможет.

На панели предпочтений: «Правка» > «Установки» > «Общие» или cmd+k убедитесь, что выбрано сглаживание. Это сглаживает экспортированные файлы png 24. Также убедитесь, что вы используете png-24, как было предложено выше, и когда вы сохраняете для Интернета, у вас выбрано искусство оптимизации (это в раскрывающемся меню в меню размера изображения).

Сглаживание проверено.

Это потому, что вы полагаетесь на браузер для изменения размера изображения.

Есть несколько способов обойти проблему с CSS - я думаю, ms-interpolation-mode: nearest-neighbor;для Internet Explorer и image-rendering: -moz-crisp-edges;для Firefox, хотя я не уверен в Chrome, Safari или других. Вы должны искать или спрашивать о переполнении стека для этого.

Единственный способ на 100% избежать этого — сохранить PNG в правильном размере.

Привет Кай, добро пожаловать в GDSE и спасибо за ваш ответ. Если у вас есть какие-либо вопросы, обратитесь в справочный центр или свяжитесь с одним из нас в чате графического дизайна , как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!
Illustrator PNG с прозрачностью Экспорт - белый контур в Интернете, если не 100%?
СпросиСетьПолитика конфиденциальности1y, 1v