Рассмотрим подробно три формата изображений, используемых в настоящее время для сохранения графического оформления web-страниц и для его доставки на компьютер пользователя. Это форматы GIF, JPEG и PNG.
Хотя каждый из этих форматов имеет свои уникальные особенности, у них есть одна общая черта — все они обеспечивают сжатие данных, описывающих изображение. Это позволяет уменьшить объем файлов, а, следовательно, и время загрузки web-страницы на компьютер пользователя. Так как различные алгоритмы сжатия, применяемые в форматах web-графики, оптимальны для сохранения изображений разных типов, можно значительно уменьшить общий объем изображения, комбинируя форматы при сохранении его частей.
ПРИМЕЧАНИЕ. На самом деле для оформления web-страниц можно использовать графику в любом формате, но при этом возникнет проблема совместимости страницы с различными браузерами. Например, браузер Internet Explorer после установки программы QuickTime получает возможность отображать файлы в формате TIFF. Однако в стандартной поставке IE модуля для просмотра файлов зтого формата нет.
Начнем рассмотрение форматов web-графики с самого старого и самого «заслуженного» формата — GIF.
Формат GIF
Формат GIF был разработан компанией CompuServ специально для передачи цветных изображений по компьютерным сетям. Разработчики стремились создать формат, который позволял бы передать изображение на компьютер пользователя за кратчайшее время. Сейчас наиболее широко используются спецификации этого формата GIF87 и GIF89a (цифры обозначают, год выпуска стандарта).
ПРИМЕЧАНИЕ. GIF — Graphic Interchange Format — Формат обмена графическими данными.
Сохраняя файл в формате GIF, вы можете воспользоваться следующими возможностями:
сжатие данных без потерь (алгоритм сжатия LZW);
максимальное число отображаемых цветов — 256;
поддержка прозрачности;
возможность включения нескольких изображений (анимация);
чересстрочный вывод изображений на экран (в GIF89a);
включение текстовых блоков (комментариев).
Теперь рассмотрим возможности этого формата подробнее.
Прежде всего следует сказать несколько слов о сжатии изображения. GIF был и остается одним из немногих широко распространенных форматов, поддерживающих передачу сжатых данных. Следует заметить, что скорость передачи данных определяется в первую очередь их размером. То есть для увеличения скорости передачи надо уменьшить размер передаваемых файлов. Уменьшить размер отдельных файлов (а значит, и общий объем передаваемой информации) можно двумя путями:
уменьшить общий объем информации. Этот метод может легко применить каждый пользователь Интернета — достаточно отключить в браузере загрузку графики. Вы заметите резкое увеличение скорости загрузки страниц, но «обстановка» на экране вашего компьютера станет более чем спартанской. Кроме того, в некоторых случаях именно графика является целью посещения сайта. Яркими примерами таких сайтов могут служить виртуальные картинные галереи;
использовать сжатие данных. Естественно, если уж на свет появились алгоритмы архивации (сжатия), то рано или поздно на них должны были обратить внимание разработчики программного обеспечения для компьютерных сетей. Разумное применение сжатия данных позволяет существенно уменьшить объем передаваемых по каналу связи данных при сохранении всех передаваемых файлов.
Интернет изначально создавался как система обмена научными данными. Поэтому первые web-страницы были наполнены научной информацией, являвшейся целью их посещения, а на оформление страниц никто не обращал особого внимания. На рис. 2.1 вы можете увидеть пример такой страницы.
Основными графическими элементами таких страниц были чертежи, схемы и простые кнопки навигации.
Для таких элементов графики характерны четкие фигуры с резкими границами, линии и большие области с одноцветной заливкой. Цветовая гамма, как правило, ограничивается 2-10 цветами. Поэтому сжимать подобные изображения лучше всего при помощи алгоритмов, позволяющих хорошо обрабатывать группы одинаковых элементов, следующих друг за другом.
Разработчики формата GIF использовали алгоритм LZW, позволяющий достичь степени сжатия, близкой к максимальной.
Сжатие в формате GIF включено постоянно, и каждый файл сжимается так сильно, как это только возможно. Пользователь не имеет возможности выбрать степень сжатия или алгоритм.
Как уже было сказано, максимальное число цветов, которые может содержать изображение, сохраняемое в формате GIF, составляет 256. Это значит, что если изображение на самом деле содержит большее число цветов, то часть из них будет потеряна.
Рис. 2.1. Над оформлением первых web-страниц никто голову не ломал
ПРИМЕЧАНИЕ. Алгоритм сжатия данных LZW (алгоритм Лемпела-Зива-Уолша) основывается на при- своении группам символов (битов) номеров. Когда символ встречается в первый раз, он добавляется в таблицу кодов и в дальнейшем заменяется соответствующим номером. Если символ встречается вторично, то он заносится в таблицу кодов вместе с символом, следующим за ним. Такая комбинация в дальнейшем рассматривается как самостоятельный символ. Подобная операция выполняется для всех встречающихся комбинаций битов. Если файл содержит много повторяющихся символов, то за счет замены символа на его номер можно получить значительную экономию места. Применительно к графике такой алгоритм особенно эффективен при кодировании изображений, содержащих небольшое количество различных цветов и протяженные однотонные области. В самом деле, если изображение содержит несколько строк пикселов, залитых одним цветом, то в конце концов целая строка будет кодироваться одним символом.
Казалось бы, сохранение полноцветных изображений в этом формате — бесперспективное занятие, однако, хотя число цветов ограничено, сами цвета могут быть любыми. Они задаются тремя цветовыми составляющими, на каждую из которых отводится по одному байту. Это позволяет определить 16 777 216 цветов.
На практике графические редакторы составляют для изображения таблицу наиболее часто встречающихся цветов и заменяют не вошедшие в палитру цвета (обычно это цвета, используемые меньше остальных) на близкие к ним цвета из палитры. Возможны варианты, при которых для имитации нужного цвета используются комбинации точек цветов, входящих в палитру. Использование этого приема возможно потому, что человеческий глаз с большого расстояния воспринимает близко расположенные точки как единое целое. При этом их цвета сливаются и создают иллюзию первоначального цвета. Подбор точек нужного цвета может быть произведен несколькими методами, обеспечивающими разную степень близости изображения к оригиналу. Таким образом, результат сохранения многоцветных изображений в режиме индексированных цветов (а формат GIF как раз и использует этот режим) во многом зависит от возможностей графического редактора. Сохранение файлов в формате GIF при помощи Adobe PhotoShop подробно описано в следующей главе.
В некоторых случаях для создания палитры используют не цвета, встречающиеся на изображении, а цвета палитры, принятой в операционной системе или так называемой безопасной палитры.
ПРИМЕЧАНИЕ. Безопасная палитра представляет собой стандартизированный набор из 216 цветов, одинаково отображаемых ведущими браузерами Internet Explorer и Netscape Navigator в операционных системах Windows и Mac OS. Использование цветов из этой палитры гарантирует, что ваше изображение будет выглядеть на экране пользователя так, как его видите вы (с учетом свойств монитора, разумеется). Безопасная палитра была актуальна во времена широкого использования на мониторах режима с отображением 256 цветов. В настоящее время большинство компьютеров оснащаются видеоадаптерами и мониторами, работающими в более совершенных режимах (65 тысяч или 16 млн цветов), так что над использованием безопасной палитры задумываются все меньше и меньше.
Такой подход позволяет избежать искажения цвета на компьютере пользователя, но закономерно приводит к его искажению на этапе подготовки изображений. Кроме того, если вы создадите файл с учетом цветов, принятых в одной операционной системе, то в другой системе изображение может измениться настолько, что пользователь будет озадачен тем, что же вы хотели с его помощью передать. Отдельный вопрос — использование файлов GIF на различных мониторах. При выводе файла на экран программа просмотра автоматически подбирает ближайший к цвету пиксела оттенок, который может быть отображен на мониторе.
Использование ограниченной цветовой палитры создает хорошие условия для сжатия изображения. В самом деле, цвет каждого пиксела не надо задавать полностью (достаточно номера цвета из палитры). Это позволяет значительно уменьшить объем описания самого изображения. При этом палитра вовсе не обязательно должна содержать все 256 цветов. Если изображение использует меньшее число цветов, появляется возможность сэкономить несколько десятков байтов.
ПРИМЕЧАНИЕ. Сама палитра цветов описывается очень просто — подряд записываются значения красного, зеленого и синего компонентов для первого цвета, затем — для второго и т. д.
Для того чтобы наглядно продемонстрировать процесс сжатия данных в формате GIF и создания цветовой палитры, приведем простой пример. На рис. 2.2 приведены (в уменьшенном виде) три изображения до сохранения в формате GIF и после него. Исходный размер всех изображений — 300x300 пикселов, объем файлов до сжатия — около 277 Кбайт (формат — TIFF без сжатия, режим — RGB). Для большей наглядности фрагменты исходного и сжатого изображений приведены в увеличенном виде.
а
б
с
Рис. 2.2. В формате GIF сохранены простая фигура (а), фигура со сглаженными границами (б) и сложное полноцветное изображение (в)
Первое изображение (рис. 2.2, а) представляет собой простую геометрическую фигуру. Изображение содержит всего два цвета: черный и белый. Границы фигуры при этом получаются очень четкими, что в некоторых случаях смотрится не совсем красиво. Однако именно такие изображения очень хорошо подходят для сжатия и сохранения в формате GIF. Размер GIF-файла — 1,5 Кбайт. Второе изображение (рис. 2.2, б) также представляет собой геометрическую фигуру, однако ее границы плавно переходят к фону и к внутренней заливке. Вообще говоря, изображения с большим числом плавных переходов плохо подходят для сохранения в формате GIF. Но в данном случае переходы (градиенты) занимают небольшую часть изображения, а в изображении преобладает однотонная заливка. Поэтому данное изображение также неплохо сжалось. Размер GIF-файла — около 6 Кбайт. Число цветов в палитре — 256 при точном соответствии цветов оригинала и результата (всем цветам исходного изображения нашлось место в палитре сжатого файла). Обратите внимание на то, как сказалось на размере палитры и всего файла наличие сравнительно небольшого участка с плавным переходом цвета.
Третье изображение (рис. 2.2, в) — яркий представитель изображений, которые не следует сохранять в формате GIF. Это изображение (фотография) содержит множество различных цветов, плавно перетекающих друг в друга. Кроме того, перетекание цветов происходит на больших площадях, что значительно увеличивает число промежуточных оттенков. Такие изображения плохо сжимаются из-за небольшого числа повторяющихся элементов (пикселов). Сравните его с картинкой, приведенной на рис. 2.2, а — там содержатся целые строки одноцветных пикселов. Еще одна проблема — 256 цветов палитры не хватает для точной передачи всех цветов и программе сжатия приходится заменять недостающие цвета цветами, вошедшими в палитру. В данном случае была использована «безопасная палитра web», использование которой гарантирует точное воспроизведение цвета на компьютерах Apple и IBM PC, но число цветов при этом ограничено 216, а их набор фиксирован. Размер файла при этом составляет около 20 Кбайт. Если использовать вместо такой палитры набор цветов, образованный с учетом особенностей изображения, то качество картинки можно повысить, однако возрастет и размер файла. Для небольшого изображения размер палитры может превзойти при записи на диск размер самого изображения.
Рис. 2.3. Увеличенный фрагмент изображения неба до (слева) и после сжатия (справа). При переходе в режим индексированных цветов плавные переходы оттенков практически исчезают
На рис. 2.3 приведены увеличенные фрагменты изображения неба до и после сжатия. Исходное изображение представляет собой плавное изменение оттенка на большой площади. После сжатия становятся видны границы между областями, залитыми цветами из палитры, а плавные переходы практически исчезают.
Важной особенностью формата GIF, делающей его практически незаменимым на данный момент, является поддержка прозрачности. Изображение, сохраненное в формате GIF, может содержать прозрачные области, сквозь которые «просвечивает» фон, расположенный под изображением. Это позволяет создавать различные эффекты. Например, можно наложить сложное по форме изображение на рисованный фон (текстуру) так, что вокруг него не останется однотонных областей. Пример такого наложения приведен на рис. 2.4.
Рис. 2.4. Изображение с прозрачным фоном может быть наложено на текстуру без появления однотонной рамки
Эффект прозрачности достигается за счет того, что все точки изображения, закрашенные определенным цветом (он устанавливается при сохранении файла), на экран не выводятся (соответствующие области экрана остаются без изменений).
Использование прозрачности позволяет создавать оригинальные элементы web-страниц, но применять ее надо с осторожностью. Дело в том, что прозрачность в формате GIF не может быть частичной — пиксел или прозрачный, или нет. Это может привести к тому, что из-за плохого подбора цветов вокруг прозрачной части изображения возникнет своеобразный ореол из пикселов, цвет которых уже не относится к информативной части изображения, но еще не перешел в цвет фона.
Особенно часто такие явления возникают при подготовке изображений на светлом фоне и перемещении их на фон темный и наоборот. Подробнее о подобных явлениях и о методах борьбы с ними будет рассказано в следующей главе.
ПРИМЕЧАНИЕ. Рассматриваемый ниже формат PNG предоставляет возможность сохранения изображений с частичной прозрачностью пикселов. Однако современные браузеры не реализуют правильное отображение таких файлов.
Еще одна особенность файлов GIF, долгое время делавшая этот формат популярным — возможность создания анимированных изображений. До появления таких программных средств, как Macromedia Flash, позволяющих создавать занимающие мало места на диске анимированные изображения, других средств для создания небольших анимированных изображений в распоряжении web-дизайнеров не было.
В отличие от Flash, в GIF-файлах анимация сохраняется не в форме векторных объектов, а в виде отдельных растровых кадров. Каждый кадр представляет собой самостоятельное изображение с возможностью создания собственной таблицы цветов. Наличие таких индивидуальных таблиц позволяет увеличить цветовой охват и улучшить качество изображения в целом. Кадры могут быть прозрачными и накладываться друг на друга в различных режимах (замещая предыдущее изображение, накладываясь поверх него и т. д.). Некоторые программы для редактирования анимации (например, Ulead Gif Animator) используют прозрачность кадров для уменьшения размеров файла. Они анализируют изображение и заменяют повторяющиеся на нескольких кадрах пикселы на прозрачные. В некоторых случаях больше половины кадра оказывается залито одним цветом, что значительно повышает степень сжатия.
В настоящее время GIF-анимация постепенно уступает место технологии Flash, но GIF-файлы все еще широко используются. Основная сфера их применения — создание рекламных баннеров (небольших изображений, демонстрируемых на web-страницах в качестве ссылок на рекламируемые сайты).
Редактирование анимированных GIF-файлов рассматривается в главе, посвященной программе Adobe ImageReady, поставляемой совместно с Adobe PhotoShop и предназначенной для редактирования, оптимизации и сохранения web-графики.
Как было сказано выше, изображение в GIF-файле может быть сохранено с указанием на нормальный или чересстрочный вывод на экран. При нормальном порядке вывода изображение сохраняется в файл последовательно: описания строк следуют в порядке возрастания номеров (1, 2, 3,...). Такое изображение выводится на экран постепенно, по мере загрузки с сервера. Место под него может быть отведено заранее (путем указания размеров средствами HTML), но пикселы будут отображены только после их загрузки. Если же изображение сохранено в чересстрочном режиме, то порядок строк меняется. Вначале сохраняется каждая восьмая строка, затем — каждая четвертая, после этого — каждая вторая и шестая строки, и наконец — все нечетные строки.
ПРИМЕЧАНИЕ. В англоязычных источниках сохранение с чередованием строк обозначают термином Interlaced.
Такой хитрый способ записи изображения позволяет отобразить его на экране пользователя в полном размере до окончания загрузки. Дело в том, что браузеры, загрузив, скажем, все «восьмые» строки, предполагают, что все изображение состоит только из них, и заполняют промежутки между уже известными строками их копиями. После загрузки очередной порции изображения оно перерисовывается с учетом полученных данных. При этом создается эффект постепенного улучшения разрешения.
На рис. 2.5 видно, как отображаются во время загрузки обычное и чересстроч-ное изображения.
Рис. 2.5. Загрузка нормального и чересстрочного изображений
Использование чересстрочных изображений позволяет дать пользователю представление о том, что он увидит, еще до окончания загрузки файла. Однако за удовольствие приходится платить — файлы с чересстрочным расположением строк обычно имеют больший объем, чем их «нормальные» собратья.
СОВЕТ. Использование чересстрочных изображений позволяет придать странице закончен ный вид до завершения полной загрузки изображений. Если же речь идет не об оформлении, а о деловой графике, то чересстрочное изображение позволит уже в ходе загрузки понять, стоит ли догружать его до конца.
Формат GIF является одним из двух основных форматов web-графики, но его использование связано с определенными трудностями. Дело в том, что в этом формате, как уже было сказано, используется алгоритм сжатия LZW. Алгоритм защищен патентом, и правообладатель в некоторый момент принял решение о распространении алгоритма на условиях лицензирования. Это значит, что хотя алгоритм известен всем, компании-разработчики должны вносить плату за его использование в своих программах. Поэтому и компания CompuServ, разработавшая формат GIF, требует приобретения лицензии на использование своего детища в программном обеспечении. В первую очередь это касается разработчиков графических редакторов и браузеров, так как вне Интернета GIF используется довольно редко.
Из-за подобных проблем многие компании вынуждены отказываться от использования формата GIF или пытаться обойти накладываемые ограничения. Для решения этой проблемы был разработан формат PNG, обладающий теми же свойствами, что и GIF (а порой и превосходящий его), но полностью открытый для использования. Этот новый формат рассматривается в соответствующем разделе данного урока.
Рис. 2.1. Над оформлением первых web-страниц никто голову не ломал
ПРИМЕЧАНИЕ. Алгоритм сжатия данных LZW (алгоритм Лемпела-Зива-Уолша) основывается на при- своении группам символов (битов) номеров. Когда символ встречается в первый раз, он добавляется в таблицу кодов и в дальнейшем заменяется соответствующим номером. Если символ встречается вторично, то он заносится в таблицу кодов вместе с символом, следующим за ним. Такая комбинация в дальнейшем рассматривается как самостоятельный символ. Подобная операция выполняется для всех встречающихся комбинаций битов. Если файл содержит много повторяющихся символов, то за счет замены символа на его номер можно получить значительную экономию места. Применительно к графике такой алгоритм особенно эффективен при кодировании изображений, содержащих небольшое количество различных цветов и протяженные однотонные области. В самом деле, если изображение содержит несколько строк пикселов, залитых одним цветом, то в конце концов целая строка будет кодироваться одним символом.
Казалось бы, сохранение полноцветных изображений в этом формате — бесперспективное занятие, однако, хотя число цветов ограничено, сами цвета могут быть любыми. Они задаются тремя цветовыми составляющими, на каждую из которых отводится по одному байту. Это позволяет определить 16 777 216 цветов.
На практике графические редакторы составляют для изображения таблицу наиболее часто встречающихся цветов и заменяют не вошедшие в палитру цвета (обычно это цвета, используемые меньше остальных) на близкие к ним цвета из палитры. Возможны варианты, при которых для имитации нужного цвета используются комбинации точек цветов, входящих в палитру. Использование этого приема возможно потому, что человеческий глаз с большого расстояния воспринимает близко расположенные точки как единое целое. При этом их цвета сливаются и создают иллюзию первоначального цвета. Подбор точек нужного цвета может быть произведен несколькими методами, обеспечивающими разную степень близости изображения к оригиналу. Таким образом, результат сохранения многоцветных изображений в режиме индексированных цветов (а формат GIF как раз и использует этот режим) во многом зависит от возможностей графического редактора. Сохранение файлов в формате GIF при помощи Adobe PhotoShop подробно описано в следующей главе.
В некоторых случаях для создания палитры используют не цвета, встречающиеся на изображении, а цвета палитры, принятой в операционной системе или так называемой безопасной палитры.
ПРИМЕЧАНИЕ. Безопасная палитра представляет собой стандартизированный набор из 216 цветов, одинаково отображаемых ведущими браузерами Internet Explorer и Netscape Navigator в операционных системах Windows и Mac OS. Использование цветов из этой палитры гарантирует, что ваше изображение будет выглядеть на экране пользователя так, как его видите вы (с учетом свойств монитора, разумеется). Безопасная палитра была актуальна во времена широкого использования на мониторах режима с отображением 256 цветов. В настоящее время большинство компьютеров оснащаются видеоадаптерами и мониторами, работающими в более совершенных режимах (65 тысяч или 16 млн цветов), так что над использованием безопасной палитры задумываются все меньше и меньше.
Такой подход позволяет избежать искажения цвета на компьютере пользователя, но закономерно приводит к его искажению на этапе подготовки изображений. Кроме того, если вы создадите файл с учетом цветов, принятых в одной операционной системе, то в другой системе изображение может измениться настолько, что пользователь будет озадачен тем, что же вы хотели с его помощью передать. Отдельный вопрос — использование файлов GIF на различных мониторах. При выводе файла на экран программа просмотра автоматически подбирает ближайший к цвету пиксела оттенок, который может быть отображен на мониторе.
Использование ограниченной цветовой палитры создает хорошие условия для сжатия изображения. В самом деле, цвет каждого пиксела не надо задавать полностью (достаточно номера цвета из палитры). Это позволяет значительно уменьшить объем описания самого изображения. При этом палитра вовсе не обязательно должна содержать все 256 цветов. Если изображение использует меньшее число цветов, появляется возможность сэкономить несколько десятков байтов.
ПРИМЕЧАНИЕ. Сама палитра цветов описывается очень просто — подряд записываются значения красного, зеленого и синего компонентов для первого цвета, затем — для второго и т. д.
Для того чтобы наглядно продемонстрировать процесс сжатия данных в формате GIF и создания цветовой палитры, приведем простой пример. На рис. 2.2 приведены (в уменьшенном виде) три изображения до сохранения в формате GIF и после него. Исходный размер всех изображений — 300x300 пикселов, объем файлов до сжатия — около 277 Кбайт (формат — TIFF без сжатия, режим — RGB). Для большей наглядности фрагменты исходного и сжатого изображений приведены в увеличенном виде.
