Как исправить светлые края в PNG с измененным размером из Illustrator?

Как вы предотвращаете появление светлых краев прозрачного изображения PNG-24 при изменении размера без необходимости принудительного их удаления с помощью правила Webkit Optimize Contrast CSS?

Пояснение . Изменение размера изображения в Chrome приводит к тому, что линии внутри букв и фигуры по краям становятся светлее. Эти светлые края делают изображение неровным, а не резким, когда его размер уменьшен до 200 x 50 пикселей по сравнению с исходным размером 350 x 90 пикселей.

Вот лучший скриншот проблемы:

Скриншот

(Исходное изображение было создано с помощью функции «Сохранить для Интернета» в Illustrator)

@Dominic: Вырезанные части были сделаны мной, когда я делал скриншот ошибки PNG.
Можете ли вы предоставить немного больше информации? Как это выглядит, когда размер не изменен? О каких белых пятнах вы говорите (подойдет увеличенный скриншот со стрелками)?

Ответы (2)

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

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

Я обнаружил, что добавление следующих свойств css к элементу изображения (или, если это фоновое изображение, сам элемент) устраняет проблему для меня в Chrome и Firefox:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

Вы можете прочитать о других вариантах рендеринга изображений здесь .

Размещенное вами изображение обрезано, потому что ваша монтажная область была меньше, чем рисунок в Illustrator.

Вам необходимо либо убедиться, что вы не отметили Clip to Artboardфлажок в окне Same for Web. Или вам нужно убедиться, что все изображения попадают на монтажную область.

Обновление после редактирования вопроса

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

Я прояснил весь вопрос и изменил изображение.
Даунвотер хочет объяснить?
Как исправить светлые края в PNG с измененным размером из Illustrator?
СпросиСетьПолитика конфиденциальности1y, 0v