Среди явных погрешностей в графике, подготовленной для размещения на страницах сайта, наиболее распространены:
Эти погрешности возникают при изменении размеров растровой картинки.
Ниже представлены примеры, взятые из конкурсных работ (фрагменты заголовков, логотипы). На иллюстрациях хорошо видны увеличенные пикселные ступеньки:
Погрешность возникает при неверном указании значений размерных атрибутов тега IMG и при изменении размеров картинки в графическом редакторе.
Типичный случай: текст, изначально записанный слишком мелким кеглем, растягивается, и на нём появляются ступеньки.
Качество картинки страдает дополнительно, если не используется режим редактора Сглаживание (антиалиасинг).
Антиалиасинг в приведённой выше иллюстрации отсутствует во всех примерах, кроме рисунка логотипа с птицей. Птица была испорчена размерными атрибутами тега IMG. В “натуральную” величину она смотрится очень хорошо:
Самое лучшее — использовать для подготовки графики векторный графический редактор, такой как Xara X.
Векторная графика масштабируется без искажений, а сохранять изображения нужного размера можно в растровом формате GIF или JPEG.
И не надо забывать про антиалиасинг.
Картинки, предназначенные для Web, конечно, надо оптимизировать. Однако, эта оптимизация не должна наносить явный ущерб качеству изображения.
Ниже приведены примеры, взятые из конкурсных работ. Хорошо видны цветовые ореолы по контуру и другой цветовой шум. Это результат чрезмерного JPEG-сжатия.
Для всех приведённых выше рисунков (кроме фотографии) гораздо лучше подошёл бы формат GIF: файлы были бы гораздо меньше, а качество изображения существенно лучше.
О форматах GIF и JPEG, а также о том, как правильно формат выбрать, читайте ниже.
В Интернете очень популярен формат GIF (Graphic Interchange Format, формат обмена графическими данными). Вот как он устроен:
Заголовок начинается с текста “GIF89a” — признака GIF-формата, затем указывается ширина, высота картинки и некоторая другая информация.
За заголовком следует палитра — 24-битные коды цветов, которые используются в рисунке. Максимальное число цветов, которое может хранить палитра GIF — 256.
Пусть, например, нужно сохранить в формате GIF изображения флажка:
Для этого флажка будет построена такая палитра:
Само изображение кодируется, как и в формате BMP по строкам, но вместо кода цвета указывается номер этого цвета в построенной палитре. Для четырёх цветов в качестве такого номера достаточно использовать две двоичные цифры:
Флажок будет закодирован следующим образом:
Конечно, в файле эта таблица превращается в список двухбитных кодов. При этом первые 20 бит кодируют первую строку изображения, вторые 20 — вторую и так далее.
Когда в картинке использовано более 256 цветов, то графический редактор перед записью картинки в файл заменяет в ней “лишние” цвета близкими из 256-цветной палитры. Картинка, конечно, записывается с искажением.
При использовании GIF с 256-цветной палитрой ухудшение качества часто практически незаметно:
Для этой картинки качество остается приемлемым и при GIF с палитрой в 32 цвета, и даже при 16 цветах:
Когда число цветов уменьшается до 4 или 2, качество изображения становится слишком низким:
Еще один графический формат очень популярен в Интернет — формат JPEG (файлы с расширением jpg или jpeg).
Сокращение JPEG возникло от названия группы, которая разработала этот формат: Joint Photographic Experts Group, Объединенная группа экспертов по машинной обработке фотографических изображений.
Формат JPEG содержит 24-битную информацию о цвете пиксела, но при формировании графического файла используется метод сжатия, при котором часть цветов просто отбрасывается:
Используя сжатие с потерями, JPEG способен уплотнить графические данные от 10 до 20 раз без видимой потери качества.
Посмотрите на приведенную ниже иллюстрацию. Размер файла, записанного в формате JPEG, в 6 раз меньше размера файла, записанного в формате GIF при одинаковом качестве изображения:
Даже очень сильное JPEG-сжатие исходного изображения сохраняет много цветов картинки, чего нельзя сказать про GIF-файл того же размера:
JPEG хорош для больших изображений, для фотографий и рисунков, имеющих плавные цветовые переходы.
Для маленьких изображений, для картинок с четкими цветовыми границами и однотонными областями формат GIF подходит лучше.
На приведенной ниже иллюстрации изображение в формате JPEG имеет явные погрешности, а размер файла в 4 раза больше, чем у рисунка в формате GIF:
Ниже приведён пример ещё одной картинки, для которой формат GIF предпочтительнее формата JPEG (исходный файл в формате BMP имеет размер 128 214 байт):