1.4.8 Работа с графикой

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

Типы графических вставок в web-страницы:

• логотип – идентификатор корпоративного стиля;

• титульная графика – предоставляет посетителям информацию по тематической направленности веб-ресурса;

• навигационные кнопки – дополнительный метод перемещения пользователя по ресурсу;

• маркеры списков – часто используются для разделения параграфов и абзацев в документе;

• разделительные линии – обычно используются для разделения текстов и облегчения их восприятия;

• фоновые рисунки – улучшают внешний вид страниц, однако, зачастую, ухудшают восприятие пользователем текстовой информации и становятся визуальным шумом;

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

Простейшим методом внедрения изображений в HTML-документ происходит с помощью тега <img>. Этот тег имеет единственный обязательный атрибут <src>, который определяет адрес файла с картинкой:

<img src = "URL" alt = "альтернативный текст"/>.

Альтернативный текст – текст, который будет показан пользователю в случае невозможности вывода изображения. Рекомендуется всегда указывать в атрибутах тега ширину и высоту с помощью атрибутов <width> и <height>. Это нужно для того, чтобы браузер мог сразу просчитать и зарезервировать необходимое для изображений место на странице.

В вопросах использования графики существуют свои особенности:

• из двух совершенно одинаковых рисунков больше запоминается тот, который имеет бо́льшие геометрические размеры;

• черно-белая веб-графика запоминается меньше, чем полноцветная;

• из двух совершенно одинаковых рисунков больше запоминается более яркий;

• из двух совершенно одинаковых рисунков больше запоминается более контрастный;

• примитивная графика, иллюстрирующая процессы, схемы и пр. понимается и запоминается быстрее и проще, чем сложная графика, иллюстрирующая те же самые процессы и схемы;

• графика с простейшими геометрическими формами (овал, квадрат, прямоугольник) воспринимается легче, чем графика со сложными геометрическими формами [21].

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

Основными форматами графических файлов в веб-дизайне являются GIF, JPEG, PNG.

GIF (англ. Graphics Interchange Format, формат для обмена изображениями) изначально предназначался для передачи растровых изображений по Сети, однако, в первой версии формата файл изображения получался слишком объемным, что на тот момент делало невозможным его передачу по Сети.

Среди новых функциональных возможностей обновленного формата оказались: поддержка прозрачности и анимации, значительное сокращение объема файла изображения за счет поддержки LZW-компрессии³. Формат GIF считается стандартным для анимированных изображений.

JPEG (англ. Joint Photographic Experts Group, объединенная группа экспертов фотографии) применяется для хранения многоцветных фотографических изображений, т.к. обеспечивает сжатие полноцветного изображения практически без уменьшения количества цветов. Процесс сжатия происходит за счет уменьшения числа пикселей, содержащих информацию.

PNG (англ. Portable Network Graphics, переносимая сетевая графика) является растровым форматом хранения графической информации без потери качества во время сжатия.

Задумывался данный формат как замена GIF. Отсюда и схожие возможности, вроде наличия прозрачного фона. Однако, PNG имеет большой, по сравнению с GIF, объем файла с изображением, а также не поддерживает анимацию. Тем не менее, формат PNG отлично подходит для хранения и редактирования изображений на промежуточной стадии их создания [8].