Оптимизация изображений в формате GIF.

Форматы GIF и JPG, а точнее оптимизация изображений, используют совершенно разные методы, поэтому и сильно отличаются друг от друга. Используются для хранения изображений с количеством цветов не более 256, поддерживают палитру и используют сжатие без потерь по методу LZW.

Рассмотрим применяемые методы оптимизации (исключая анимированные GIF):

• уменьшение количества цветов
• оптимизация палитры
• стилизация
• искажение размеров
• фрагментарная оптимизация
• оптимизация «прозрачных» изображений
• использование чересстрочной развертки

Теперь рассмотрим по порядку все эти методы и приемы оптимизации.

Уменьшение количества цветов

У картинок, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Вы уменьшите размер картинки, если уберете лишние цвета. Возможно задать любое число цветов палитры в диапазоне 2-256, но только теоретически, например, 29 цветов или 112. А если на практике, то количество цветов выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а представленный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). Рассмотрим пример. Допустим, мы берем только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Следовательно, нужно ориентироваться на приведенный выше ряд при оптимизации количества цветов, это позволит получить более качественную картинку.

Оптимизация палитры изображения

Преобразование полноцветного изображения в индексное (т.е. — с использованием палитры) является важным делом, и это не делается без современных графических пакетов, вот их мы и рассмотрим.

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

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

Стилизация изображения.

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

Искажение размеров 

Его применяют для рисунков из элементов типа линий и однородных областей. Указав необходимые пиксели, браузер сам растянет наш пиксель до нужных размеров.

Фрагментарная оптимизация

Оптимизируется каждый фрагмент отдельно. При малом количестве цветов достаточно палитры в 8 или 16, а для богатых цветами фрагментов — 256, или сохранение в формате JPG. Тем самым, уменьшается объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно.

Оптимизация «прозрачных» изображений

Браузер, имея «прозрачный» пиксель, игнорирует его и не печатает на экране. Для уменьшения проявления этого является назначение прозрачным пикселя по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing‘а на этом же фоне.

Использование чересстрочной развертки.

А именно: строчки, составляющие изображение, перемежаются, и при загрузке браузер выводит каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, всё изображение загружается. Иногда это сравнивают с выводом типа «жалюзи». Для многих этот метод удобен, а остальное решать вам, что использовать при адаптации.