Сколько разных цветов можно использовать в формате gif
Перейти к содержимому

Сколько разных цветов можно использовать в формате gif

  • автор:

Сколько разных цветов можно использовать в формате gif

4.1 Растровый формат GIF

Файловый растровый формат GIF ( Graphics Image Format ) был предложен фирмой CompuServe Inc . для протокола передачи цветных изображений в глобальных сетях. С его помощью организуется обмен графическими и содержащими элементы графики файлами. Этот формат используется для хранения нескольких растровых изображений в одном файле и применяется для обмена растровыми данными между платформами и системами.

Актуальность концепций реализованных в формате GIF с особой очевидностью проявилась в связи с расширенным использованием электронных изданий (в виде Web – страниц или Web – сайтов). Несмотря на все возрастающую пропускную способность сетевых аппаратных средств, и, в частности, модемов, достаточно остро стоит вопрос объема графических элементов электронных изданий. С одной стороны, наглядность и эффективность электронного издания во многом зависит от качества графических элементов, и, в первую очередь, от разрешения и глубины цвета пикселов изображения. Поэтому понятно стремление разработчиков электронных публикаций использовать многокрасочные графические изображения.

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

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

Поэтому формат GIF, главным достоинством которого является минимальный размер файлов, до сих пор сохраняет свое значение основного графического формата World Wide Web.

Резервы экономии в GIF не исчерпываются одной лишь компрессией данных. Одной из особенностей этого формата является то, что он позволяет произвольно задавать количество цветов, или размер палитры, используемой в изображении. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, 256, 2 15 (режим «high color») и 2 24 (режим «true color»). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, например, 64 цвета (2 6 ), то для хранения каждого пиксела будет использовано шесть бит.

Еще одна особенность формата GIF состоит в том, что разработчики изменили порядок следования данных в файле. За счет этого передаваемое изображение рисуется сверху вниз с изменением четкости и детальности. То есть изображение становиться все четче и детальнее по мере поступления информации из сети. Для этого файл изображения формируется при записи так, чтобы сначала шли все строки пикселов с номерами, кратными восьми (первый проход), затем четырем (второй проход), потом двум, и, наконец, последний проход — все оставшиеся строки с нечетными номерами. Во время приема и декодирования такого файла каждый следующий проход заполняет «пропуски» в предыдущих, постепенно приближая изображение к исходному состоянию. Нечто подобное используется в телевидении для передачи одного полного кадра полукадрами (так называемая «чересстрочная развертка»). Поэтому такие изображения были названы чересстрочными (interlaced).

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

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

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

Формат GIF позволяет хранить растровые данные в пикселях с глубиной цвета от 1 до 8 бит. Изображения записываются с применением цветовой модели RGB и данных палитры. Формат позволяет хранить изображения размером до 64000 пикселов, выбирать 256 цветов в 64 миллионной палитре, обеспечивает быструю распаковку при просмотре, эффективное сжатие и аппаратную независимость. Формат позволяет хранить в одном файле несколько изображений, но эта возможность, как правило, используется при кодировании анимаций.

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

GIF87a предусматривал следующие возможности GIF-файла:

— Чередование (interlacing). Вначале загружается только «остов» изображения, потом, по мере загрузки, оно детализируется. Это позволяет на медленных линиях не грузить весь графический файл целиком для того, чтобы получить о нем представление.

— Сжатие (compression) по алгоритму LZW. Эта черта GIF-файлов держит их в лидерах по наименьшему объему файла.

— Размещение нескольких изображений в одном файле.

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

В дальнейшем, этот стандарт был расширен спецификацией GIF89a, которая добавила следующие возможности:

— Включение в графический файл комментариев (не отображаются на экране, но могут быть прочитаны программой, поддерживающей GIF89a).

— Управление задержкой перед сменой кадров (задается в 1/100 секунды, или ожидание ввода пользователя).

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

— Определение прозрачного цвета.

— Создание управляющих блоков прикладными программами (application-specific extensions). Внутри GIF-файла можно создать блок, который будет игнорироваться всеми программами, кроме той, для которой он предназначен.

Спецификация GIF 87а. Эта первоначальная версия формата GIF , которая была выпущена в мае 1987 года. Она читается большинством программных приложений, поддерживающих формат GIF .

Основные элементы структуры файла GIF 87а представлены на рис. 1.

Рис. 1 Структура файлового формата Gif 87а

Каждый файл начинается с Заголовка (Идентификатора) и Дескриптора логического экрана, после которых может следовать Глобальная цветовая таблица. Каждый из этих разделов имеет постоянное смещение от начала файла. Любое изображение, записанное в файле, содержит собственный Локальный дескриптор изображения, Локальную цветовую таблицу (необязательную) и блок данных изображения. Последним полем в формате GIF является символ Завершитель, который указывает конец данных GIF .

Заголовок имеет длину 6 байтов и применяется для идентификации файла GIF . Заголовок включает: Сигнатуру заголовка ( Signature ) и Версию формата ( Version ) GIF .

Поле Signature имеет длину 3 байта и содержит в качестве идентификатора обязательные символы « GIF ». Ни один из файлов не будет распознан приложением как файл изображения GIF , если он не начинается с этих трех байтов.

Поле Version также имеет длину 3 байта и указывает версию файла GIF (87a или 89а).

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

Рис. 2 Структура дескриптора логического экрана

Поля ширина и высота (1-4 байт) определяют минимальное разрешение экрана, требуемое для воспроизведения изображения. Если устройство отображения не способно поддерживать указанное разрешение, то для правильного воспроизведения изображение следует масштабировать. Значение «pixel» также определяет число цветов в изображении. Диапазон значений ‘pixel’ составляет от 0 до 7, что соответствует от 1 до 8 битам. Это транслируется в диапазон от 2 (черно-белые изображения) до 256 цветов. Бит 3 в байте 5 зарезервирован для будущих определений и должен быть нулевым.

Глобальная цветовая таблица . Эта таблица является необязательной и рекомендуется для изображений, где требуется точная передача цветов. На существование этой таблицы указывает поле M в байте 5 дескриптора экрана. Обычно, глобальная таблица будет использоваться, из-за ограничений, существующих в настоящее время в доступном оборудовании. Флаг M в дескрипторе конкретного изображения обычно равен 0. Если глобальная таблица цветов присутствует, ее определение следует непосредственно за дескриптором экрана. Каждый элемент цветовой таблицы состоит из трех байтов, значения которых описывают соответственно относительную интенсивность красного, зеленого и синего цветов, для каждого пиксела изображения. Структура блока цветовой таблицы представлена на рис. 3.

Рис. 3 Структура блока цветовой таблицы

Получаемое значение кода цвета каждого пикселя при высвечивании изображения будет соответствовать ближайшему доступному цвету из цветовой таблицы дисплея. Цветовые компоненты представляют собой значение относительной интенсивности от нулевой (0) до полной(255). Белый цвет может быть представлен как (255,255,255), черный как (0,0,0) и желтый как (180,180,0). При высвечивании на дисплеях, которые поддерживают менее 8 бит на цветовую компоненту, используются старшие биты. При создании элементов цветовой таблицы GIF на аппаратуре, поддерживающей менее 8 бит на компоненту, значение аппаратной компоненты рекомендуется конвертировать в 8-битный формат с помощью следующего соотношения:

Если Глобальная цветовая таблица отсутствует, то каждое изображение должно иметь свою собственную Локальную цветовую таблицу, которая заменяет Глобальную цветовую таблицу. Если ни Глобальной, ни Локальной цветовых таблиц нет, цветовая таблица может задаваться по умолчанию.

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

Локальный дескриптор изображения размещен перед соответствующим разделом данных по конкретному изображению. Каждый дескриптор изображения начинается с символа-разделителя изображений. Роль разделителя изображений состоит в синхронизации при входе в дескриптор изображения. Это целесообразно, если GIF-файл включает более одного изображения. Этот символ определен как шестнадцатеричный код запятой («,»). Как только этот символ встречается между данными об изображениях, непосредственно за ним следует дескриптор изображения. Любой символ, встреченный между концом предыдущего изображения и символом-разделителем изображения игнорируется. По мнению разработчиков, это позволит при последующих модификациях GIF допускать присутствие нескольких форматов и правильно игнорировать их старыми декодерами.

Локальный дескриптор изображения включает следующие компоненты:

— Идентификатор дескриптора изображения.

— Положение изображения на экране по оси Х.

— Положение изображения на экране по оси У.

— Ширина изображения в пикселах.

— Высота изображения в пикселах.

— Информация об изображении и данных цветовой таблицы.

В разделе информации об изображении определяются флаги, указывающие на присутствие локальной таблицы для поиска цветов и определения последовательности высвечивания пикселов: флаг локальной цветовой таблицы (бит 0), флаг чередования (бит 1), флаг сортировки (бит 2), размер элемента локальной цветовой таблицы (биты 5 – 7). Биты 3 – 4 зарезервированы.

Значение флага локальной цветовой таблицы равно 1, если для данного изображения существует локальная цветовая таблица. Если значение этого флага равно 0, то локальная цветовая таблица отсутствует и вместо нее следует использовать глобальную цветовую таблицу.

Значение флага чередования равно 1, если строки изображения чередуются, и 0 в противном случае. Данные изображения GIF хранятся в виде строк развертки и попиксельно. Строки развертки, из которых состоит изображение, обычно хранятся в определенной последовательности – с первой по последнюю. Формат GIF поддерживает и альтернативный способ хранения строк растровых данных – в порядке чередования.

На рис.4 представлен порядок строк, записанных обычным способом и по принципу чередования.

Рис.4 Порядок строк

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

GIF использует четырехпроходную схему чередования. Первый проход начинается со строки 0, затем читается восьмая строка растровых данных. Второй проход начинается с четвертой строки, затем вновь читается восьмая строка данных. Третий проход начинается со второй строки, затем читается четвертая. Последний проход начинается с первой и читается вторая. По этой схеме обрабатываются все строки изображения.

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

Значение флага сортировки определяет, отсортированы ли элементы в цветовой таблице по степени их важности. Определяется это частотой появления цвета в изображении. Значение 1 указывает на отсортированную цветовую таблицу, значение 0 – на таблицу с не отсортированными цветовыми элементами. Субполе Флаг сортировки имеет корректное значение только в версии GIF 89 a ; в версии 87а оно зарезервировано и всегда установлено в 0.

Значение размер элемента локальной цветовой таблицы указывает количество битов на элемент локальной цветовой таблицы

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

Каждый подблок данных начинается со счетчика байтов. Значение счетчика может изменяться в диапазоне от 1 до 255, определяя количество байтов данных в этом подблоке. Данные подблока следуют непосредственно за счетчиком байтов. Непрерывная группа подблоков данных завершается байтом с нулевым значением. Этот байт может рассматриваться либо как символ – ограничитель, либо как подблок со значением счетчика, равным 0. В обоих случаях он указывает на то, что данных больше нет.

Файлы GIF не содержат непрерывного потока закодированных LWZ – данных. Эти данные посылаются декодеру по мере чтения подблоков. Большинство подблоков, в которых хранятся данные изображения, имеют длину 255 байтов. Следовательно, именно этот размер лучше всего подходит для буфера, в котором хранятся закодированные данные изображения.

Декодированные данные изображения GIF отличаются довольно простым форматом. Каждый пиксель в декодированной строке развертки всегда имеет размер 1 байт и содержит значение индекса из Глобальной либо Локальной цветовых таблиц. Структура файла формата GIF допускает хранение цветовой информации непосредственно в данных изображения, но в спецификации GIF подобная возможность не предусмотрена. Поэтому даже 1 – битовые изображения должны использовать 8 – битовое значение индекса и цветовую таблицу из двух элементов.

Терминатор G IF . Для фиксации процесса окончания файла изображения GIF, используется один байт данных, который рассматривается как последний символ файла. Значение этого байта всегда равно 3Bh (шестнадцатеричный код символа «;»). Терминатор (или завершитель) воспринимается декодером GIF как сигнал окончание процесса обработки изображения. Он должен присутствовать в каждом файле GIF .

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

Обычно декодирующая программа дает команду на прекращение графического режима и возвращается к предыдущему процессу.

Расширенный блок GIF . Для того чтобы обеспечить расширение определения GIF, необходим механизм для определения метода упаковки внутри потока данных GIF. Такое расширение было определено и документировано CompuServe для того, чтобы предусмотреть управляемый способ усовершенствований формата. Расширенный блок GIF пакуется способом, похожим на тот, который использовался для растровых данных, но не сжимается. Основная структура блока приведена на рис. 5.

Рис. 5 Структура блока расширения

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

Формат GIF 89 a .

В дальнейшем, стандарт GIF был расширен спецификацией GIF89a, которая добавила формату указанные выше функциональные возможности.

Структура файла GIF89a. Файл GIF89a состоит из блоков, расположенных в определенной последовательности. Выделяют блоки трех типов:

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

Блоки изображения: изображение, текст, описание палитры — содержат данные для самого изображения.

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

Общая схема следования этих блоков:

— Заголовок (идентификатор) — определяет формат файла ( GIF 87 a или GIF 89 a ).

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

— Описание глобальной палитры (необязательно).

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

— Признак конца файла.

Комментарии и специальные блоки могут располагаться где угодно, кроме:

— До описания глобальной палитры (если оно есть) или до описания логического экрана.

— Между блоком управления и соответствующим ему блоком изображения.

— После признака конца файла.

GIF не единственный формат, позволяющий кодировать и сжимать растровую графику. Определенные способности к сжатию есть у форматов BMP, PCX и многих других. Однако GIF — один из немногих форматов, использующих алгоритм сжатия, почти не уступающий по эффективности программам-архиваторам.

Резервы экономии в GIF не исчерпываются одной лишь компрессией данных. Одним из главных достоинств этого формата является то, что он позволяет произвольно задавать количество цветов, или размер палитры, используемой в изображении. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, а потом сразу 256, 2 15 (режим «high color») и 2 24 (режим «true color»). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, скажем, 64 цвета (2 6 ), то для хранения каждого пикселя будет использовано ровно шесть бит.

Иногда описанная выше редукция палитры обходится вообще без потерь качества, так как исходное изображение уже содержало меньше 256 цветов. Но в современных документах иногда требуется более представительная палитра цветов. В этом случае приходится аппроксимировать исходное изображение цветами усеченной палитры. Наиболее часто используется метод аппроксимации, получивший название: диффузия (diffusion, или dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполняются смесью пикселей разных цветов, разбросанных по случайному закону. Как правило, каждый отсутствующий в редуцированной палитре цвет передается пикселями двух самых близких к нему цветов новой палитры. В результате изображение приобретает характерную зернистую, шершавую фактуру. Очень часто диффузия является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов нет.

Нечто подобное используется в телевидении для передачи одного полного кадра за два прохода луча (так называемая «чересстрочная развертка»). Поэтому такие изображения были названы чересстрочными (interlaced).

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

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

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

Сколько разных цветов можно использовать в формате gif

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

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

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

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

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

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

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

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

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

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего — области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем «перемешивания» точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой — нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.

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

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

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

Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича 😉 размером 100×100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1×1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100×100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.

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

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

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

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

Формат GIF позволяет сохранять т.н. «прозрачные» изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая «прозрачный» пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing’а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом — на контрастном синем, и ореол хорошо виден.

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

И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи :). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки. Приведенные ниже изображения показывают разницу при загрузке нормальных (слева) и чересстрочных (справа) изображений.

Сколько разных цветов можно использовать в формате gif

GIF — Graphics Interchange Format, разработан фирмой CompuServe в 1987-89 гг. для хранения растровых цветных изображений. Многие другие графические форматы, разработанные в те годы уже давным-давно забыты. Но этот формат активно используется до сих пор. Почему? Ведь в нем даже нельзя хранить полноцветные изображения, а лишь палитровые. Что же в нем привлекательного?

  • Создание анимированных изображений, то есть возможность хранения в одном файле не одного, а сразу нескольких изображений, которые сменяют друг друга на экране через заданные промежутки времени.
  • Возможность использования «прозрачного» цвета. Аналогичная возможность есть и в других форматах (например, PNG), однако её использование более сложно и громоздко.

Сравним результаты сохранения одного и того же изображения в разных форматах. Левая картинка (рис.1) — это файл x_cub.gif размером 2225 байт (файл на рис.2 имеет тот же размер). В формате png картинка будет точно такая же, но размер файла — 1662 байта. Сохраним теперь ту же картинку в jpg-файле с различным уровнем качества (q).


Рис. 3. jpeg, q=100, 21 742 байта.

Рис. 4. jpeg, q=80, 10 718 байтов.

Рис. 5. jpeg, q=60, 8 222 байта.

Рис. 6. jpeg, q=40, 6 635 байтов.

Видно, что jpg-файлы имеют либо слишком большой размер, либо недостаточное качество, при q=40 дефекты бросаются в глаза, хотя при q=80 труднозаметны.

Можно ли сохранять в формате gif фотографию? В принципе можно. Но её для этого придется перевести из полноцветной в палитровую.

Что это значит? В полноцветном изображении, например, в jpeg, цвет каждой точки задается тремя числами — яркостью красного (Red), зеленого (Green) и синего (Blue), все вместе, — три целых числа RGB. Каждое число занимает 1 байт и значит, лежит в пределах от 0 до 255. Все три байта вместе могут принимать 256 3 ~= 16 млн. значений. В GIF-файле цвет очередной точки не произвольный, а из заранее заданной палитры, то есть из некоторого заранее заданного набора RGB-цветов. Цветов в палитре не может быть больше 256 (меньше — может).

Таким образом, прежде чем сохранять фотографию в виде gif-файла, надо уменьшить количество цветов. Причем сделать это так, чтобы фотография визуально не слишком изменилась. Для этого надо выбрать не более 256 различных RGB-цветов и каждый из цветов, присутствующих на фотографии надо «округлить» до одного из палитровых.

Посмотрим, каковы результаты сохранения фотографий в gif-файлах.


Рис. 7. jpeg, q=100, 118 502 байта.

Рис. 8. jpeg, q=95, 67 340 байтов.

Рис. 9. gif, 80 052 байта.

Рис. 10. png, 71 875 байтов.

Картинки на рисунках 9 и 10 идентичны, содержат по 256 различных цветов, это палитровые изображения. Для сравнения, те же картинки в jpeg-формате (рис. 7,8) содержат примерно по 50 тыс. различных цветов.

Вы не видите разницы? Она есть, только в глаза не бросается. Посмотрите повнимательнее, например, на фактуру асфальта в нижнем левом углу.

Формат не поддерживает полноцветные изображения (TrueColor), а лишь только палитровые: в начале файла задается некоторая таблица RGB-цветов (не более 256 штук) и цвет каждой точки задается в виде номера в этой таблице. Таким образом, каждая точка кодируется одним-единственным байтом. Таблица цветов может считаться стандартной (или серой) и в этом случае отсутствовать в файле. Несмотря на невозможность хранения полноцветных изображений, качество gif-файла весьма высокое и обычно такое изображение трудно на глаз отличить от полноцветного.

Последовательность байт, описывающих изображение сжимается стандартным LZW-алгоритмом.

Интересной особенностью формата является «прозрачный цвет»: один из элементов таблицы цветов объявляется прозрачным. Очень удобный эффект для применения в html-файлах. Другая важная черта — возможность сохранения в одном файле сразу нескольких изображений (анимированный gif) и последовательный вывод на экран одного за другим с заданным интервалом. Эта возможность широко используют в интернете для получения простейшей анимации: при просмотре страницы на экране может все время что-то дергаться и крутиться. К счастью, большинство броузеров позволяют такую возможность отключить.

Общий формат файла

  • Идентификатор GIF: 6 байт, в символьном виде это должны быть либо «GIF87a» либо «GIF89a». Таким образом, первые 6 байт файла позволяют опознать файлы формата GIF.
  • Дескриптор экрана. 8 байт, описывающих логический экран, на котором происходит прорисовка отображения. Задается размер экрана, глубина цвета в битах и фоновый цвет. Фоновый цвет может быть «прозрачным».
  • Глобальная таблица цветов. Присутствует только если в дескрипторе экрана установлен соответствующий бит. Состоит просто из последовательности троек байт RGBRGB. . Длина таблицы является степенью 2 и указана в дескрипторе экрана.
  • Изображение (может повторяться много раз), состоит из трех элементов:
    1. Дескриптор изображения
    2. Локальная таблица цветов
    3. Растровые данные
  • Терминатор GIF: 0x3B или «;»
  • Ничего не делать
  • Заполнить область фоновым цветов (из дескриптора экрана)
  • Восстановить предыдущее изображение.

Патентные проблемы

Формат GIF активно использовался до конца 1994 года. Одна из его составных частей — алгоритм сжатия LZW. Он был запатентован в 1985 г., правда никих последствий это не имело.

Но 24 декабря 1994 года неожиданно две конторы, Unisys и CompuServe, которым в результате каких-то махинаций достался патент, совместно провозглашают, что любой разработчик, создающий программу, читающую или пишущую GIF-файлы, должен производить отчисления Unisys за использование алгоритма LZW.

В результате многие продукты прекратили использовать или поддерживать данный формат, а вместо него был разработан формат PNG.

Срок действия патентов заканчивался в 2005 году (точнее говоря, в разных странах немного по-разному). За две недели до окончания срока патента правообладатели устроили аттракцион «невиданная щедрость». Учитывая свою миссию в борьбе против тирании, помня о борьбе с голодом и об стонущих под игом, правообладатели безвозмезно, то есть даром отдают свое сокровище во всенародное пользование.

И теперь мы можем пользоваться этим методом сжатия совершенно свободно.

Сколько разных цветов можно использовать в формате gif

В программе Corel PaintShop Pro можно выполнить оптимизацию файлов GIF, что позволяет максимально повысить качество изображения и одновременно минимизировать размер файла. В зависимости от того, как изображения должны отображаться на веб-страницах, их можно сохранить с прозрачностью или без нее.

Изображения на основе палитры (с 256 или меньшим числом цветов, например файлы GIF или PNG) не поддерживают прозрачные фоны, однако часть изображения на веб-странице часто требуется сделать прозрачной. Например, может потребоваться, чтобы фон веб-страницы отображался вокруг круглого логотипа. В этом случае можно отключить отображение одного цвета. В большинстве средств просмотра Интернета этот параметр поддерживается и указанный цвет становится прозрачным.

В диалоговом окне «Оптимизатор GIF» содержатся четыре вкладки, на которых можно настроить параметры прозрачности, цвета и формата файла. На пятой вкладке отображается примерное время загрузки изображения при разных скоростях модемного соединения.

Вкладка «Прозрачность» диалогового окна «Оптимизатор GIF»

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

Вкладка «Частичная прозрачность» диалогового окна «Оптимизатор GIF»

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

Внимание! Если на вкладке «Прозрачность» выбран параметр Нет , другие параметры на этой вкладке будут недоступными.

Вкладка «Цвета» диалогового окна «Оптимизатор GIF»

Изображения GIF обладают глубиной цвета 8 бит; это означает, что они могут отображать до 256 цветов. Так как эти цвета хранятся в палитре, изображение с 256 цветами или меньше называется изображением на основе палитры. Для уменьшения размера файла число цветов может быть меньше 256. Параметры, доступные на этой вкладке, можно использовать для указания количества цветов и типа используемой палитры.

Вкладка «Формат» диалогового окна «Оптимизатор GIF»

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

Вкладка «Время загрузки» диалогового окна «Оптимизатор GIF»

На вкладке «Время загрузки» диалогового окна «Оптимизатор GIF» отображается размер сжатого файла и приблизительное время загрузки для четырех разных скоростей соединения с Интернетом. Если размер файла слишком большой, его можно уменьшить, сократив количество цветов.

Использование мастера прозрачности GIF

Мастер прозрачности GIF можно запустить из диалогового окна «Оптимизатор GIF». Этот мастер содержит пошаговые инструкции по оптимизации файла GIF.

Чересстрочная развертка

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

Оптимизация и сохранение файла GIF
Вкладка «Правка»
1 Выберите Файл > Экспорт > Оптимизатор GIF .

Отобразится диалоговое окно «Оптимизатор GIF», в левой области предварительного просмотра которого отобразится текущее изображение, а в правом – полученный файл GIF.

2 Перейдите на вкладку Прозрачность и выберите один из следующих параметров.
• Нет : создание файла GIF без использования параметра прозрачности.

• Прозрачность существующего изображения или слоя : использование текущих данных прозрачности, имеющихся в изображении.

• Внутри выделенного элемента : применение прозрачности для всего, что находится внутри выделенного элемента, если он имеется в изображении.

• Вне выделенного элемента : применение прозрачности для всего, что находится за пределами выделенного элемента, если он имеется в изображении.

• Области, соответствующие этому цвету : установка прозрачности на основе выбранного цвета. Щелкните поле цвета для выбора цвета или выберите цвет в изображении, наведя на него курсор и щелкнув кнопкой мыши. Затем установите или введите значение допуска в поле Допуск , чтобы определить, насколько цвета должны быть схожими с выбранным цветом, прежде чем стать прозрачными.

3 Перейдите на вкладку Частичная прозрачность и выберите один из следующих параметров.

• Использование полной прозрачности для пикселей, непрозрачность которых ниже x% непрозрачности : определение значения непрозрачности, при котором пиксели становятся прозрачными. Пиксели, имеющие значение непрозрачности ниже указанного, становятся прозрачными. Пиксели, имеющие значение непрозрачности выше указанного, становятся непрозрачными. Чем ниже значение, тем меньше прозрачных пикселей.

• Использование шаблона размывания 50% : частично прозрачные пиксели становятся непрозрачными, для чего используется цвет, выбранный для смешения, или цвет изображения (в зависимости от выбранного параметра смешения), затем применяется шаблон размывания 50%, чтобы цвета выглядели более естественно.

• Использование размывания с диффузией ошибок : частично прозрачные пиксели становятся непрозрачными, для чего используется цвет, выбранный для смешения, или цвет изображения (в зависимости от выбранного параметра смешения), затем применяется размывание с диффузией ошибок, чтобы цвета выглядели более естественно.

4 Выберите один из следующих параметров, чтобы указать способ смешения частично прозрачных пикселей.

• Да : смешение частично прозрачных пикселей с цветом, указанным в поле «Цвет смешения». Чтобы выбрать новый цвет, щелкните поле цвета и выберите его в диалоговом окне «Цвет». Частично прозрачные пиксели, имеющие значение прозрачности ниже указанного выше, смешиваются с этим цветом.

• Нет : использование цвета текущего изображения с непрозрачностью 100%.

5 Перейдите на вкладку Цвета и введите или установите значение в поле Количество цветов , чтобы определить количество цветов, которое требуется использовать в изображении.

Примечание: При удалении цветов размер файла уменьшается, однако одновременно снижается качество изображения. Используйте области предварительного просмотра для определения оптимального соотношения между размером файла и качеством изображения.

6 Введите или установите значение в поле Степень размывания .

Диапазон цветов – от 16 до 256. Это значение определяет способ, с помощью которого программа Corel PaintShop Pro упорядочивает пиксели в изображении, чтобы компенсировать недостающие цвета в смежных пикселях.

7 Выберите один из следующих параметров, чтобы определить палитру изображения.
• Существующая палитра : возможность использования палитры текущего изображения.

• Стандартная/веб-совместимая : возможность использования веб-совместимой палитры для изображений, которые планируется использовать в Интернете.

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

• Оптимизированное 8-уровневое дерево : возможность оптимизации изображения, содержащего всего несколько цветов.

Примечание: Для выбора параметра, обеспечивающего оптимальный результат, удовлетворяющий потребностям, возможно, будет необходимо попробовать и «Оптимизированный медианный вырез», и «Оптимизированное 8-уровневое дерево».

8 В окне группы «Параметры» установите флажок Включение цветов Windows , чтобы включить цвета в палитру 16 стандартных цветов Windows.

Если изображение предназначено для использования в Интернете, установите этот флажок.
9 Перейдите на вкладку Формат и выберите один из следующих параметров.
• Без чересстрочной развертки : построчная загрузка изображения, начиная с верхней его части.

• С чересстрочной разверткой : поэтапное отображение изображения с повышением его детализации на каждом этапе.

Примечание: Параметр «С чересстрочной разверткой» следует выбирать для больших изображений, чтобы пользователь еще в процессе загрузки изображения мог понять, как оно выглядит.

10 Выберите один из следующих параметров.

• Версия 89a : возможность сохранения данных о прозрачности. Если в изображении содержатся прозрачные пиксели, этот параметр выбирается автоматически.

• Версия 87a : возможность сохранения изображения, для которого не указано значение прозрачности.

11 Нажмите кнопку ОК , чтобы открыть диалоговое окно «Сохранить как», перейдите в папку, в которой требуется сохранить новое изображение, и введите имя файла.

12 Нажмите кнопку Сохранить .
Использование мастера прозрачности GIF
Вкладка «Правка»
1 Выберите Файл > Экспорт > Оптимизатор GIF .
Откроется диалоговое окно «Оптимизатор GIF».
2 Нажмите кнопку Мастер и следуйте инструкциям.

3 Нажмите кнопку Завершить , чтобы закрыть мастер и открыть диалоговое окно Сохранить как , в котором вводится имя и выбирается папка для сохранения файла GIF.

Дополнительные возможности
Выбор цвета в изображении

На странице 1 или 2 в мастере наведите курсор на изображение и щелкните цвет. Выбранный цвет отобразится в поле образца цвета.

Выбор цвета в диалоговом окне «Цвет»

На странице 1 или 2 в мастере щелкните образец цвета, чтобы открыть диалоговое окно «Цвет». Дополнительные сведения об элементах управления диалогового окна «Цвет» см. в разделе «Выбор цвета в диалоговом окне» на странице 30.

Изменение настройки

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *