Форматы графических файлов (для учителя)

Выбор формата

Формат — это способ хранения информации в файле. Знание графических форматов — важный элемент образования компьютерного дизайнера. Оно помогает принимать правильное решение в пользу того или иного формата при подготовке иллюстраций для электронных и бумажных публикаций.

Если иллюстрация готовится для печати на бумаге, то важно сохранить её качество, даже ценой создания большого файла. Такие изображения создаются в режиме True Color (24 бита на пиксел) и сохраняются в формате BMP.

Еще лучше при создании графики для бумаги изначально использовать “бумажную” палитру CMYK и сохранять изображение в формате TIFF, который эту палитру поддерживает.

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

Решив сэкономить место на диске, Вася записал незавершённую работу в формате JPEG. На следующий день он понял, что придётся рисовать заново: качество сохраненной картинки повергло его в уныние.

Когда изображение передаётся по сети, то вопрос о размере файла становится очень серьёзным: сеть работает медленно и стоит денег.

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

Если картинка готовится для сайта, то такой способ сжатия не подходит: браузер “не понимает” заархивированных файлов. Приходится использовать “сетевые” форматы GIF, JPEG или PNG. При этом надо остановиться на том формате, который для данной конкретной картинки дает файл наименьшего размера при приемлемом качестве изображения.

Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается. Пользователь любит быстрое обслуживание и не хочет тратить лишние деньги.
Якоб Нильсен в своей замечательной книге Веб-дизайн (издательство Символ, Санкт-Петербург, 2000) пишет, что на сайте www.provenedge.com ограничение размера страницы сначала было 40 килобайт. При этом число пользователей, не дождавшихся загрузки, составляло 25-30%. Когда объем графики был уменьшен, число нетерпеливых понизилось до 7-10%.

В Читальном зале подробно рассмотрены форматы BMP, GIF и JPEG.

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

Такой режим сохранения графики используют на сайтах для больших картинок: они передаются в сеть “по кусочкам”. Картинка ведет себя, как фотография в ванночке с проявителем, не давая пользователю заснуть у экрана компьютера во время загрузки.

Использовать режим “проявления” на локальном компьютере смысла не имеет: вывод на экран чересстрочного GIF или прогрессивного JPEG практически не отличается от показа обычных картинок из-за большой скорости поступления кусочков изображения на экран.

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

Для создания анимированных картинок нужно использовать специальные или универсальные графические редакторы, которые имеют такую возможность. К последним относятся векторные редакторы Xara Webster и Xara X (www.xara.com/products/xarax). В качестве специальных редакторов можно упомянуть продукты GIF Movie Gear (www.gamani.com) и Ulead Gif Animator (www.ulead.com/ga).

Следует очень умеренно использовать анимированные иллюстрации. Ведь движение — сильный раздражитель. На экране — это самый заметный способ выделения элемента.

Проведите такой эксперимент. Попробуйте прочитать текст, рядом с которым беспрерывно в цикле анимируется “зайчик-попрыгайчик”. Вы сразу оцените воздействие анимации на ваши глазные рецепторы. Зайчик с периферии вашего внимания упорно скачет в ее центр. Сосредоточиться на тексте невозможно. Колбочки и палочки беснуются вместе с зайчиком!

Анимация не будет мешать восприятию информации, если она:

не прокручивается в бесконечном цикле
запускается и отключается по желанию пользователя

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

Paint и форматы GIF/JPEG

Сохранять рисунки в форматах GIF и JPEG может Paint, начиная с Windows 98 и выше. В Paint Windows 95 эта возможность обеспечивается установкой дополнительных модулей с сайта производителя.

Вы можете установить в Paint 95 дополнительные модули или отказаться от заданий практикума, связанных с записью из Paint картинок в форматах GIF и JPEG (учитывая отсутствие контроля размер/качество, потеря небольшая).

Но самое правильное — заменить ОС Windows 95 более новой версией.

Разнообразие форматов

Графические форматы можно условно разделить на три группы (в скобках указаны представители):

Растровые форматы (BMP, GIF, JPEG, PNG, TIFF, PSD).
Векторные форматы (WMF).
Универсальные форматы (EPS, CDR, WEB, XAR).

Растровые форматы

Растровые форматы хорошо подходят для вывода изображений в “натуральную” величину. Всякое масштабирование растровых картинок приводит к заметному ухудшению качества.

PNG

Формат PNG (Portable Network Graphics, переносимая сетевая графика) предназначен в первую очередь для передачи изображений по сети (он еще не так распространен, как форматы GIF и JPEG). Этот формат более эффективно, чем GIF, реализует сжатие без потерь (на 10-30%), но при этом может хранить не только графику с фиксированной палитрой, но и очень качественные изображения с 32 битами на пиксел.

TIFF

Формат TIFF (Tagged Image File Format, теговый формат файлов изображения) — один из самых распространённых форматов. Он поддерживает цветовые модели RGB и CMYK, может использовать сжатие без потерь и имеет возможность выполнения предварительного цветоделения, что упрощает подготовку изображения к выводу на печать.

PSD

Формат PSD (PhotoShop Document, документ редактора Photoshop) — рабочий формат редактора Photoshop. В последнее время этот формат получает поддержку все большего числа графических редакторов. По сравнению с рассмотренными в этом уроке форматами, формат PSD сохраняет изображения с большим количеством рабочей информации (разбивка изображения на слои, маски, альфа-каналы, контуры…), которая использовалась при создании изображения.

Формат очень удобен при выполнении длительного редактирования. Окончательную версию можно записать в каком-нибудь более “лёгком” формате без рабочей среды компьютерного художника.

Векторные форматы

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

Масштабирование векторного рисунка выполняется без проблем, как на уровне всего изображения, так и на уровне отдельных объектов. Можно, например, уменьшить рисунок, не уменьшая надписи на нём.

Векторный рисунок:

Принцип работы лазерного принтера

Геометрические размеры рисунка уменьшены на 25%, но надписи на схеме оставлены прежнего размера:

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

Почти все картинки на страницах “Азов информатики” создавались в векторном редакторе Xara X, а затем записывались в формате GIF или (реже) JPEG.

WMF

Формат WMF (Windows MetaFile, метафайл Windows) — стандартный векторный формат операционной системы Windows.

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

Профессиональные векторные редакторы используют, как правило, универсальные графические форматы.

Универсальные форматы

Большинство векторных форматов поддерживают и растровые объекты (фрагменты изображения, заливки, тени…). На практике это позволяет комбинировать векторную и растровую графику внутри одного рисунка.

EPS

Формат EPS (Encapsulation PostScript, скрытый PostScript) — рабочий формат программы Adobe Illustrator.

Для кодирования изображения используется упрощенная версия языка PostScript (специализированный язык программирования, разработанный фирмой Adobe Systems).

Этот формат поддерживается большинством векторных графических редакторов.

CDR

Формат CDR — рабочий формат векторного редактора Corel DRaw.

WEB

Формат WEB — рабочий формат векторного редактора Xara Webster.

XAR

Формат XAR — рабочий формат векторного редактора Xara X.

Оптимизация графики

Как отмечалось выше, уменьшение размера графического файла имеет особое значение в сайтостроении.

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

Первое, что можно сделать, это уменьшить геометрические размеры изображения.

Масштабирование картинок

Алгоритмы масштабирования, которые используют редакторы, сильно различаются.

Рассмотрим для примера иллюстрацию размером 500x343 из урока 2:

Принцип работы лазерного принтера

Вот как выглядит эта картинка при уменьшении линейных размеров на 25% в редакторе Photoshop:

То же преобразование, выполненное в редакторе Paint:

Качество масштабирования, выполненное Paint, оставляет желать лучшего. Видно, что этот редактор не использует анти-алиасинг (сглаживание): наклонные линии приобретают характерные ступеньки. “Краска” с букв частично “осыпалась”, мелкий текст практически не читаем.

Использование сжимающих форматов

Когда картинка уменьшена до оптимальных геометрических размеров, можно сохранить ее в формате, в котором предусмотрено сжатие.

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

В формате JPEG реализовано сжатие с потерями (часть цветов изображения просто отбрасывается).

Формат GIF реализует сжатие без потерь (если в GIF-палитре используются все цвета исходной картинки).

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

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

Редактор Paint не позволяет устанавливать параметры качества. В редакторе Photoshop это можно делать. Но лучше всего оптимизацию графики выполнять при помощи специального приложения с удобным интерфейсом и неотсроченным визуальным контролем.

Среди множества таких продуктов можно упомянуть Web Graphics Optimizer. В рабочем поле этого приложения размещаются исходное изображение и варианты преобразования в различные форматы:

Управление параметрами качества выполняется в специальном окне:

Практикум 1

Темы практикума:

Paint: форматы BMP, GIF, JPEG.
Paint: прозрачный GIF.

Рабочие файлы для практикума расположены в каталоге:

.\draw\work\unit09\

Практикум 2

Оптимизация графических файлов приложением Photoshop (отдельно для Photoshop 5 и Photoshop 7).

Рабочие файлы для практикума расположены в каталоге:

.\draw\work\unit09\

Практикум 3

Во вводной части практикума описан алгоритм построения гипертекстового альбома средствами приложения ACDSee (www.acdsystems.com/English/Products/ACDSee).

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

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

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

Графические файлы для первого альбома расположены в каталоге:

.\draw\work\unit09\albums\task\

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

Замечание

Приложение ACDSee не пишет в HTML-код создаваемых гипертекстовых страниц тег с указанием кодировки текста, в силу чего вместо русских букв на экран могут выводиться “кракобяки”.

Проблема решается одним из двух способов:

При просмотре альбома можно в браузере через меню Вид/Кодировка установить Кириллица (Windows).
В раздел HEAD кода каждой гипертекстовой страницы альбома можно добавить тег META (скопируйте его прямо отсюда):


<HEAD>
...
<META http-equiv="Content-Type"
      content="text/html; charset=windows-1251">
...
</HEAD>

Вопросы

Ответы на вопросы

Нарисуйте схему хранения картинки в видеопамяти компьютера.

Ответ.
Как кодируется цвет одного пиксела в видеопамяти компьютера?

Ответ. Цвет одного пиксела в видеопамяти компьютера кодируется RGB-компонентами. Для режима цветности 24 бита на пиксел, каждая RGB-компонента кодируется 8 битами (одним байтом). Полный код цвета пиксела занимает 3 байта.
Нарисуйте схему хранения картинки в BMP-файле.

Ответ.
Как кодируется цвет одного пиксела в BMP-файле?

Ответ. Цвет одного пиксела в BMP-файле кодируется так же, как и в видеопамяти компьютера: RGB-компонентами. Для режима цветности 24 бита на пиксел каждая RGB-компонента кодируется 8 битами (одним байтом). Полный код цвета пиксела занимает 3 байта.
Нарисуйте схему хранения картинки в GIF-файле.

Ответ.
Как кодируется цвет одного пиксела в GIF-файле?

Ответ. Цвет каждого пиксела в GIF-файле кодируется двоичным номером цвета в GIF-палитре картинки (нумерация начинается с нуля). Код каждого пиксела занимает столько бит, сколько нужно для записи номера последнего цвета в палитре.
Нарисуйте схему хранения картинки в JPEG-файле.

Ответ.
Какую информацию содержит заголовок графического файла?

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

Ответ. Формат BMP используют тогда, когда важно сохранить картинку без каких либо искажений, а размер файла особого значения не имеет.
В каких случаях для хранения картинок используют форматы GIF и JPEG?

Ответ. Форматы GIF и JPEG используют тогда, когда нужно сохранить картинку в файле небольшого размера.
В каких случаях небольшой размер картинки особенно важен?

Ответ. Размер картинки очень важен при передаче графики по сети, например, при работе с сайтом в Интернете.
В каких случаях формат GIF имеет преимущество перед форматом JPEG?

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

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

Ответ. Код однотонной области содержит многократное повторение номера одного и того же цвета. Такой код заменяются одной ссылкой на цвет с указанием числа повторений (GIF-сжатие без потери информации).
Что такое прозрачный GIF?

Ответ. Прозрачный GIF — это такая GIF-картинка, в которой один или несколько цветов объявлены прозрачными. Через пикселы, имеющие прозрачный “цвет”, будет виден фон или другая картинка.
Что такое анимированный GIF?

Ответ. Формат GIF позволяет сохранять в одном файле несколько картинок (кадров) и алгоритм показа этих картинок на экране. Такая составная GIF-картинка называется анимированным GIF.
Сколькими битами кодируется цвет в GIF-формате?

Ответ. Цвет в GIF-палитре кодируется 24 битами (3 байта).
Сколькими битами кодируется цвет пиксела в JPEG-формате?

Ответ. Цвет пиксела в формате JPEG кодируется 24 битами (3 байта).
Сколько цветов может быть в GIF-палитре картинки?

Ответ. В GIF-палитре картинки может быть не более 256 цветов.
Какие значения может принимать размер GIF-палитры?

Ответ. Размер GIF-палитры в байтах получается умножением числа цветов ней на 3 (один цвет кодируется 3 байтами). Только надо учитывать, что для GIF-палитры резервируется место не по количеству цветов в картинке, а по максимальному числу цветов для выбранного режима кодирования (числа бит на один пиксел).
Можно ли записать картинку, в которой использовано больше 256 цветов, в формате GIF?

Ответ. Когда картинка имеет более 256 цветов, редактор записывает ее в формате GIF, заменяя “лишние” цвета на цвета из построенной палитры. Картинка записывается с искажением (которое часто практически незаметно).
Как на практике выбрать правильный формат для хранения графического файла?

Ответ. Когда важно сохранить картинку без искажений, а размер файла особого значения не имеет, используют формат BMP. Такая ситуация возникает, например, при передаче иллюстраций в издательство.

Когда размер файла с картинкой нужно сделать поменьше (например, для сайта), используют формат GIF или JPEG.

Если предпочтение формата заранее не очевидно, можно создать файлы в форматах GIF и JPEG минимальных для каждого формата размеров, в которых качество изображения сохраняется приемлемым. Затем выбрать тот формат, в котором размер файла получился меньше.
Как в редакторе Paint записать картинку в формате GIF?

Ответ. В выпадающем списке Тип файла при записи на диск нужно установить строку “Формат GIF (*.gif)”:
Как в редакторе Paint записать картинку в формате JPEG?

Ответ. В выпадающем списке Тип файла при записи на диск нужно установить строку “Формат JPEG (*.jpg, *.jpeg)”:
Как управлять качеством и размером картинки в формате GIF?

Ответ. Во многих редакторах (Paint не входит в их число) пользователь может устанавливать число цветов для GIF-файла, подбирая значение поменьше, но такое, при котором качество изображения остается приемлемым.
Как управлять качеством и размером картинки в формате JPEG?

Ответ. Многие редакторы (Paint не входит в их число) имеют средства для установки JPEG-сжатия по условной шкале, например, от 0 (максимальное сжатие) до 100 (максимальный размер файла). В редакторе Photoshop 6 сжатие изменяется от 0 (максимальное сжатие, низкое качество) до 12 (минимальное сжатие, высокое качество).
Как устроено сжатие кода картинки в формате GIF?

Ответ. Сжимающий алгоритм заменяет повторы кодов одним кодом с указанием числа повторений. Например, сотню последовательных ссылок на красный цвет он заменит одной ссылкой с множителем 100. Это сжатие не приводит к потере информации, а, значит, качества картинки.
Верно ли утверждение: “в формате GIF картинка всегда записывается без искажений”?

Ответ. Это утверждение является верным, если в исходной картинке использовано не более чем 256 цветов. Если цветов больше, то “лишние” цвета заменяются на близкие из построенной GIF-палитры, а это приводит к ухудшению качества картинки.
Почему сжатие кода картинки в формате JPEG называют сжатием с потерями?

Ответ. В формате JPEG используется метод сжатия, при котором часть цветов просто отбрасывается.
Как вычислить размер видеопамяти, необходимый для хранения картинки размером WxH при режиме цветности монитора 16 бит на пиксел? Привести общую формулу и произвести по ней вычисления при W=40 и H=50.

Ответ. Общая формула:

При W=40 и H=50 получаем: B = 50 · 40 · 2 = 4000 байт
Расскажите алгоритм вычисления размера кода картинки размером WxH в формате GIF, если в картинке использованы n цветов. Не учитывать размер заголовка файла и GIF-сжатие, но учитывать размер палитры. Выполнить вычисления для W=40, H=50 и n=10.

Ответ. Рабочие формулы:

Алгоритм вычислений.
1. Определяем C (число зарезервированных цветов палитры).
2. Определяем D (число бит на пиксел).
3. Вычисляем P (размер палитры).
4. Вычисляем G (размер кода картинки без заголовка).
Для W=40, H=50 и n=10 получаем:
1. C = 16
2. D = 4
3. P = 3 ·C = 48
4. G = 48 + (50 · 40 · 4) / 8 = 1048 байт