Как удалить белые пиксели по краям при экспорте прозрачного GIF?

Принцип работы прозрачности с 8-битными gif/png заключается в том, что пиксель либо полностью прозрачен, либо полностью непрозрачен .

В углах круга, где круг прозрачно сливается с фоном, обычно есть полупрозрачные пиксели, чтобы сгладить переход. Этот плавный переход невозможно полностью воспроизвести с помощью 8-битных файлов gif/png.

Один из способов сымитировать это — выбрать матовый фон для всех этих полупрозрачных пикселей. Это означает, что те пиксели, которые не являются полностью прозрачными, рассчитывают свой цвет так, как если бы они были поверх матового цвета.

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

Способ исправить это, если у вас есть оригинальный, полностью прозрачный круг, — это save for web & devicesвыбрать матовый цвет, который подходит для вашего фона. Таким образом, потенциально полупрозрачные пиксели будут объединены в полностью непрозрачные пиксели на фоне матового цвета, и при просмотре на вашем веб-сайте с аналогичным цветом фона он будет выглядеть полностью гладким. Обратите внимание, что а) графика с небольшими диапазонами полупрозрачных областей (в пикселях) работает лучше всего, и б) для этого требуется, чтобы фон, на котором отображается gif, был примерно такого же цвета, который вы выбираете для подложки.

На этом изображении:

• Верхний левый — исходное круглое изображение со сглаженными, то есть сглаженными углами.
• Тот же результат вы получите с png-24, как показано в правом верхнем углу, но это не работает для анимации.
• Нижний левый вид показывает, как полупрозрачные пиксели изображения транспонируются в выбранный красный матовый цвет. Также обратите внимание, что те пиксели, которые полностью прозрачны, остаются полностью прозрачными. Принимая во внимание, что только те пиксели, которые имеют небольшую прозрачность, «подложатся» под матовый цвет, а полностью непрозрачные пиксели остаются полностью незатронутыми настройками прозрачности (однако на них влияет выбор типа дизеринга и цветов).
• В правом нижнем углу показаны параметры экспорта, которые использовались для вашего примера изображения. Если выбрана белая подложка, те же пиксели, которые отображаются красным на нижнем левом изображении, будут отображаться белыми на нижнем правом изображении. Это вполне приемлемо, если вы показываете его на белом фоне. На других, более темных фонах белые пиксели отображаются, потому что используется неправильный матовый цвет для создания полностью непрозрачных пикселей для любых пикселей, не полностью прозрачных.

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

Если вы попали в неприятную ситуацию, когда у вас нет исходного файла с полным сглаженным альфа-каналом (т. е. у вас есть только 8-битный gif), сложно обратить вспять это матовое растрирование — пиксель за пикселем, который вы должны удалить. матовый цвет из полупрозрачных пикселей, а затем реэкспортировать их с более подходящими настройками.

В диалоговом окне «Сохранить для Интернета» обязательно установите цвет подложки в правой части окна на цвет фона веб-страницы.

GIF-файлы не поддерживают полную 8-битную прозрачность, они поддерживают только 1-битную прозрачность. Лучшее, что вы можете сделать, это использовать цвет, который соответствует фону веб-страницы, чтобы изображение легко смешивалось с этим цветом.