Федерация Интернет Образования

Московский Центр Интернет-образования

Характеристики изображений и их форматы для публикации в Web

Пособие по разделу курса

«Подготовка изображений для публикации в Web»

Составитель

Москва 2000 г.

, к. ф.-м. н., составитель

«Характеристики изображений и их форматы для публикации в Web». Пособие по разделу курса «Подготовка изображений для публикации в Web». Московский Центр Интернет-образования. 2000

В пособии рассматриваются основные особенности и форматы цифровых изображений, размещаемых на Web-страницах.

Использованы материалы фирмы Epson, а также Интернет-ресурсы по графике.

Содержание

Цифровые изображения............................................................................................................................ 4

Изображения, которые можно обрабатывать на компьютере........................................................ 4

Выборка и дискретизация.............................................................................................................................. 4

Разрешение и число линий на дюйм.............................................................................................................. 6

Примеры изображений с различным разрешением................................................................................ 6

Высветленные, затемненные, бликующие изображения............................................ 7

Высветленные изображения.......................................................................................................................... 7

НЕ нашли? Не то? Что вы ищете?

Затемненные изображения............................................................................................................................. 8

Бликующие изображения................................................................................................................................ 8

Виды изображений - цветные, в градациях серого, двоичные................................... 9

Цветовые оттенки, передержка, недодержка....................................................................... 10

Нормальная выдержка.................................................................................................................................. 11

Форматы изображений для публикации в Web................................................................ 13

Что требуется от программы графического редактирования?.............................. 13

Векторная графика................................................................................................................................... 14

Растровая графика.................................................................................................................................... 15

Форматы документов растровой графики............................................................................. 15

Формат BMP.................................................................................................................................................... 15

Формат GIF...................................................................................................................................................... 17

Формат JPEG................................................................................................................................................... 19

Формат PNG.................................................................................................................................................... 22

Цифровые изображения

Изображения, которые можно обрабатывать на компьютере

До того, как изображения можно будет обрабатывать на компьютере, их оцифровывают (преобразуют в электрические сигналы, представляющие нули и единицы). Этот процесс называется выборка и дискретизация (объяснение дано в следующем разделе). Минимальный элемент оцифрованного изображения называется пиксел (picture element - элемент картины). Цифровая картина представляет собой набор пикселов.

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

Выборка и дискретизация

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

Преобразование обработанного изображения в числовые значения называется дискретизацией. Например, белый цвет преобразуется в "1", а черный в "0".

	Схема оцифровки изображения

Разрешение и число линий на дюйм

Каждое периферийное устройство (принтер, сканер, дисплей), которое вводит или выводит изображение, имеет конкретное разрешение.

Профессиональные принтеры и сканеры имеют самое высокое разрешение, обычно выражающееся в DPI (Dots Per Inch - Точек на дюйм) или в ppi (pixels per inch - пикселов на дюйм). Разрешение показывает сколько точек (или пикселов) размещается в одном линейном дюйме.

Разрешение компьютерного монитора составляет примерно 72 dpi, а у принтеров разрешение бывает в диапазоне от 150 до 1440 dpi (для моделей с наивысшим разрешением). У сканеров разрешение от 300 dpi и выше.

Postscript-принтеры и типографские машины в качестве единицы измерения разрешения используют число линий на дюйм (lpi - lines per inch), показывающее сколько линий вычерчивается на одном дюйме. Эта единица измерения связана с растром, который используется для разбиения таких полутоновых изображений, как фотографии, на мелкие точки (теперь называемые пикселами). Исторически эти полутоновые линейные растры состояли из прямых линий разной ширины. В начале века растры превратились в сетки, которые разбивают изображение на точки; однако, старое название - линии на дюйм - осталось. У газет разрешение составляет 60 lpi, а у журналов от 133 до 175 lpi. Высококачественные полиграфические материалы имеют разрешение, превышающее 200 lp.

Примеры изображений с различным разрешением

Разрешение 72 dpi

Разрешение 160 dpi

	Разрешение 240 dpi

Высветленные, затемненные, бликующие изображения

Высветленные изображения

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

Затемненные изображения

Большая часть изображения темная. Нет светлых областей

Бликующие изображения

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

Виды изображений - цветные, в градациях серого, двоичные.

Цветные изображения содержат как цвет, так и градацию. Одним из таких примеров является цветная фотография.

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

Двоичные изображения не содержат ни цвет, ни градацию. Они, в общем случае, черно-белые. Их также называют монохромными растровыми изображениями.

Цветовые оттенки, передержка, недодержка

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

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

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

	Нормальная выдержка

	Передержанное изображение

	Недодержанное изображение

Форматы изображений для публикации в Web.

Что требуется от программы графического редактирования?

Web-сайт без графических элементов, например, таких как фотографии, смотрится "голо" и скучно.

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

Прежде всего - это изменение размеров изображения - слишком большую фотографию не надо размещать в Интернете. Далее - обрезка фотографии, необходимая для удаления лишних элементов.

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

Ну и конечно - надо уметь совершать простейшие действия по монтажу фотографий. А именно: вырезать кусочек и поместить его в другое место. Восстановить утраченный кусок фотографии или вместо ненужного фрагмента "подрисовать" правильный.

Надо уметь удалять дефекты изображения.

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

Какие программы способны делать это?

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

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

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

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

Далее мы частично используем материал книги (Пономаренко С, 1998)

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

Компьютерная графика по способу кодирования делится на 3 - векторную, растровую, фрактальную. О последней (фрактальной) мы говорить здесь не будем. Рассмотрим только первые две.

Векторная графика

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

Характерными примерами объектов векторной графики являются True Type шрифты в текстовом редакторе Word, объекты Word Art, объекты клипарта, автофигуры и т. д.

Для работы с объектами векторной графики существуют специальные программы: Corel Draw, Adobe Illustrator, Freehand и другие.

В нашем курсе векторная графика рассматривается в специальном разделе, ей посвященном, причем делается это на примере возможностей рисования в текстовом редакторе Word.

В данном разделе мы поэтому не рассматриваем векторную графику.

Растровая графика

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

Когда мы имеем дело с компьютером, то, а изображение на экране монитора строится из маленьких ячеек. Такие ячейки получили название пикселей, от английского "Picture element" - элемент изображения, элемент картины. (По-английски пишется: pixel).

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

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

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

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

Форматы документов растровой графики

Формат BMP

BMP - Bit Map Picture (Изображение в виде карты побитового распределения цвета). Цифры, приведенные выше, относились именно к формату BMP. Файлы формата BMP имеют расширение bmp, например: mypicture. bmp

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

Если Вы имеете изображение 800х600 пикселей, а для каждого пиксела Вы решили иметь 24 битный цвет, то изображение будет иметь объем 1,38 Мб.

Если Вы попытаетесь напечатать это изображение на принтере, то при разрешении печати 200 пикселей на см., Вы получите отпечаток размером 4х3 см., хотя на экране это была прекрасная картинка большого размера.

Если же Вы захотите, создать такое изображение, чтобы на бумаге был "отпечаток" размера 10х15 см с хорошим разрешением 300 точек на см, то Вам понадобится файл следующего размера:

В длину число точек 15х300=4500 точек.

В ширину число точек 10х300=3000 точек.

Итого в файле содержится 13 500 000 пикселей.

При 24 битовой глубине цвета получим объем изображения около 39 Мб.

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

Если же Вы захотите создавать хорошие фотографии еще большего размера, то требования по ресурсам совсем испортят Вашу жизнь.

С другой стороны для "публикации изображения на экране компьютера" Вам достаточно приблизительно 30 пикселей на см. Для картинки 800 на 600 объем файла изображения будет не больше, чем 1,4 Мб, что вполне терпимо.

А если еще попытаться как-то "упаковать" изображение, то можно ожидать, что удастся добиться вполне терпимых объемов, которые можно будет легко передавать по телефонным сетям, т. е. публиковать в Интернете.

Таким образом, мы приходим к задаче "сжатия" изображений. Рассмотрим ее подробнее.

Формат GIF

Далее мы следуем описанию Д. Кирсанова.

Первая версия формата GIF ("Graphics Interchange Format", "Формат для обмена графической информацией") была разработана в 1987 году специалистами компьютерной сети CompuServe. Пользователям этой сети не нравилось, что архивы с графическими изображениями из файловых библиотек CompuServe приходилось распаковывать всякий раз перед просмотром. Выход в такой ситуации очевиден: нужно, чтобы сам по себе формат содержал уже достаточно хорошо упакованные графические данные. Алгоритм распаковки должен быть при этом встроен во все программы, намеревающиеся работать с этим форматом (утилиты просмотра, графические редакторы и т. п.). Именно такой подход и реализован в формате GIF.

Ниже мы цитируем сайт http://www. igs. /netgr/ng1.html

Через некоторое время у данного формата выявился ряд недостатков, тормозящих его эффективное использование. В 1989 году была разработана новая версия формата Gif (Gif89a).

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

Он использует LZW-компрессию, что позволяет хорошо сжимать файлы, в которых много однородных заливок (логотипы, надписи, схемы). GIF-формат позволяет записывать изображение "через строчку" (Interlaced), благодаря чему, имея только часть файла, можно увидеть изображение целиком, но с меньшим разрешением. Эта возможность широко применяется в Интернете. Сначала вы видите картинку с грубым разрешением, а по мере поступления новых данных ее качество улучшается.

В GIF'e можно назначить один или более цветов прозрачными, они станут невидимыми в интернетовских браузерах и некоторых других программах. Прозрачность обеспечивается за счет дополнительного Alpha-канала, сохраняемого вместе с файлом. Кроме того, файл GIF может содержать не одну, а несколько растровых картинок, которые интернетовские браузеры могут подгружать одну за другой с указанной в файле частотой. Это называется GIF-анимация. Основное ограничение формата GIF состоит в том, что цветное изображение может быть записано только в режиме 256 цветов.

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

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

Файл с горизонтальными полосками

Файл с вертикальными полосками

При создании изображения, которое в последующем будет переведено в GIF формат, следует учитывать следующую особенность алгоритма LZW сжатия. Степень сжатия графической информации в GIF зависит не только от уровня ее повторяемости и предсказуемости (однотонное изображение имеет меньший размер, чем беспорядочно "зашумленное"), но и от направления, т. к. сканирование рисунка производится построчно. Это хорошо видно на примерах GIF-файлов с разным направлением полосок. Файл с горизонтальными полосками имеет размер 369 байт, а с вертикальными полосками 883 байт (в 2,4 раза больше!).

Прочтите еще в сети о Gif-формате:
1) Статья Дмитрия Кирсанова: Неисчерпаемый Gif (http://www. symbol. ru/dk/articles/gif. html#f2)
2) Статья Дмитрия Патокина: Анимационные картинки: что это и как их создавать. ng2.html

Формат JPEG

Мы следуем изложению сайта Алексея Клецель http://www. igs. /netgr/ng2.html

JPEG (Joint Photographic Experts Group) представляет формат для сжатия графических файлов.

Строго говоря, JPEG'ом называется не формат, а алгоритм сжатия, основанный не на поиске одинаковых элементов, как в RLE и LZW, а на разнице между пикселами. JPEG ищет плавные цветовые переходы в квадратах 9х9 пикселов. Вместо действительных значений JPEG хранит скорость изменения от пиксела к пикселу. Лишнюю, с его точки зрения, цветовую информацию он отбрасывает, усредняя некоторые значения. Чем выше уровень компрессии, тем больше данных отбрасывается и тем ниже качество. Используя JPEG, можно получить файл в 10-500 раз меньше, чем ВМР! Формат аппаратно независим, полностью поддерживается на РС и Macintosh, однако он относительно нов и не понимается старыми программами (до 1995 года).

Из сказанного можно сделать следующие выводы. JPEG'ом лучше сжимаются растровые картинки фотографического качества, чем логотипы или схемы - в них больше полутоновых переходов, среди же однотонных заливок появляются нежелательные помехи. Лучше сжимаются и с меньшими потерями изображения с высокой резолюцией (200-300 и более dpi), чем с низкой (72-150 dpi), т. к. в каждом квадрате 9х9 пикселов переходы получаются более мягкие за счет того, что их (квадратов) в файлах высокого разрешения больше. В JPEG'е следует сохранять только конечный вариант работы, потому что каждое пересохранение приводит к все новым потерям (отбрасыванию) данных и превращения исходного изображения в кашу. Как это ни парадоксально, возможности алгоритма сжатия JPEG реализованы в формате JPEG не полностью. Сжатие в файлах формата Photoshop EPS с JPEG-кодированием дает несколько лучшие результаты.

В Photoshop 4.0 наряду с традиционным вариантом этого формата Baseline ("Стандартный") добавлен модифицированный вариант - Progressive JPEG. Сохраняемые в нём изображения содержат большее количество деталей, и, что самое главное, его использование намного сокращает время передачи по сети. Этот формат JPEG также, как и формат Gif89a, поддерживает свойство чересстрочности.

Для примера посмотрите на изображение цветка. В формате Gif эта картинка занимает 713 байт, в Jpg - 9 278 байт (при 50%-м сжатии), в Bmp - 45 176 байт.

Рассмотрим изображение цветка.

При почти одинаковом качестве размер этой картинки в Jpg 7,5 Кб (при 50%-м сжатии), в Gif - 32,5 Кб (256 цветов), в Bmp - 114 Кб.

Исходный цветок

Изображение в формате Jpeg при разных степенях сжатия - 10%, 30%, 60%. Размер при этом составил 2 735 байт, 5 390 байт и 8 483 байт соответственно.

	Цветок

Прочтите еще в сети о Jpeg-формате: JPEG - популярно о главном. (http://prism. xproject. ru/advices/jpg. html)

Формат PNG

Мы следуем изложению сайта (http://www. igs. /netgr/ng3.html)

Формат PNG (Portable Network Grafics) был разработан в качестве альтернативы Gif формату. В отличие от последнего он позволяет сохранять всю цветовую информацию и информацию об альфа-каналах масок и слоев. Это чрезвычайно сжатый RGB-формат, в котором используется схема сжатия без потерь. На сегодняшний день это наиболее перспективный Web-формат, обладающий мощными возможностями, которые наиболее ярко проявляются при его сопоставлении с форматом Gif:

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

В отличие от ограниченной 256 цветами палитры Gif, формат PNG позволяет хранить полноцветные изображения с цветовой глубиной 24 бит/пиксел и даже 48 бит/пиксел.

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

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

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