Форматы графических файлов Web (gif, jpeg)



Скачать 109.01 Kb.
Дата19.02.2013
Размер109.01 Kb.
ТипДокументы
Форматы графических файлов Web

(GIF, JPEG)

Рассмотрим набор инструментальных средств для ра­боты с форматами графических файлов Web1.

Поддержка графики браузерами



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

Сегодняшние Web-браузеры также поддерживают многие дополнительные модули (plug-ins). Фирмы-производители программного обеспече­ния разработали модули, предлагающие интерактивные игры, радио и телевещание в реальном масштабе времени и дру­гие технические новинки.

Проблема с технологией дополнительных модулей состоит в том, что на компью­терах пользователей должно быть установлено соответствующее программное обеспечение, чтобы соответствующие файлы могли воспроизводиться или отображаться в браузере. Хотя все популярные дополнительные модули доступны для загрузки, далеко не каждый хочет их устанавливать. Если посетитель Web-узла не захочет загрузить и установить модуль Shockwave, то он не сможет про­смотреть созданный вами эффектный фильм Macromedia Director.

К счастью, производители Web-браузеров остановились всего на нескольких графи­ческих форматах. Формат взаимообмена графикой (GIF – Graphics Interchange Format), формат объединенной группы экспертов по фотографии (JPEG – Joint Photographic Experts Group) и переносимая сетевая графика (PNG – Portable Network Graphics). Если вы создаете файл GIF и связываете его с кодом HTML Web-страницы, пользователи смогут просматривать изображение без загрузки дополнительного программного обеспечения.

С появлением каждой новой версии Photoshop Adobe добавляет и наращивает возможности для кодирования форматов файлов Web-графики по мере их появ­ления. Программа в настоящее время поддерживает форматы GIF, JPEG и PNG, а также предоставляет ряд средств для создания таких файлов. Хотя эти форма­ты и обладают некоторым недостатком визуальных эффектов, они продолжают оставаться рабочими лошадками и составляют основу дизайна большинства соз­даваемых сегодня Web-страниц.

Формат GIF



GIF (читается как «гиф» или «джиф») – наиболее популярный графический формат в Web. Формат GIF первоначально был изобретен для использования в CompuServe, одной из первых коммерческих интерактивных сетей. Так как он разрабатывался для использования в компьютерной сети с низкими скоростями передачи данных, то GIF оказался идеальным форматом для использования в Web и стал первым графическим форматом, поддерживаемым в ней.

Сжатие


GIF стал настолько популярным из-за способности эффективно сжимать графичес­кие данные.
GIF использует алгоритм Лемпела-Зива и Уэлча (LZW – Lempel-Ziv Welch) – математическую формулу, которая позволяет трансформировать большие файлы в маленькие, которые лучше подходят для Web. Суть алгоритма LZW состоит в сжатии ряда одинаковых символов в один символ, умноженный на число повторений. Например, если 10 черных пикселей стоят в графическом файле рядом, то в формате файла без сжатия 10 черных пикселей будут пред­ставлены как 10 символов. GIF же в этом случае использует только два символа: число повторений цвета и сам цвет. Вместо 10 элементов данных получается только два (рис. 1).



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

Режим индексированных цветов


Формат GIF ограничен 256-цветной палитрой. Это означает, что, независимо от того, сколько цветов содержит файл, после преобразования в формат GIF в нем останется 256 цветов или меньше. Причина этого ограничения состоит в том, что стандарт GIF разрабатывался для низких скоростей сетевых соединений. Так как каждый цвет, включенный в графический файл, представляет собой допол­нительные данные, меньшее количество цветов означает меньшие размеры фай­ла и более короткое время загрузки. В Photoshop есть режим индексированных цветов (Indexed Color), в котором цвета автоматически удаляются из графичес­кого файла.

Преобразование в режим индексированных цветов


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

Выберите из строки меню Image => Mode => Indexed Color (Изображение => Режим => Индексиро­ванные цвета), чтобы вывести на экран окно диалога Indexed Color (Индексированный цвет) (рис. 2).



Рис. 2. Окно диалога Indexed Color (Индексированный цвет)


  • Выберите Web (Сетевая) из раскрывающегося списка Palette (Палитра).

  • Щелкните на кнопке ОК.



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


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

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


Рис. 3. Так сохраняется чересстрочный GIF
Когда изображение загружается в Web-браузер, оно выводится на экран анало­гичным способом. Так как различные части изображения загружаются одновре­менно, пользователь может быстро представить себе, что представляет собой файл, задолго до появления целого изображения (рис. 4).


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

Создание чересстрочных файлов GIF


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

1. Выберите команду File => Save As (Файл => Сохранить как). На экране появится окно диалога Save As (Сохранить как) (рис. 5).



Рис. 5. Окно диалога Save As
2. Из раскрывающегося меню Save As (Сохранить) выберите формат файла CompuServe GIF и щелкните на кнопке Save (Сохранить). На экране появится окно диалога GIF Options (Параметры GIF).

Для параметра Row Order (Порядок записи) выберите вариант Interlaced (Черес­строчный) (рис. 6).



Рис. 6. Окно диалога GIF Options (Параметры GIF)
3. Щелкните на кнопке ОК и сохраните файл с расширением .gif.

ПРИМЕЧАНИЕ


Применяйте чересстрочные изображения только для файлов с размерами больше 10 Кбайт. Если графический файл очень маленький, то он будет загружаться настолько быстро, что чересстрочный эффект останется незамеченным.
Теперь файл GIF будет постепенно появляться на экране по мере того, как гра­фическая информация будет загружаться из Web.

Прозрачность


Эффект прозрачности заключается в том, чтобы сделать один или несколько цветов в графическом файле невидимыми, позволяя другим цветам «просвечи­вать» через них. Для чего нужны графические файлы с прозрачными цветами? Наиболее распространенная причина в том, что вся Web-графика ограничена прямоугольной формой. Невозможно сохранить круг или объект неправильной формы, не включая пространство вокруг него.

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



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


Рис. 8. Прозрачный графический объект на графическом фоне

Применение эффекта прозрачности


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

1. Выберите команду File => Save for Web…. На экране появится содержащее ряд параметров окно диалога Save for Web (рис. 9).


Zoom Tool (Масштаб)12


Hand Tool (Масштаб)12


Eyedropper Tool (Масштаб)12


Maps selected colors to Transparent


Рис. 9. Окно диалога Save for Web (Сохранить для Web)
2. Как показано на рис. 9, используйте инструмент Zoom Tool (Масштаб) для увеличения или уменьшения некоторых областей графического файла.

3. Используйте инструмент Hand Tool (Рука) в окне просмотра Optimized.

4. Выберите инструмент Eyedropper (Пипетка) и щелкните на цвете (цветах) в графическом файле, которые нужно сделать прозрачными, а затем на пиктограмме Maps selected colors to transparent (рис. 9).

СОВЕТ


Внимательно выбирайте прозрачные цвета. Если даже небольшое количество этого цвета будет использоваться в области, которую прозрачной делать не нужно, в графическом файле появится куча «дыр».
Вы также можете использовать пипетку для выбора цветов, которые нужно сделать прозрачными, из палитры в правой части окна диалога Save for Web. В палитре также показано, какие цвета будут прозрачными.

Чтобы снова сделать цвет непрозрачным, выберите инструмент Eyedropper. Щелкните на соответствующих цветах либо в окне просмотра, либо в палитре, чтобы сделать их непрозрачными щелкните на пиктограмме Maps selected colors to transparent.

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

Ореол (Halo)


Один из подводных камней, которые подстерегают пользователя при создании эффекта прозрачности, состоит в том, что при этом может появляться так назы­ваемый ореол (halo). Photoshop применяет сглаживание (anti-aliasing) к краям объектов. Например, если темно-синий круг нарисован на белом фоне, то Photo­shop создаст промежуточные цвета, в нашем случае светло-синие, расположен­ные между краями круга и фоном (рис. 10).


Рис. 10. Сглаживание, выполняемое Photoshop
Хотя этот эффект сглаживания делает графику Photoshop очень интересной, он может сыграть плохую шутку с графикой, построенной на прозрачном фоне. Когда такие изображения отправляются в Web и помещаются поверх узоров или других цветов, то сглаженный край становится видимым. На рис. 11 показан черный круг на черном фоне. В идеале должен получиться полностью черный эк­ран. Но в этом случае ореол выдает контур круга.


Рис. 11. Эффект ореола
Хотя ореол никогда нельзя удалить полностью, есть пара превентивных мер, ко­торые вы можете предпринять. Сначала выберите прозрачный цвет, как можно более близкий по тону и значению к цвету или узору, на котором будет распола­гаться графический файл. Если фон Web-страницы – это кирпичная стена, вы­берите темно-красный цвет в качестве прозрачного. Photoshop создаст промежу­точные цвета для перехода от края объекта к темно-красному цвету. При этом ореол будет намного труднее заметить, если объект будет размещен на фоне кир­пичной стены.

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

Формат JPEG


Формат JPEG (JPEG – Joint Photographic Experts Group, объединенная группа экспертов по фотографии – произносится «джей-пег») — это стандарт сжатия, который был разработан для уменьшения размера файлов с изображениями, со­держащими плавные переходы цветовых тонов и оттенков. Лучше всего он под­ходит для фотографий или графики со сложными тенями и эффектами освещения. Обычно формат JPEG используется в Web для фотографий товаров, объемных изображений и графики с эффектами освещения.

Сжатие


JPEG сжимает изображение, сохраняя его полную черно-белую версию и боль­шую часть цветовой информации. Так как сохраняется не вся цветовая информа­ция, формат JPEG называется форматом с потерями (lossy). Этот характер фор­мата JPEG обычно проявляется, особенно в сильно сжатых файлах, в виде размытого или случайного распределения пикселей (рис. 12.18).



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


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



Рис. 14. Отличия качества JPEG и GIF для графики с плавными переходами цветовых тонов
ПРЕДУПРЕЖДЕНИЕ

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

Параметры JPEG в Photoshop


Окно Save for web… параметров JPEG позволяет устанавливать параметры изображения и фор­мата при преобразовании графического файла в формат JPEG. Элементы управ­ления для настройки формата JPEG доступны в в правой части настроек Settings окна диалога Save for web… (рис. 15).



Рис. 15. Settings (Настройки) окна Save for web (Сохранить для веб) формата JPEG
Для корректировки качества изображе­ния используется параметр Quality (Качество). Ноль – самое низкое качество, а 100 – самое высокое. Более низкое каче­ство приводит к меньшему размеру файла, а более высокое – к большему. На рис. 16 показано относительное различие в размерах файла при разном каче­стве изображения.



Рис. 16. Отличия файлов JPEG для низкого и среднего качества
Вариант Progressive создает эффект, ана­логичный чересстрочному, который мы обсуждали ранее для формата GIF.
СОВЕТ

В отличие от файлов GIF, файлы JPEG нельзя сохранять в режиме индексированных цве­тов. Вместо этого сохраняйте файлы JPEG в цветовом режиме RGB.

Создание файла JPEG


Чтобы создать файл JPEG, выполните следующее:

1. Save for Web…. На экране появится содержащее ряд параметров окно диалога Save for Web (рис. 17).



Рис. 17. Settings (Настройки) формата JPEG
2. В области Settings (Настройки) формат JPEG задайте качество (Quality) (рис. 17), подходя­щее для вашего изображения.

3. Щелкните на кнопке Save и сохраните графический файл.
ПРИМЕЧАНИЕ

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


1 Адаптированный текст из книги Мэтта Стразницкаса «Эффективная работа с Photoshop», 1999.

Похожие:

Форматы графических файлов Web (gif, jpeg) iconИсследование параметров мультимедийных файлов
Изучить основные форматы текстовых файлов и установить зависимости размера текстовых файлов различных форматов от числа графических...
Форматы графических файлов Web (gif, jpeg) iconОтчет по Курсовой работе По курсу: компьютерная графика «Исследование графических форматов»
...
Форматы графических файлов Web (gif, jpeg) iconКурсовая работа по дисциплине «Компьютерная графика»
...
Форматы графических файлов Web (gif, jpeg) iconКурсовая работа по дисциплине «Компьютерная графика»
Все форматы графических файлов можно разделить на два типа: растровые и векторные. Друг от друга они отличаются принципом формирования...
Форматы графических файлов Web (gif, jpeg) iconПояснительная записка к курсовому проекту по курсу «Методы и способы компьютерных информационных технологий» на тему «Разработка программных способов для просмотра графических файлов, создание графических эффектов»
«Разработка программных способов для просмотра графических файлов, создание графических эффектов»
Форматы графических файлов Web (gif, jpeg) iconТребования к файлам, предоставляемым для офсетной печати Форматы применяемых файлов
Генерация pdf-файлов должна осуществляться через Adobe Acrobat Distiller c использованием установочных параметров, которые можно...
Форматы графических файлов Web (gif, jpeg) iconИсследование параметров мультимедийных файлов
Изучить основные форматы звуковых файлов wav, mp3 и установить зависимости размера файла различных форматов от степени сжатия с учетом...
Форматы графических файлов Web (gif, jpeg) iconИспользование формата gif для представления результатов вычислений
Наиболее подходящим форматом для передачи графической информации, полученной в результате решения вычислительных задач, является...
Форматы графических файлов Web (gif, jpeg) iconТехнология создания библиотечных электронных коллекций и обеспечения web-доступа к ним
Тся решение задачи предоставления web-доступа к полнотекстовым электронным коллекциям, созданным на основе данных в формате usmarc...
Форматы графических файлов Web (gif, jpeg) icon«Web- проектирование и Web-дизайн. Пакет FrontPage2003. Управление Web-сайтом»
Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org