Оптимизация графического материала на сайте

Графический материал (картинки) применяются не только как контент, но и как элементы дизайна web-страниц. Поэтому для увеличения скорости загрузки страниц необходимо уменьшить размер изображений при удовлетворительном качестве, а именно:
Сжатие графических файлов при сохранении их качества;
Установке подходящего разрешения;
Выбор формата файлов;
Оптимизации анимированных рисунков и фотографий;
Процесс уменьшения объема файлов;

Приведу примеры различных форматов изображения и различных способов оптимизации под web с помощью photoshop.

Формат GIF

Формат GIF был разработан компанией CompuServ специально для передачи цветных изображений по компьютерным сетям. Разработчики стремились создать формат, который позволял бы передать изображение на компьютер пользователя за кратчайшее время. Сейчас наиболее широко используются спецификации этого формата GIF87 и GIF89а (цифры обозначают год выпуска стандарта).

GIF — Graphic Interchange Format — формат обмена графическими данными.

Сохраняя файл в формате GIF, можно воспользоваться следующими возможностями:
сжатие данных без потерь (алгоритм сжатия LZW);
максимальное число отображаемых цветов — 256;
поддержка прозрачности;
возможность включения нескольких изображений (анимация);
чересстрочный вывод изображений на экране (в GIF89а);
включение текстовых блоков (комментариев).

Формат GIF был и остается одним из немногих широко распространенных форматов, поддерживающих передачу сжатых данных. Следует заметить, что скорость передачи данных определяется в первую очередь их размером. То есть для увеличения скорости передачи надо уменьшить размер передаваемых файлов. Уменьшить размер отдельных файлов (а значит, и общий объем передаваемой информации) можно двумя путями:
уменьшить общий объем информации. Этот метод может легко применить каждый пользователь Интернета — достаточно отключить в браузере загрузку графики. Можно добиться резкого увеличения скорости загрузки страниц, но вид на экране компьютера станет более чем спартанским. Кроме того, в некоторых случаях именно графика является целью посещения сайта. Яркими примерами таких сайтов могут служить виртуальные картинные галереи;
использовать сжатие данных. Разумное применение сжатия данных позволяет существенно уменьшить объем передаваемых по каналу связи данных при сохранении всех передаваемых файлов.

Разработчики формата GIF использовали алгоритм LZW, позволяющий достичь степени сжатия, близкой к максимальной.

Алгоритм сжатия данных LZW основывается на присвоении группам символов (битов) номеров. Когда символ встречается в первый раз, он добавляется в таблицу кодов и а в дальнейшем заменяется соответствующим номером. Если символ встречается вторично, то он заносится в таблицу кодов вместе с символом, следующим за ним. Такая комбинация в дальнейшем рассматривается как самостоятельный символ. Подобная операция выполняется для всех встречающихся комбинаций битов. Если файл содержит много повторяющихся символов, то за счет замены символа на его номер можно получить значительную экономию места. Применительно к графике такой алгоритм особенно эффективен при кодировании изображений, содержащих небольшое количество различных цветов и протяженные однотонные области. В самом деле, если изображение содержит несколько строк пикселов, залитых одним цветом, то в конце концов целая строка будет кодироваться одним символом.

Сжатие в формате GIF включено постоянно, и каждый файл сжимается так сильно, как это только возможно. Пользователь не имеет возможности выбрать степень сжатия или алгоритм.

Как уже было сказано, максимальное число цветов, которые может содержать изображение, сохраняемое в формате GIF, составляет 256. Это значит, что если изображение на самом деле содержит большое число цветов, то часть из них будет потеряна.

Казалось бы, сохранение полноцветных изображений в этом формате — бесперспективное занятие, однако, хотя число цветов ограничено, сами цвета могут быть любыми. Они задаются тремя цветовыми составляющими, на каждую из которых отводится по одному байту. Это позволяет определить 16 777 216 цветов. На практике графические редакторы составляют для изображении таблицу наиболее часто встречающихся цветов и заменяют не вошедшие с палитру цвета (обычно это цвета, используемые меньше остальных) на близкие к ним цвета из палитры. Возможны варианты, при которых для имитации нужного цвета используются комбинации точек цветов, входящих о палитру. Использование этого приема возможно потому, что человеческий глаз с большого расстояния воспринимает близко расположенные точки как единое целое. При этом их цвета сливаются и создают иллюзию первоначального цвета. Подбор точек нужного цвета может быть произведен несколькими методами, обеспечивающими разную степень близости изображения к оригиналу. Таким образом, результат сохранения многоцветных изображений в режиме индексированных цветов (а формат GIF как раз и использует этот режим) во многом зависит от возможностей графического редактора.

Формат JPEG

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

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

Наиболее распространенным в настоящее время форматом, предназначенным для хранения полноцветных фотоизображений, является формат JРЕG.

JРЕG (Joint Photography Experts Group — Объединенная группа экспертов по машинной обработке изображений), позволяющий реализовать сжатие полноцветных или монохромных изображений до размеров, удобных для передачи по каналам связи. В отличие от формата GIF, JPEG позволяет хранить изображения, содержащие до 16 млн. оттенков.

Так как фотографии и видеоизображения часто содержат протяженные области плавными переходами цвета (градиентами), для их сжатия не подходят алгоритм LZW или подобные ему. Они не дают большого выигрыша в размере файла. Для качественной компрессии понадобились новые алгоритмы, основанные на других принципах.

В основе JPEG лежит так называемое сжатие с потерями. Это значит, что сжатие изображения происходит за счет выбрасывания мелких, незначительных деталей. Во многих случаях эти детали столь малы и незаметны, что человек не в состоянии заметить разницу между сжатым изображением и оригиналом. Однако разница в размерах соответствующих файлов может быть значительной. Основы алгоритма JPEG — преобразование информации о цвете, хранимой отдельно для всех цветовых составляющих одного пикселя, в область частот с последующей фильтрацией. Проще говоря, для хранения данных о цвете используются не цветовые составляющие каждого пикселя, а сведения о том, как изменяется вклад той или иной составляющей в результирующий цвет. Такие методы обработки основываются на принципах частотного анализа, широко применяемого в радиоэлектронике. В данном случае изменения яркости или цветовых составляющих от пикселя к пикселю описывается в виде набора колебаний (по аналогии с радиоэлектроникой эти колебания можно назвать составляющими сигналами) различной частоты и амплитуды. Такую операцию также называют определением спектра сигнала.

Для лучшего понимания основ работы алгоритма JPEG следует рассмотреть особенности восприятия человеком окружающей его реальности. Человеческий глаз более чувствителен к яркости, чем к цветовым составляющим изображения. Если перевести картинку в монохромный режим (яркий пример — черно-белый телевизор), то изображенные предметы останутся. Изображение же, содержащее цвета, но лишено яркостной составляющей, практически перерастает быть узнаваемым.

Можно легко убедиться в этом при помощи PhotoShop. Просто закрасить либо картинку любым цветом (но не черным и не белым) при помощи Paintbrush (Кисть) в режиме Luminosity (Яркость). При этом все пиксели яркость цвета кисти.

C одной стороны, разложив некоторый сигнал (в данном случае это — информация об изображении) на частотные составляющие и отбросив самые незначительные из них, можно достичь сжатия данных. С другой стороны, человеческий глаз устроен так, что он воспринимает в первую очередь яркость изображения и уже потом – его цветовые характеристики. Это предоставляет два способа уменьшения объема файла изображения, которые и используются в алгоритме JPEG:
объем хранимых и передаваемых данных может быть уменьшен путем разложёния информации о цвете на частотные составляющие с последующим отбрасыванием самых незначительных из них – «лишних»;
так как глаз человека более чувствителен к яркости изображения (в данном случае оно состоит из пикселов), чем к его цвету, то следует стремиться передать без искажений информацию о яркости пикселов, а информацией об их цвете можно до определенной степени пренебречь.

Использование этих методов позволяет достичь высокой степени сжатия и значительно уменьшить объем файлов, содержащих изображение. Грамотное использование алгоритма позволяет получить настолько высокое качество воспроизведения картинки, что различить сжатое изображение и оригинал практически невозможно.

При сохранении изображения в формате JPEG над ним производятся перечисленные ниже операции:
Изображение преобразуется из исходной цветовой модели (например, RGB, в которой каждая точка описывается тремя цветовыми составляющими) к модели, содержащей яркостный компонент и два компонента, определяющие цвет точки. Это необходимо для раздельной обработки яркостной и цветовой составляющих изображения. Если изображение уже находится в подходящем Цветовом режиме, преобразования не требуется. В дальнейшем все компоненты обрабатываются независимо друг от друга.
Цветовые компоненты усредняются между соседними пикселями, что позволяет снизить объем данных, требуемых для их передачи. Обычно усреднение производится так, что «поле» цветовых компонентов уменьшается в два раза по вертикали и по горизонтали. Например, для изображения 400×400 пикселов будут получены «поля» цветовых компонентов размером 200×200. Возможны и другие сочетания коэффициентов пропорциональности сторон, например 2:1, но они дают меньшую степень сжатия. Яркостный компонент на этом этапе не изменяется. Благодаря этому яркость изображения подвергается меньшим искажениям.
Применение дискретного преобразования Фурье. Изображение (точнее, каждый из его компонентов) разбивается на блоки 8×8 пикселов, к которым применяется дискретное преобразование Фурье. При этом информация о значении того или иного компонента представляется в виде соответствующих колебаний. По аналогии с радиотехническими сигналами можно выделить в преобразованных компонентах некоторое среднее значение (некоторый аналог постоянного тока), а также переменную составляющую (аналог переменного тока). Высокочастотные (быстрые) изменения параметров менее заметны, чем изменения низкочастотные (плавные). Поэтому верхние частоты могут быть отброшены.
Квантование значений параметров. Для отбрасывания ненужных компонентов значения, полученные в ходе преобразования Фурье, делятся на весовые коэффициенты и округляются. Для каждой точки внутри блока преобразования (8×8 пикселов) используется свой коэффициент, который выбирается из специальной таблицы. Для яркости и цветовых составляющих требуются отдельные таблицы. Составлять такие таблицы достаточно сложно, поэтому большинство кодировщиков JPEG используют стандартную таблицу ISO. Именно на этом этапе производится регулировка качества изображения. Изменяя весовые коэффициенты, можно определить, какая часть информации будет отброшена. При этом качество изображения и размер файла изменяются обратно пропорционально друг другу.
Сжатие полученных значений без потерь. Для устранения повторов в полученных значениях параметров изображения данные дополнительно сжимаются по методу Хаффмана. Этот метод основывается на замене всех кодов, встречающихся в исходных данных, на новые, причем наиболее часто встречающиеся комбинации получают самые короткие «обозначения». Этот метод позволяет достичь высокой степени сжатия без потери информации.

Для раскодирования данных необходимо выполнить эти операции в обратном порядке:
Данные разархивируются в соответствии с методом Хаффмана. В результате получаются отсчеты параметров изображения.
Из файла считывается таблица весовых коэффициентов. С ее помощью восстанавливаются результаты преобразования Фурье, выполненного при сжатии. В зависимости от степени сжатия, заданной кодировщиком, эти данные в той или иной степени соответствуют исходным.
Над отсчетами частотных составляющих производится обратное преобразование Фурье. Это позволяет восстановить значения компонентов изображения.
Полученные значения цветовых компонентов «распределяются» между соседними пикселями. Это необходимо из-за того, что при сжатии «поле» цветовых компонентов было уменьшено. Яркостный компонент сразу готов для последующей обработки.
Для удобства вывода на экран или выполнения обработки изображение преобразуется в одну из цветовых моделей (например, в RGB для вывода на экран, или в CMYK для печати).

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

Формат TIFF

При экспорте векторной графики Corel Draw в растровую был использован формат TIFF для малой потери качества и сохранения графики с высоким разрешением для дальнейшей оптимизации отдельных элементов макета.

Формат TIFF (Tagged Image File Format — формат файлов изображений, снабженных тегами) является одним из наиболее широко распространенных форматов, используемых при подготовке графики. Этот формат является фактически стандартом для подготовки изображений в полиграфии. Файлы этого формата обычно имеют расширение TIF или TIFF.

TIFF является одним из наиболее сложных по своей внутренней структуре форматов. Файлы TIFF начинаются с заголовка файла изображения (IFH — Image File Header), имеющего длину 8 байтов. Заголовок файла содержит блок, называемый каталогом файла изображения (IFD — Image File Directory). Этот блок позволяет графическим программам определить внутреннюю структуру файла.

При помощи IFD файла можно выделить теги — блоки данных, содержащие информацию о размерах изображения, его цветовой модели, размере палитры (числе используемых цветов), сжатии данных и т. д. Само изображение также содержится в отдельном теге. Всего определено несколько десятков таких блоков. Так как весь TIFF файл состоит из тегов, этот формат легко поддается модернизации и расширению. В самом деле, для введения дополнительных возможностей достаточно определить новый тег. Однако в этом кроется и источник возможных ошибок — если программа не сможет определить значение тега, введенного кем-либо из производителей аналогичного программного обеспечения, файл может быть открыт неправильно или его вовсе не удастся прочитать.

В файле формата TIFF изображение может храниться в цветовых моделях СМУК, RGB, Lab в режиме индексированных цветов, а также в виде оттенков серого (grayscale). Это позволяет использовать формат для хранения самых разных изображений, применяемых как для подготовки web-графики, так и в полиграфии. Кроме цветовой модели, сохраняется и разрешение, с которым следует выводить изображение на печать. Задав высокое разрешение, можно получить качественные распечатки, если, конечно, принтер поддерживает печать с заданными параметрами.

Максимальное число битов, которыми описывается один пиксель изображения в формате TIFF, составляет 24. Это позволяет закодировать до 16 777 216 цветов.

Кроме изображения, в TIFF -файле могут сохраняться каналы прозрачности (alpha-каналы), позволяющие сохранять прозрачные области изображения или выделения объектов между сеансами работы. При работе в PhotoShop можно сохранить в формате TIFF файл, содержащий слои, но другие программы смогут прочесть такой файл только как единое изображение. Для указания на необходимость сохранения слоев нужно установить флажок Layers (Слои) в диалоге выбора имени сохраняемого файла (этот флажок доступен только при сохранении в расширенном варианте стандарта — Enhanced TIFF (Расширенный TIFF)).

Adobe PhotoShop может сохранять в формате TIFF дополнительные элементы изображения, например направляющие линии.

Еще одна особенность формата TIFF — возможность сохранения нескольких изображений, имеющих собственные наборы атрибутов и свойств (тегов) в одном файле. Это делает TIFF похожим на формат GIF, но без возможности создания анимированных изображений.

Важное свойство формата TIFF — использование сжатия данных. Такое сжатие не является обязательным и может быть включено или выключено пользователем. В большинстве случаев используется алгоритм сжатия LZW (метод Лемпела – Зива — Уолша, сжатие без потерь информации), но может применяться и сжатие с потерями (например, алгоритм JPEG). Сжатие данных позволяет существенно снизить размер файла. Особенно сильно это проявляется на изображениях, содержащих большие однотонные пространства, например, на отсканированных текстах и схемах.

Однако сжатие данных можно применять далеко не всегда. Дело в том, что алгоритм LZW защищен патентом, и фирмы-разработчики вынуждены оплачивать его использование в своих программах. Поэтому далеко не все программы могут сохранять файлы со сжатием и правильно читать их. Если вы отправляете кому-либо файлы в формате TIFF, то лучше воспользуйтесь какой-либо программой-архиватором (например, WinRaR или WinZip). Это уменьшит вероятность того, что ваши файлы не смогут быть открыты получателем.

Работая в PhotoShop, можно сохранять файлы в формате TIFF с расширенными возможностями. Для этого в диалоге выбора имени и формата файла, отображаемого на экране при вызове команды File -> Save As (Файл — > Сохранить как…) или File ->Save (Файл — > Сохранить) при первом сохранении файла выбрать формат Enhanced TIFF (Расширенный TIFF).

Формат TIFF широко распространен не только на платформе IBM PC, но и на Apple Macintosh (собственно, Macintosh — «родина» формата TIFF). Многие графические редакторы (разумеется, и Adobe PhotoShop) поддерживают сохранение и чтение файлов в режимах IBM PC и Apple. Эти режимы различаются порядком записи файлов.

То, что TIFF «прижился» и на IBM PC, и на Apple, позволяет использовать его для передачи изображений с одной аппаратной платформы на другую без потери их свойств, атрибутов и, разумеется, содержания. Также этот формат можно использовать для передачи данных между различными приложениями, «не понимающими» форматы друг друга, но «знающими» TIFF. При такой передаче будут сохранены многие атрибуты изображения, теряющиеся, например, при передаче данных через буфер обмена Windows.

Для сохранения цветов изображения при передаче с одного компьютера на другой (из-за различий в составе аппаратного обеспечения и его настроек цвета могут отображаться иначе) в состав файла может быть включен цветовой профиль ICC.

Если сохранять файл в формате TIFF в одной программе и нет возможности открыть его в другой, то, возможно, дело в несовместимости наборов тегов, используемых в этих приложениях. При отсутствии другого пути обмена данными можно попробовать открыть такой файл в какой-либо другой программе (например, в программе просмотра ACDSee) и сохранить его в TIFF или в другом формате.

В заключение следует добавить, что формат TIFF может применяться для сохранения промежуточных результатов работы, не требующих внедрения специфической информации (векторных объектов, направляющих линий, слоев и других объектов). Распространенность этого формата позволяет легко переносить изображения между программами и аппаратными платформами. Использование цветокоррекции (профилей ICC) дает возможность сохранить цвета без изменения (насколько это возможно) при просмотре на разных мониторах и при выводе на печать.