Отсутствие антиалиасинга или не соответствие его фону страницы

Разрешение экрана монитора очень низкое — 96 dpi. Графические точки, из которых собирается изображение (пикселы), видны невооружённым глазом и на линиях заметны пиксельные ступеньки — алиасинг.

Ниже показан пример алиасинга на изображении букв текстовой надписи:

Алиасинг

Эта же надпись в 4-кратном увеличении:

Алиасинг в 4-кратном увеличении

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

Антиалиасинг

Та же картинка в 4-кратном увеличении:

Антиалиасинг в 4-кратном увеличении

Алиасинг неприятен не только на контурах букв, но и на любых линиях, которые не являются горизонталями и вертикалями:

Линии с алиасингом и с антиалиасингом

Режим антиалиасинга нужно устанавливать в графическом редакторе перед сохранением картинок.

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

Петр Мячиков написал заголовок РОБОТ на белом фоне с антиалиасингом и сохранил свой рисунок на диске в виде прозрачного GIF. Потом он поместил надпись на страницу с серым фоном и был неприятно удивлен “рваными” краями букв:

робот

— Наверное, я всё же забыл в графическом редакторе включить сглаживание, — подумал Петр и, чтобы удостовериться, посмотрел на рисунок в 4-кратном увеличении:

робот

Антиалиасинг есть, но для белого фона! Подмена серым свела на нет все усилия Фотошопа.

Урок пошел Петру на пользу. Рисовать с антиалиасингом надо на том самом фоне, который собираешься подкладывать под картинку на гипертекстовой странице. Вот, пожалуйста, тот же прозрачный GIF, нарисованный на сером:

робот

А вот, та же картинка в 4-кратном увеличении. Здесь антиалиасинг правильный:

робот

Ещё одна распространенная ошибка. Вы берете прозрачный GIF из какой-нибудь интернетовской бесплатной коллекции. На белом фоне он смотрится просто чудесно. Помещаете на свой фон и видите грязные края. Понятно в чем дело?