Разрешение экрана монитора очень низкое — 96 dpi. Графические точки, из которых собирается изображение (пикселы), видны невооружённым глазом и на линиях заметны пиксельные ступеньки — алиасинг.
Ниже показан пример алиасинга на изображении букв текстовой надписи:
Эта же надпись в
Если по ступенчатой границе пустить пикселы, имеющие переходный (средний) цвет между цветом объекта и цветом фона, то ступеньки сглаживаются и визуально становятся незаметными. Посмотрите на ту же надпись, выполненную с использованием антиалиасинга (или режима сглаживания). Пикселные изломы теперь не видны:
Та же картинка в
Алиасинг неприятен не только на контурах букв, но и на любых линиях, которые не являются горизонталями и вертикалями:
Режим антиалиасинга нужно устанавливать в графическом редакторе перед сохранением картинок.
Понятно, что цвет пикселов антиалиасинга, сглаживающих контуры, зависит от двух цветов: цвета рисунка и цвета фона. Не учитывать этот факт — типичная ошибка новичка.
Петр Мячиков написал заголовок РОБОТ на белом фоне с антиалиасингом и сохранил свой рисунок на диске в виде прозрачного GIF. Потом он поместил надпись на страницу с серым фоном и был неприятно удивлен “рваными” краями букв:
![]() |
— Наверное, я всё же забыл в графическом редакторе включить
сглаживание, — подумал Петр и, чтобы удостовериться, посмотрел
на рисунок в
![]() |
Антиалиасинг есть, но для белого фона! Подмена серым свела на нет все усилия Фотошопа.
Урок пошел Петру на пользу. Рисовать с антиалиасингом надо на том самом фоне, который собираешься подкладывать под картинку на гипертекстовой странице. Вот, пожалуйста, тот же прозрачный GIF, нарисованный на сером:
![]() |
А вот, та же картинка в
![]() |
Ещё одна распространенная ошибка. Вы берете прозрачный GIF из какой-нибудь интернетовской бесплатной коллекции. На белом фоне он смотрится просто чудесно. Помещаете на свой фон и видите грязные края. Понятно в чем дело?