Графические изображения
Графические вставки являются наиболее объемными элементами обычных
Web-страниц. По этой причине большинство приемов оптимизации ориентировано
именно на изображения. В WWW используются (в основном) два типа форматов
хранения графики: GIF(Graphics Interchange Format) и JPEG(Joint Photographic
Experts Group). Оба они имеют свои достоинства и недостатки и имеют немного
различные области применения. Формат GIF имеет ограничение на количество
одновременно используемых в одном изображении цветов, их не может быть
больше 256. При этом достигается довольно неплохой коэффициент сжатия
без потерь (то есть, упакованное изображение полностью соответствует оригиналу)
так как используется алгоритм LZW, отчасти используемый во многих популярных
программах сжатия данных (ZIP, ARJ, LHA). Формат JPEG всегда использует
так называемую ``полную'' цветовую модель, позволяя иметь в одном изображении
очень много цветов (а именно - до ). Обычно такая
обширная цветовая гамма необходима для хранения цифровых фотографий.
Однако при таком великолепии цветов формат имеет один ``недостаток'',
одновременно являющийся его достоинством: использование алгоритма сжатия с
потерями. Это означает, что при упаковке изображение будет ИЗМЕНЕНО для
достижения нужного коэффициента сжатия. На фотографиях такие изменения,
связанные с устранением избыточной информации, почти не воспринимаемой
глазом, почти не заметны, тогда как схему или график алгоритм может просто
изувечить. Тем не менее, при хранении многоцветных изображений типа
фотографий формат является предпочтительным, так как обеспечивает
очень высокую степень сжатия.
Таким образом мы пришли к основополагающему моменту оптимизации размера -
выбору формата хранения данных. Как уже говорилось выше, если нужна
точность сохранения каждого пиксела (точки изображения) и ограничение
на количество цветов не так уж важно, используйте формат GIF. Если же
необходимо иметь в изображении больше чем 256 цветов, не используя
никаких технологий смешивания, придется остановиться на формате JPEG,
обеспечив с помощью подбора коэффициента сжатия оптимальное соотношение
качества и байтового размера. Итак, первое правило:
Правильно выбирайте формат хранения изображения.
Помните, чем больше цветов имеет изображение, тем больше оно занимает места.
Очень часто при сохранении даже очень простых картинок в формате GIF выбирается
палитра из 256 цветов (8 битов на точку). Это не всегда оправдано, так как
иногда изображение содержит гораздо меньше цветов и может быть сохранено
с гораздо более низким цветовым разрешением (количеством бит на точку).
Например, если в изображении используется, скажем, 50 цветов, оно может быть
сохранено с палитрой в 64 цвета (6 битов на точку). Это может стоить
почти 30-ти процентной экономии размера! К сожалению, этот трюк не применим
к изображениям в формате JPEG, так как этот формат всегда использует
полную цветовую модель.
Итак, второе правило:
Сохраняйте изображения с цветовым разрешением, соответствующим количеству
цветов.
Труднее всего алгоритмам сжатия даются плавные цветовые переходы (у плавных
цветовых переходов имеются также и другие недостатки). Посему старайтесь
ими не злоупотреблять, если этого можно избежать. Кроме того, существует
проблема ограничения числа одновременно отображаемых цветов на устройствах
вывода (не у всех есть супер-гипер-термоядерные графические адаптеры с 16-ю
мегабайтами видеопамяти и ускорителями трехмерной графики!). То, что на одних
системах выглядит не миллион долларов, может повергнуть пользователей
старых добрых 256-ти цветных систем в состояние мрачного уныния.
Проверяйте вновь созданные Web-страницы на как можно более широком спектре
систем с различными возможностями.
Третье правило:
Избегайте сложных цветовых эффектов, они могут вызвать сильный рост
объема получаемых файлов.
Не все графические пакеты сами хорошо оптимизированы. Этот факт хорошо
иллюстрируется тем, что сохраняемые GIF-файли все еще имеют в себе избыток
информации. Окончательно ``выжать'' из них все лишнее (например, устранить
неоптимальности сжатия и устранить комментарии) помогают специальные
утилиты. Одной из таких утилит является свободно распространяемая
программа giflite для системы DOS. Она поистине творит чудеса, уменьшая
GIF-файлы на 10-50 процентов, не изменяя при этом хранящихся в них
изображений. Аналогом этой программы для систем семейства UNIX является
утилита gifblast (свободно распространяется в исходных текстах).
Обе эти программы можно найти на многих крупных FTP-серверах (воспользуйтесь
системой archie или одной из крупных поисковых систем по свободному
программному обеспечению вроде
или Jumbo.
Полученное нами четвертое правило гласит:
Используйте программы оптимизации GIF-файлов, они могут творить чудеса!
Всем известен способ делать GIF-файлы постепенно появляющимися (interlaced),
что позволяет достичь эффекта ускорения загрузки. Но далеко не все знают,
что при этом файлы становятся больше...Этот печальный факт вызван принципом
работы алгоритма LZW, используемого в формате GIF. Дело в том, что при
кодировании черезстрочного изображения строки его обрабатываются в порядки их
последующего отображения, то есть: первая, четвертая, седьмая и т.д. Это
эквивалентно сжатию другого изображения, состоящего из тех же строк, что и
исходное, только в другом порядке. Представьте, что оно из себя представляет!
Изображение становится сложнее с точки зрения наличия повторяющихся элементов.
Следствие -- увеличение размера.
Таким образом, Пятое правило говорит нам:
Не потеряйте желаемого эффекта ускорения загрузки, используя interlaced
GIF-файлы. Они могут намного сильно больше, чем раньше.
В последних версиях Netscape Navigator появился новый параметр тега <IMG>
под названием LOWSRC, который позволяет задать изображение низкого цветового
разрешения (обычно и вовсе черно-белое), которое должно быстро передаваться
и отображаться в то время, пока настоящее изображение (обычно большого размера)
подкачивается браузером. Не обманывайтесь! Добавляя в вашу страницу еще одно
изображение, вы только увеличите ее объем. Лучше сделайте более информативную
запись в параметре ALT тега <IMG>.
Шестое правило:
Параметр LOWSRC -- не спасение от медленных каналов связи а,
скорее, наоборот.
Иногда приходится вставлять в документ однотонное изображение, вроде
одноцветной разделительной полосы. При этом можно очень сильно сэкономить
в размерах, используя параметры WIDTH и HEIGHT тега <IMG>. Если указать
в них размеры, отличающиеся от реальных размеров растра изображения,
то изображение будет смасштабировано (увеличено или уменьшено) до указанных
размеров. Естественно, что сложные картинки при этом сильно испортятся, тогда
как простые однотонные вовсе не пострадают. Таким образом, можно создать
совсем небольшое изображение и, указав нужные размеры, достичь необходимого
эффекта с гораздо меньшими затратами.
Седьмое правило будет таким:
Используя параметры WIDTH и HEIGHT тега <IMG>, можно масштабировать
изображения, экономя, таким образом, на размерах.
