Меню
Главная
Авторизация/Регистрация
 
Главная arrow Информатика arrow Информационные технологии и моделирование бизнес-процессов

Форматы графики для 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-изображения?

 
< Предыдущая   СОДЕРЖАНИЕ   Следующая >
 

Предметы
Агропромышленность
Банковское дело
БЖД
Бухучет и аудит
География
Документоведение
Естествознание
Журналистика
Инвестирование
Информатика
История
Культурология
Литература
Логика
Логистика
Маркетинг
Математика, химия, физика
Медицина
Менеджмент
Недвижимость
Педагогика
Политология
Политэкономия
Право
Психология
Региональная экономика
Религиоведение
Риторика
Социология
Статистика
Страховое дело
Техника
Товароведение
Туризм
Философия
Финансы
Экология
Экономика
Этика и эстетика
Прочее