30.06.2006 | Автор Грибков А.Н.
Сжатие графики - введение.
В середине девяностых, когда интернет был ещё довольно молодым, а доступ к нему - медленным и дорогим по сегодняшним меркам, появилась необходимость в сжатии графики. Ещё бы - основная масса пользователей выходила на просторы Всемирной Паутины через модемы с максимальной скоростью 14400 килобод (реальная линейная - порядка 1.6 Кбайт/с), а порой и ниже. Загрузка каждой страницы отнимала прежде всего время, ну а время - деньги.
Прошло несколько лет. Количество пользователей интернета в России возросло с десятков тясяч до десятков миллионов. Выделенные каналы связи (по крайней мере, в крупных городах) стали доступными. Модемы не потеряли своей роли, и заметно ускорились. Тем не менее, вопрос - "О сжатии графики", по-прежнему актуален. Причин тому несколько.
Во-первых, пользователи выделенных линий часто платят за входящий трафик. При кажущихся смешными трёх центах за мегабайт, в месяц может набежать немаленькая сумма, образованная, помимо скачанных программ и музыки, заходами на "тяжёлые" сайты.
Во-вторых, не стоит забывать про обширную аудиторию абонентов GPRS. В 2000 году к технологям, использовавшимся для доступа в интернет, прибавилась General Packet Radio Service, ориентированная, в первую очередь, на мобильные устройства. Вкратце - это "вставка" пакетов данных в канал сотовой связи. Как следствие, оплата производится не за время доступа, а за объём переданной информации. Эту услугу предоставляют все крупные сотовые операторы, и поддерживает подавляющее большинство современных мобильных телефонов. Преимущества перед обычной телефонной связью очевидны - отсутствуют проблемы с дозвоном к провайдеру, а доступ в сеть можно получить даже в сельской местности, где нет телефонной линии.
Но есть и явные недостатки. Средняя стоимость одного мегабайта довольно высока - около 20 центов. И, как следствие структуры сотовой сети, происходят большие задержки пакетов - минимум полсекунды.
В-третьих, чрезмерная "перегрузка" страницы графикой часто начинает идти ей в ущерб. Новостным и литературным сайтам ни к чему пышное оформление, оно лишь отвлекает от содержания.
Как устроена графика?
Любое цифровое изображение дискретно. То есть, состоит из фиксированного количества точек-элементов. Сколько-то по "горизонтали", и сколько-то по "вертикали" (как таковых измерений у него нет, поэтому представим это изображение на экране монитора). На рисунке показана небольшая картинка при большом увеличении.
Разумеется, каждая картинка занимает в памяти компьютера некий объём. Несложно его подсчитать. В данном случае это 57 точек по горизонтали, 48 по вертикали - то есть, 57x48. Но, помимо этого, нужно учитывать и глубину цвета - максимальное количество оттенков, которое способно передать изображение.
Глубина цвета измеряется (как и всё в компьютере) в битах, и обычно составляет 1 (2 цвета), 2 (4 цвета), 4 (16 цветов), 8 (256 цветов), 24 (около 16.8 млн. цветов) или 32 (то же, плюс дополнительный слой прозрачности). В приведённом примере это 8 бит.
Итого: 57x48x8 = 21888 бит, или 2736 байт. Чтобы передать два с половиной килобайта, модему потребуется почти секунда. А что делать, если таких картинок - пара десятков? Кнопки меню, значки, "шапка" страницы, фон.. На сложном презентационном сайте счёт пойдёт даже не на десятки - на сотни килобайт. Ясно, что без в таком виде, без каких-либо изменений, выкладывать графику в сеть не стоит.
Алгоритмы сжатия графики.
Выход был найден ещё полвека назад, когда разрабатывались первые алгоритмы компрессии (сжатия) информации. Как они работают?
Простейший пример - строка "AAAAAAABBBBBAAABBCCCCCCCC" (25 символов) легко преобразуется в "7A5B3A2B8D" (25 символов) легко преобразуется в "7A5B3A2B8D" (10 символов). Достаточно заменить повторяющиеся последовательности их длиной. Этот метод применим далеко не всегда, и с часто меняющейся информацией даёт отрицательные результаты. Называется он RLE (Run-Length Encoding, групповое кодирование), и встретить его проще всего в соответствующем формате, ныне неиспользуемом - RLE.
К более сложным методам относятся арифметическое кодирование, алгоритм LZW (от первых букв Lempel, Ziff & Welsh, фамилий разработчиков), алгоритм Хаффмана, и их вариации. После их применения информация, в зависимости от её структуры, сжимается от полутора до десяти-двадцати раз.
Подобные алгоритмы используют широко распространённые программы-архиваторы. Мы слушаем сжатую музыку (MP3), смотрим сжатое видео (DVD/MPEG2, DIVX), и, разумеется, путешествуем по интернету, наблюдая вокруг исключительно сжатую графику.
Сжатие графики с потерями.
И RLE, и LZW, и алгоритм Хаффмана позволяют получить после распаковки точную копию исходного файла, байт в байт. Но такая точность требует жертв - то есть, занимаемого объёма. В сжатии видео и статичных изображений, а также музыки - стопроцентная точность не нужна, и некоторую информацию можно отбросить. При этом теряются тонкие переходы тонов и появляется лишний "мусор", но человек, как правило, подобных потерь не замечает, а если и замечает - то слабо.
За основу графического формата JPEG, использующегося, в том числе, в цифровой фотографии, взято именно сжатие с потерями. Сначала для каждой точки исходного изображения определяются яркость и цветность. Затем данные о яркости сжимается любым алгоритмом без потерь, а цветность, блоками 8x8 точек, преобразуется при помощи сложной формулы (DCT, Дискретное Косинусоидальное Преобразование) в таблицу частот её изменения. При этом наиболее несущественные частоты можно округлить с большими погрешностями, либо и вовсе проигнорировать. Настройки "качества JPEG" во многих программах как раз и определяют степень значимости высоких частот. Далее полученную информацию можно также сжать алгоритмом без потерь.
На рисунке показана зависимость качества и объёма изображения от настроек сжатия JPEG. Для повседневного использования обычно вполне хватает 70-85%.
Другие форматы.
Есть случаи, когда сжатие с потерями неприменимо. JPEG, к примеру, не рекомендуется использовать для хранения однородной заливки.
В подобных случаях используются форматы GIF (Graphic Interchange Format) и PNG (Portable Network Graphics). У первого есть ограничение на глубину цвета (8 бит), но присутствует поддержка анимации, у второго - ограничений нет. При работе с фотографиями они оба сильно проигрывают JPEG по итоговому объёму, но выигрывают за счёт отсутствия шума.
На рисунке слева - JPEG, качество 85%, справа - PNG (без потерь). Разница очевидна. В данном случае PNG выиграл в 6 раз и в размере - 458 против 2695 байт.
Разумеется, это не единственные форматы - всего их сотни. Но речь идёт о web-графике, с её строгими правилами.
Таким образом, при разработке web-страниц не стоит хранить всю графику в одном формате. Для каждого элемента нужно выбирать подходящий. Ведь посещаемость страницы зависит и от скорости её загрузки.