Форматы графики для Web

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

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

Рис.13.7. Свойства прозрачного изображения на фоне

Свойства прозрачного изображения на фоне

Прозрачный фон GIF-изображения реализуется в Photoshop, установив флажок "Transparency" в окне "SaveFor Web" (рис.13.8).

Используя вкладку «Color Table" окна "Save For Web" можно оптимизировать полученное изображение, удалив близкие по оттенку цвета - это не будет визуально заметно. Размер изображения отображается в нижнем левом углу окна (рис.13.8) вместе со временем загрузки при использовании dial-up доступа с быстродействием, присущей среднестатистическому соединению.

Из нескольких GIF-изображений с помощью специальных программ (например, Adobe ImageReady или Ulead GIF Animator) можно создать анимацию, что будет отображаться всеми браузерами и не потребует загрузки программ для ее просмотра.

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

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

Созданное (или отредактированное) изображение можно сохранить с произвольным степенью компрессии, в зависимости от нужного размера графического файла. При сильном сжатии изображения (уровень ниже High> 40% сжатия картинки) с появляются так называемые артефакты - размытые группы точек.

Окно сохранения GIF-изображения для Web

Рис.13.8. Окно сохранения GIF-изображения для Web

Особенно четко это наблюдается по краям объекта (рис.13.9). Рассмотрим еще одно интересное решение использования больших изображений в Web-сайтах - например, фотографий в галереях. Для каждой фотографии создается миниатюра (thumbnail), путем уменьшения размеров исходного изображения (рис.13.10).

Визуальное сравнение изображений с разной степенью компрессии

Рис.13.9. Визуальное сравнение изображений с разной степенью компрессии

Отметим, что уменьшение размеров должно быть пропорциональным, для чего в окне "Image Size" устанавливается флажок Constrain Proportions. Важным является также установление флажка "ResampleImage": Bicubic - выбор Бикубическая алгоритма распределения пикселей в уменьшенном изображении. Этот алгоритм, как правило, дает лучший результат. Для создания миниатюр можно использовать и автоматические средства, встроенные в Adobe Photoshop - макрос Web Photo Gallery (File - Automate). На основе входных данных - папки с фотографиями - автоматически создается Web страница со связанными миниатюрами.

Диалоговое окно изменения размеров исходного изображения

Рис.13.10. Диалоговое окно изменения размеров исходного изображения

Другим форматом, сочетающим в себе свойства двух предварительно рассмотренных форматов является PNG - Portable Network Graphics. Разработчики нового формата ставили целью полную замену GIF. PNG значительно сложнее GIF, кроме того он поддерживает 24-битные и 48-битные изображения (GIF - только 8-битные). Поддерживает, по аналогии с JPEG, изображение в режимах RGB, Grayscale (градации серого) Indexed color (индексированный цвет), как GIF. Также он поддерживает различные уровни прозрачности.

Резюме

WWW - известный и популярный сервис Интернет, глобальная, распределенная по всему миру информационная гипертекстовая мультимедийная система, которая позволяет объединить в одно целое информацию различных видов, которая хранится на разных компьютерах. Информация в WWW распространяется в виде web-страниц (web-документов). Несколько web-страниц с одной темы, принадлежащих одному владельцу ли на одном компьютере, образуют web-узел, который часто называют сайтом. HTML - специальный язык форматирования текстовых электронных документов, текст которого состоит из последовательности команд - тeгив (дескрипторов).

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

Ключевые слова

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

Вопросы и задания для обсуждения и самопроверки:

► Опишите способ распространения информации в WWW.

► Дайте определение и кратко охарактеризуйте HTML.

► Что может содержаться в Web-документе?

► Назовите требования к Web-узлов.

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

► Какие бывают виды гипертекстовых ссылок (линок)?

► Назовите обязательные теги в коде Web-страницы.

► Что такое безопасная палитра цветов для Web?

► Какие шрифты установлены по умолчанию в браузерах?

► Почему использовать большие изображения на Web-страницах нецелесообразно?

► Что такое артефакт на JPEG-изображения?

 
< Пред   СОДЕРЖАНИЕ   След >