Форматы графических файлов. Какие графические форматы используются в вебе

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

  1. растровому графическому файлу соответствуют форматы *.bmp, *.tif, *psd, *.gif, *.png, *.jpg;
  2. векторному графическому файлу соответствуют форматы *.wmf, *.eps, *.cdr, *.ai

Знание форматов файлов – являются основой работы с цифровыми фотографиями т.к. они определяют способ хранения информации в файле (растровый или векторный), а также форму хранения информации (используемый алгоритм сжатия). Сжатие применяется для растровых графических файлов, так как они имеют обычно достаточно большой объем. Сжатие графических файлов отличается от их архивации с помощью программ-архиваторов (гаг, zip, arj и пр.) тем, что алгоритм сжатия включается в формат графического файла.

Основные форматы графических файлов

RAW

В переводе с английского - сырой. Формат использующийся в процессе обработки фотографий, содержит необработанную информацию, поступающую напрямую с матрицы фотокамеры и не имеющий чёткой спецификации. Эти файлы не обрабатываются процессором камеры (в отличие от JPG) и содержат оригинальную информацию о съемке. RAW может быть сжат без потери качества. В отличие от JPG, который был обработан в камере и уже сохранен с сжатием данных – RAW дает широчайшие возможности по обработке фотографии и сохраняет максимальное качество.

Другими словами, под форматом RAW понимаются данные, полученные напрямую с матрицы без обработки.

Разные производители фототехники используют разные алгоритмы для создания RAW в своих камерах. Каждый производитель придумывает собственное разрешение для своего RAW-файла – NEF, NRW – Nikon; CRW, CR2 – Canon.

JPEG (или JPG)

Это самый распространенный формат графических файлов. Свою популярность JPEG заслужил гибкой возможностью сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его до минимального размера файла для передачи по сети. При сохранении JPEG-файла можно указать степень качества, а значит и степень сжатия, которую обычно задают в некоторых условных единицах, например, от 1 до 100 или от 1 до 10. Большее число соответствует лучшему качеству, но при этом увеличивается размер файла. Обыкновенно, разница в качестве между 90 и 100 на глаз уже практически не воспринимается.

В JPEG применяется алгоритм сжатия с потерей качества. Что это нам дает? Явный минус такой системы – потеря качества изображения при каждом сохранении файла. С другой сжатие изображения в 10 раз упрощает передачу данных. На практике, сохранение фотографии с минимальной степенью сжатия не дает видимого ухудшение качества изображения. Именно поэтому JPG – самый распространенный и популярный формат хранения графических файлов.

TIFF (Tagged Image File Format)

Формат TIFF - формат хранения растровых графических изображений. Изначально был разработан компанией Aldus в сотрудничестве с Microsoft для использования с PostScript. Он позволяет сохранять фотографии в различных цветовых пространствах (RBG, CMYK, YCbCr, CIE Lab и пр.) и с большой глубиной цвета (8, 16, 32 и 64 бит). TIFF используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. Имеется возможность сохранять изображение в файле формата TIFF со сжатием и без сжатия. Степени сжатия зависят от особенностей самого сохраняемого изображения, а также от используемого алгоритма. В отличии от JPG, изображение в TIFF не будет терять в качестве после каждого сохранения файла. Но, к сожалению, именно из-за этого TIFF файлы весят в разы больше JPG.

PSD (Photoshop Document)

Photoshop Document (PSD) - оригинальный растровый формат хранения графической информации, использующий сжатие без потерь, созданный специально для программы Adobe Photoshop и поддерживающий все его возможности. Он позволяет сохранять растровое изображение со многими слоями, любой глубиной цвета и в любом цветовом пространстве. Чаще всего формат используется для сохранения промежуточных или итоговых результатов сложной обработки с возможностью изменения отдельных элементов. Так же PSD поддерживает сжатие без потери качества. Но обилие информации, которое может содержать PSD файл, сильно увеличивает его вес.

BMP (Bit MaP image)

Bit MaP image (BMP) - универсальный формат растровых графических файлов, используется в операционной системе Windows. Этот формат поддерживается многими графическими редакторами, в том числе редактором Paint. Рекомендуется для хранения и обмена данными с другими приложениями. Формат BMP один из первых графических форматов. Его распознает любая программа работающая с графикой. BMP хранит данные с глубиной цвета в данном формате от 1 до 48 бит на пиксель, максимальные размеры изображения 65535×65535 пикселей. На данный момент формат BMP практически не используеться ни в интернете (JPG весит в разы меньше), ни в полиграфии (TIFF справляеться с этой задачей лучше).

GIF (Graphics Interchange Format)

формат хранения растровых графических изображений. Формат GIF способен хранить сжатые данные без потери качества в формате до 256 цветов. Включает алгоритм сжатия без потерь информации, позволяющий уменьшить объем файла в несколько раз. Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Рекомендуется для хранения; изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с oгpaниченным количеством цветов (до 256). Используется для размещения графических изображений на Web-страницах в Интернете.

PNG (Portable network graphics)

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

JPEG 2000 (или jp2)

Графический формат, который вместо дискретного косинусного преобразования, характерного для JPEG, использует технологию вейвлет-преобразования, основывающуюся на представлении сигнала в виде суперпозиции некоторых базовых функций - волновых пакетов. В результате такой компрессии изображение получается более гладким и чётким, а размер файла по сравнению с JPEG при одинаковом качестве уменьшается ещё на 30%. Говоря простым языком, при одинаковом качестве размер файла в формате JPEG 2000 на 30% меньше, чем JPG. При сильном сжатии JPEG 2000 не разбивает изображение на квадраты, характерные формату JPEG. К сожалению, на данный момен этот формат мало распространён и поддерживается только браузерами Safari и Mozilla/Firerox (через Quicktime).

WMF (Windows MetaFile)

Универсальный формат векторных графических файлов для Windows-приложений. Используется для хранения коллекции графических изображений Microsoft Clip Gallery.

CDR (CorelDRaw files)

Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики CorelDraw.

AI (AdobeIllustrator files)

Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики AdobeIllustrator.

EPS (Encapsulated PostScript)

Формат векторных графических файлов, поддерживается программами для различных операционных систем.

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

Рассмотрим подробно три формата изображений, используемых в настоящее время для сохранения графического оформления web-страниц и для его доставки на компьютер пользователя. Это форматы GIF, JPEG и PNG. Хотя каждый из этих форматов имеет свои уникальные особенности, у них есть одна общая черта - все они обеспечивают сжатие данных, описывающих изображение. Это позволяет уменьшить объем файлов, а, следовательно, и время загрузки web-страницы на компьютер пользователя. Так как различные алгоритмы сжатия, применяемые в форматах web-графики, оптимальны для сохранения изображений разных типов, можно значительно уменьшить общий объем изображения, комбинируя форматы при сохранении его частей. ПРИМЕЧАНИЕ. На самом деле для оформления web-страниц можно использовать графику в любом формате, но при этом возникнет проблема совместимости страницы с различными браузерами. Например, браузер Internet Explorer после установки программы QuickTime получает возможность отображать файлы в формате TIFF. Однако в стандартной поставке IE модуля для просмотра файлов зтого формата нет. Начнем рассмотрение форматов web-графики с самого старого и самого «заслуженного» формата - GIF. Формат GIF Формат GIF был разработан компанией CompuServ специально для передачи цветных изображений по компьютерным сетям. Разработчики стремились создать формат, который позволял бы передать изображение на компьютер пользователя за кратчайшее время. Сейчас наиболее широко используются спецификации этого формата GIF87 и GIF89a (цифры обозначают, год выпуска стандарта). ПРИМЕЧАНИЕ. GIF - Graphic Interchange Format - Формат обмена графическими данными. Сохраняя файл в формате GIF, вы можете воспользоваться следующими возможностями:
  • сжатие данных без потерь (алгоритм сжатия LZW);
  • максимальное число отображаемых цветов - 256;
  • поддержка прозрачности;
  • возможность включения нескольких изображений (анимация);
  • чересстрочный вывод изображений на экран (в GIF89a);
  • включение текстовых блоков (комментариев).
Теперь рассмотрим возможности этого формата подробнее. Прежде всего следует сказать несколько слов о сжатии изображения. GIF был и остается одним из немногих широко распространенных форматов, поддерживающих передачу сжатых данных. Следует заметить, что скорость передачи данных определяется в первую очередь их размером. То есть для увеличения скорости передачи надо уменьшить размер передаваемых файлов. Уменьшить размер отдельных файлов (а значит, и общий объем передаваемой информации) можно двумя путями:
  • уменьшить общий объем информации. Этот метод может легко применить каждый пользователь Интернета - достаточно отключить в браузере загрузку графики. Вы заметите резкое увеличение скорости загрузки страниц, но «обстановка» на экране вашего компьютера станет более чем спартанской. Кроме того, в некоторых случаях именно графика является целью посещения сайта. Яркими примерами таких сайтов могут служить виртуальные картинные галереи;
  • использовать сжатие данных. Естественно, если уж на свет появились алгоритмы архивации (сжатия), то рано или поздно на них должны были обратить внимание разработчики программного обеспечения для компьютерных сетей. Разумное применение сжатия данных позволяет существенно уменьшить объем передаваемых по каналу связи данных при сохранении всех передаваемых файлов.
Интернет изначально создавался как система обмена научными данными. Поэтому первые web-страницы были наполнены научной информацией, являвшейся целью их посещения, а на оформление страниц никто не обращал особого внимания. На рис. 2.1 вы можете увидеть пример такой страницы. Основными графическими элементами таких страниц были чертежи, схемы и простые кнопки навигации. Для таких элементов графики характерны четкие фигуры с резкими границами, линии и большие области с одноцветной заливкой. Цветовая гамма, как правило, ограничивается 2-10 цветами. Поэтому сжимать подобные изображения лучше всего при помощи алгоритмов, позволяющих хорошо обрабатывать группы одинаковых элементов, следующих друг за другом. Разработчики формата GIF использовали алгоритм LZW, позволяющий достичь степени сжатия, близкой к максимальной. Сжатие в формате GIF включено постоянно, и каждый файл сжимается так сильно, как это только возможно. Пользователь не имеет возможности выбрать степень сжатия или алгоритм. Как уже было сказано, максимальное число цветов, которые может содержать изображение, сохраняемое в формате GIF, составляет 256. Это значит, что если изображение на самом деле содержит большее число цветов, то часть из них будет потеряна. Рис. 2.1. Над оформлением первых web-страниц никто голову не ломал ПРИМЕЧАНИЕ. Алгоритм сжатия данных LZW (алгоритм Лемпела-Зива-Уолша) основывается на при- своении группам символов (битов) номеров. Когда символ встречается в первый раз, он добавляется в таблицу кодов и в дальнейшем заменяется соответствующим номером. Если символ встречается вторично, то он заносится в таблицу кодов вместе с символом, следующим за ним. Такая комбинация в дальнейшем рассматривается как самостоятельный символ. Подобная операция выполняется для всех встречающихся комбинаций битов. Если файл содержит много повторяющихся символов, то за счет замены символа на его номер можно получить значительную экономию места. Применительно к графике такой алгоритм особенно эффективен при кодировании изображений, содержащих небольшое количество различных цветов и протяженные однотонные области. В самом деле, если изображение содержит несколько строк пикселов, залитых одним цветом, то в конце концов целая строка будет кодироваться одним символом. Казалось бы, сохранение полноцветных изображений в этом формате - бесперспективное занятие, однако, хотя число цветов ограничено, сами цвета могут быть любыми. Они задаются тремя цветовыми составляющими, на каждую из которых отводится по одному байту. Это позволяет определить 16 777 216 цветов. На практике графические редакторы составляют для изображения таблицу наиболее часто встречающихся цветов и заменяют не вошедшие в палитру цвета (обычно это цвета, используемые меньше остальных) на близкие к ним цвета из палитры. Возможны варианты, при которых для имитации нужного цвета используются комбинации точек цветов, входящих в палитру. Использование этого приема возможно потому, что человеческий глаз с большого расстояния воспринимает близко расположенные точки как единое целое. При этом их цвета сливаются и создают иллюзию первоначального цвета. Подбор точек нужного цвета может быть произведен несколькими методами, обеспечивающими разную степень близости изображения к оригиналу. Таким образом, результат сохранения многоцветных изображений в режиме индексированных цветов (а формат GIF как раз и использует этот режим) во многом зависит от возможностей графического редактора. Сохранение файлов в формате GIF при помощи Adobe PhotoShop подробно описано в следующей главе. В некоторых случаях для создания палитры используют не цвета, встречающиеся на изображении, а цвета палитры, принятой в операционной системе или так называемой безопасной палитры. ПРИМЕЧАНИЕ. Безопасная палитра представляет собой стандартизированный набор из 216 цветов, одинаково отображаемых ведущими браузерами Internet Explorer и Netscape Navigator в операционных системах Windows и Mac OS. Использование цветов из этой палитры гарантирует, что ваше изображение будет выглядеть на экране пользователя так, как его видите вы (с учетом свойств монитора, разумеется). Безопасная палитра была актуальна во времена широкого использования на мониторах режима с отображением 256 цветов. В настоящее время большинство компьютеров оснащаются видеоадаптерами и мониторами, работающими в более совершенных режимах (65 тысяч или 16 млн цветов), так что над использованием безопасной палитры задумываются все меньше и меньше. Такой подход позволяет избежать искажения цвета на компьютере пользователя, но закономерно приводит к его искажению на этапе подготовки изображений. Кроме того, если вы создадите файл с учетом цветов, принятых в одной операционной системе, то в другой системе изображение может измениться настолько, что пользователь будет озадачен тем, что же вы хотели с его помощью передать. Отдельный вопрос - использование файлов GIF на различных мониторах. При выводе файла на экран программа просмотра автоматически подбирает ближайший к цвету пиксела оттенок, который может быть отображен на мониторе. Использование ограниченной цветовой палитры создает хорошие условия для сжатия изображения. В самом деле, цвет каждого пиксела не надо задавать полностью (достаточно номера цвета из палитры). Это позволяет значительно уменьшить объем описания самого изображения. При этом палитра вовсе не обязательно должна содержать все 256 цветов. Если изображение использует меньшее число цветов, появляется возможность сэкономить несколько десятков байтов. ПРИМЕЧАНИЕ. Сама палитра цветов описывается очень просто - подряд записываются значения красного, зеленого и синего компонентов для первого цвета, затем - для второго и т. д. Для того чтобы наглядно продемонстрировать процесс сжатия данных в формате GIF и создания цветовой палитры, приведем простой пример. На рис. 2.2 приведены (в уменьшенном виде) три изображения до сохранения в формате GIF и после него. Исходный размер всех изображений - 300x300 пикселов, объем файлов до сжатия - около 277 Кбайт (формат - TIFF без сжатия, режим - RGB). Для большей наглядности фрагменты исходного и сжатого изображений приведены в увеличенном виде.

а

б

с

Рис. 2.2. В формате GIF сохранены простая фигура (а), фигура со сглаженными границами (б) и сложное полноцветное изображение (в)

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

Третье изображение (рис. 2.2, в) - яркий представитель изображений, которые не следует сохранять в формате GIF. Это изображение (фотография) содержит множество различных цветов, плавно перетекающих друг в друга. Кроме того, перетекание цветов происходит на больших площадях, что значительно увеличивает число промежуточных оттенков. Такие изображения плохо сжимаются из-за небольшого числа повторяющихся элементов (пикселов). Сравните его с картинкой, приведенной на рис. 2.2, а - там содержатся целые строки одноцветных пикселов. Еще одна проблема - 256 цветов палитры не хватает для точной передачи всех цветов и программе сжатия приходится заменять недостающие цвета цветами, вошедшими в палитру. В данном случае была использована «безопасная палитра web», использование которой гарантирует точное воспроизведение цвета на компьютерах Apple и IBM PC, но число цветов при этом ограничено 216, а их набор фиксирован. Размер файла при этом составляет около 20 Кбайт. Если использовать вместо такой палитры набор цветов, образованный с учетом особенностей изображения, то качество картинки можно повысить, однако возрастет и размер файла. Для небольшого изображения размер палитры может превзойти при записи на диск размер самого изображения.

Рис. 2.3. Увеличенный фрагмент изображения неба до (слева) и после сжатия (справа). При переходе в режим индексированных цветов плавные переходы оттенков практически исчезают

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

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

Рис. 2.4. Изображение с прозрачным фоном может быть наложено на текстуру без появления однотонной рамки

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

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

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

ПРИМЕЧАНИЕ. Рассматриваемый ниже формат PNG предоставляет возможность сохранения изображений с частичной прозрачностью пикселов. Однако современные браузеры не реализуют правильное отображение таких файлов.

Еще одна особенность файлов GIF, долгое время делавшая этот формат популярным - возможность создания анимированных изображений. До появления таких программных средств, как Macromedia Flash, позволяющих создавать занимающие мало места на диске анимированные изображения, других средств для создания небольших анимированных изображений в распоряжении web-дизайнеров не было.

В отличие от Flash, в GIF-файлах анимация сохраняется не в форме векторных объектов, а в виде отдельных растровых кадров. Каждый кадр представляет собой самостоятельное изображение с возможностью создания собственной таблицы цветов. Наличие таких индивидуальных таблиц позволяет увеличить цветовой охват и улучшить качество изображения в целом. Кадры могут быть прозрачными и накладываться друг на друга в различных режимах (замещая предыдущее изображение, накладываясь поверх него и т. д.). Некоторые программы для редактирования анимации (например, Ulead Gif Animator) используют прозрачность кадров для уменьшения размеров файла. Они анализируют изображение и заменяют повторяющиеся на нескольких кадрах пикселы на прозрачные. В некоторых случаях больше половины кадра оказывается залито одним цветом, что значительно повышает степень сжатия.

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

Редактирование анимированных GIF-файлов рассматривается в главе, посвященной программе Adobe ImageReady, поставляемой совместно с Adobe PhotoShop и предназначенной для редактирования, оптимизации и сохранения web-графики.

Как было сказано выше, изображение в GIF-файле может быть сохранено с указанием на нормальный или чересстрочный вывод на экран. При нормальном порядке вывода изображение сохраняется в файл последовательно: описания строк следуют в порядке возрастания номеров (1, 2, 3,...). Такое изображение выводится на экран постепенно, по мере загрузки с сервера. Место под него может быть отведено заранее (путем указания размеров средствами HTML), но пикселы будут отображены только после их загрузки. Если же изображение сохранено в чересстрочном режиме, то порядок строк меняется. Вначале сохраняется каждая восьмая строка, затем - каждая четвертая, после этого - каждая вторая и шестая строки, и наконец - все нечетные строки.

ПРИМЕЧАНИЕ. В англоязычных источниках сохранение с чередованием строк обозначают термином Interlaced.

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

На рис. 2.5 видно, как отображаются во время загрузки обычное и чересстроч-ное изображения.

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

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

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

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

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

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

Примеры наиболее распространенных векторных форматов - AutoCAD DXF и Microsoft SYLK.

WMF. Это векторный формат, который используется графическими программами ОС Windows. Этот формат служит для передачи векторных изображений через буфер обмена в среде Windows. Этот формат принимается практически всеми программами, работающими с векторной графикой. Использовать этот формат для растровых изображений нельзя. Недостатки: искажение цвета и несохранение ряда параметров, которые устанавливаются для изображений в графических программах.

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

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

Метафайловые форматы

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

Наиболее распространенные метафайловые форматы - WPG, Macintosh PICT и CGM.

- 82.00 Кб

Образовательное учреждение

среднего специального профессионального образования

«Нефтяной техникум»

КОНТРОЛЬНАЯ РАБОТА

ПО ДИСЦИПЛИНЕ

«Информатика»
Тема «
Графические форматы при оформлении Web-страниц »

Вариант № 28


Выполнил студент

заочного отделения

3 курса группы 3C8

Специальность:

Дата выполнения:

Пушин Дмитрий Сергеевич

<<Сооружение и эксплуатация газонефтепроводов и газонефтехранилищ.>>

Проверил преподаватель:

В результате рецензирования

получил оценку: __________, имеются замечания:____________________ _______

______________________________ ______________________________ ______________________________ ______________________________ ________________________

Контрольную работу принял(а)

______________________________ _

Дата принятия: «___»_______2009 г.

Рег. №_________________________

            Ижевск

2008 г.

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

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

GIF и JPEG- это два наиболее популярных графических формата, которые давно стали фактическими стандартами для использования на WWW. Оба достаточно универсальны и читаются большинством браузеров.

Формат GIF

В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.

Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.

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

Формат PNG

Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics - PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения web-страниц на компьютерах от различных производителей. Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые броузеры отобразить картинку в формате PNG не смогут.

Формат JFIF .

Строго говоря, JPEG обозначает рассмотренный выше алгоритм сжатия, а не конкретный формат представления графической информации. Практически любую графическую информацию можно сжать по такому алгоритму. Формат файлов, использующих алгоритм JPEG, формально называют JFIF (JPEG File Interchange Format). На практике, очень часто файлы, использующие JPEG - сжатие, называют JPEG - файлами.

На основе JPEG - метода сжатия построены многочисленные форматы, например, формат TIFF/JPEG, известный как TIFF 6.0, TIFF, QuickTime и др.

Файлы с графикой в формате JPEG имеют расширение *.jpg.

Формат JPEG является TrueColor-форматом, то есть может хранить изображения с глубиной цвета 24 бит/пиксел. Такой глубины цвета достаточно для практически точного воспроизведения изображений любой сложности на экране монитора. В случае просмотра цветного изображения на экране монитора большая глубина цвета (например, 32 бит/пиксел) практически не отличается от изображения с глубиной цвета в 24 бит/пиксел. Тот же результат наблюдается и при распечатке изображения на большинстве доступных принтеров. Глубина цвета в 32 бит/пиксел, как правило, используется в издательской деятельности.

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

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

Алгоритм JPEG и построенные на его основе форматы предусматривают реализацию функциональной возможности, получившей название этикетка. Фактически это уменьшенная копия изображения. Этикетку можно рассматривать как своего рода аналог предложенного в формате GIF приема черезстрочной развертки изображения. То есть, при наличии большого количества файлов JPEG можно выводить их на экран в виде этикеток, что позволяет отобразить их достаточно быстро или в большое количество (списком) и, тем самым, дать пользователю представление о содержимом каждого файла. Этикетки могут быть закодированы методом JPEG; сохранены в формате 1 байт/пиксел (т.е. в виде полутонового изображения) или представлены в виде полноцветного изображения с 16,7 млн.цветов(24 бит/пиксел).

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

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

Схема JPEG была специально разработана для сжатия цветных и полутоновых многоградационных изображений фотографий, телевизионных заставок, другой сложной графики. Конечный пользователь может "отрегулировать" качество кодировщика JPEG, использовав параметр, который иногда называют установкой качества или Q-фактором. Различные реализации данного метода имеют разные диапазоны Q-фактора, но типичным считается 1 до 100. При значении фактора, равном 1, создается сжатое изображение самого маленького размера, но плохого качества; при значении фактора, равном 100, можно получить сжатое изображение большего размера, но и лучшего качества. Оптимальное значение Q-фактора зависит от содержимого изображения и, следовательно, подбирается индивидуально. Особым искусством при сжатии JPEG является выбор минимального значения Q-фактора, позволяющего создать изображение приемлемого качества и наиболее близкое к оригиналу.

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

В настоящее время JPEG стали использовать для сжатия видеоинформации, однако авторам не известны полученные результаты.

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

Формат JPEG

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

В 1987 году ISO и ССIТТ объединили свои группы в комитет, который должен был провести исследования и выпустить стандарт сжатия данных, который применялся бы обеими организациями. Новый комитет получил название JPEG.

Описание работы

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

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

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

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

Графические изображения

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

При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group ) и GIF (Graphics Interchange Format ), являющиеся форматами со сжатием. Выбор формата определяется стоящими при разработке задачами. Так, например, GIF формат применяется для изображений, содержащих меньше 256 цветов, и используется, как правило, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то применяется формат JPEG. Кроме того, программа FrontPage позволяет импортировать файлы, имеющие другие форматы, преобразовывая их в форматы JPEG и GIF.

После того как графическое изображение размещено на странице, с помощью кнопок панели инструментов Рисунки (Pictures) (рис. 10.5) можно изменить его яркость и контрастность, повернуть по горизонтали или по вертикали, преобразовать цветное изображение в полутоновое и т. д. Эта панель автоматически появляется в окне программы FrontPage при щелчке на изображении.

Рис. 10.5 . Графическое изображение, размещенное на Web-странице

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

Совет
FrontPage позволяет узнать предполагаемое время загрузки Web-страницы на компьютер пользователя в зависимости от скорости соединения с Web-сервером. Оно отображается в строке состояния в режиме редактирования страницы справа от значка с изображением песочных часов. На рис. 10.5 показана страница, время загрузки которой составляет 94 секунды при скорости соединения 28.8 Кбит/с. Чтобы узнать время загрузки при другой скорости соединения, щелкните мышью в правой области строки состояния и выберите из появившегося меню значение предполагаемой скорости соединения с Web-сервером
.

Понравилась статья? Поделиться с друзьями: