Форматы рисунков
Рисунки хранятся на веб-серверах в виде отдельных файлов и подключаются к веб-странице с помощью тэга <irag>. Браузеры умеют работать с тремя форматами растровых рисунков: GIP, JPEG и PNG.
Файлы с рисунками в формате GIF (англ. Graphic Interchange Format — формат для обмена графикой) обычно имеют расширение gif. Этот формат использует один из наиболее эффективных алгоритмов сжатия информации без потерь — LZW-алторитм и позволяет хранить изображения с палитрой (до 256 цветов), в том числе и анимированные. Некоторые области рисунка можно сделать прозрачными, через них будет виден фон веб-страницы. Рисунки в формате GIF применяются для кодирования чётких изображений (схем, чертежей) или мелких деталей, имеющих не более 256 цветов.
Рисунки в формате JPEG (англ. Joint Photographer Expert Group — объединённая группа экспертов по фотографии) хранятся в файлах с расширениями jpg или jpeg. Этот формат предусматривает сжатие с потерями, при котором теряются (размываются)некоторые мелкие детали. В файле хранится полноцветное изображение (неиспользующее палитру), глубина кодирования цвета — 24 бита на пиксель, что даёт возможность задавать более 16 млн цветов (режим True Color — «истинный цвет»). Формат JPEG применяется для хранения изображений с нечёткими границами,например фотографий.
Формат PNG (англ. Portable Network Graphic — переносимая сетевая графика) был создан для улучшения и замены формата GIF, поскольку он, в отличие от GIF, не требует лицензии на использование. Файлы имеют расширение png и могут хранить разные типы изображений:
• с палитрой (до 256 цветов);
• полноцветные с глубиной цвета 24 или 48 битов на пиксель.
В отличие от других форматов формат PNG поддерживает частичную прозрачность пикселей, что позволяет создавать многослойные изображения на веб-страницах. Для хранения степени прозрачности выделяется отдельный канал (так называемый альфа-канал, англ. alpha channel) — дополнительно 8 или 16 битов на пиксель. Такой формат называется RGBA: «Red — Green — Blue — Alpha». Главный недостаток формата PNG — низкая эффективность сжатия маленьких рисунков в сравнении с форматом GIF.
Для добавления векторных рисунков на веб-страницу применяют формат SVG (англ.Scalable Vector Graphics — масштабируемая векторная графика), который умеют обрабатывать все современные браузеры. Формат SVG можно использовать для хранения смешанных векторно-растров
Рисунки в документе
Для вставки изображения в код веб-страницы используется непарный тэг <img>. Его атрибут src (от англ. source — источник) задаёт имя файла, например:
<img src="night.jpg">
Этот файл браузер будет искать в том же каталоге, где находится веб-страница. Можно, как и при создании гиперссылок, указывать относительный путь к файлу:
<img src="../../image
или даже загружать картинку с другого веб-сервера:
<img src="http://exam
По умолчанию рисунок вставляется прямо в текст, как одна «большая буква». Для того чтобы установить обтекание текстом, используют атрибут align (англ. align — выравнивание):
Значения left и right этого атрибута задают соответственно выравнивание влево и вправо (рисунок прижимается к краю текста) (рис. 4.13).
Для Internet Explorer нужно установить специальное дополнение (плагин).
Вариант с выравниванием влево (средний рисунок) смотрится плохо, потому что фотография «стучится» о соседний текст, подходит к нему вплотную. Чтобы этого не происходило, можно увеличить отступы, которые задаются с помощью атрибутов hspace (англ. horizontal space — горизонтальный отступ) и vspace (англ. vertical space — вертикальный отступ):
<img src="night.jpg" align="left" hspace="10" vspace="10">
Значения отступов указаны в пикселях. Результат показан на рис. 4,14.
Браузер может определить размеры рисунка только тогда, когда он загрузит его с сервера. Поэтому сначала вместо рисунка на веб-странице появляется небольшой прямоугольник, который потом заменяется изображением. При этом размеры поля, отведённого рисунку, меняются, остальной материал на экране тоже сдвигается, что неудобно для пользователя. Однако есть простое решение этой проблемы — заранее указать браузеру размеры рисунка (атрибуты width — ширина и height — высота):
<irag src="night.jpg" width="800" height="600"
alt="Ночь на Ладоге">
Атрибут alt (англ. alternative — альтернативный, замещающий) задаёт текст, который показывается на месте рисунка, пока тот ещё не загружен. Кроме того, значение атрибута alt учитывают поисковые системы.
Рисунки очень часто служат гиперссылками. Для этого тэг <irag> нужно поместить внутрь контейнера-ссылк
<а href="gallery. htm"><img src="night. jpg"
border="0"></a>
Атрибут border (англ. border — граница) установлен равным нулю для того, чтобы убрать синюю рамку, которая появляется по умолчанию вокруг рисунка-ссылки.
Векторные рисунки вставляются с помощью тэга <object>, например:
<object type="image/svg+
width="48" height="48" align="left"></ob
Этот тэг используется для добавления на веб-страницу «нестандартных» данных. Атрибут type определяет тип данных (рисунок в формате SVG), атрибут data — имя файла, остальные атрибуты такие же, как у тэга <img>.
Фоновые рисунки
Для любого элемента веб-страницы можно определить фоновый рисунок. Для этого к свойствам тэга в стилевом файле нужно добавить селектор background (фон), значение которого задаётся в виде url (адрес файла). В этом примере определяется фон для всего тела страницы (рис. 4.15).
body {
background: url(grad.jpg);
}
Если рисунок меньше, чем видимая часть элемента, он повторяется. Повторение можно отменить, добавив свойство no-repeat;
body {
background: url(grad.jpg); no-repeat;
}
Если нужно оставить повторение только по горизонтали, вместо no-repeat указывают repeat-x, а если задать значение repeat-y, то сохраняется только повторение по вертикали.
Фоновые рисунки нужно применять с большой осторожностью. Дело в том, что разнородный фон всегда мешает читать текст, т.е. затрудняет выполнение основной задачи пользователя-получения полезной информации.
Поэтому профессиональные дизайнеры используют фоновые рисунки чаще всего там, где нет текста ( например, для вставки логотипа ).
Вопросы и задания
1. Какие форматы рисунков можно использовать на веб-страницах?
Сравните их свойства.
2. Почему изображения с чёткими границами не хранят в формате
JPEG?
3. Почему фотографии не хранят в формате GIF?
4. В каких форматах можно хранить изображения с прозрачными
и частично прозрачными областями?
5. Что представляет собой формат PNG?
6. Какие атрибуты тэга <img> вы знаете? Что они обозначают?
7. Где браузер будет искать этот рисунок?
<img src="../../images/night.jpg">
8. Почему в тэге <img> рекомендуется указывать размеры рисунка
и атрибут alt?
9. Как добавить на веб-страницу рисунок-гиперссылку?
10. Какой формат векторных рисунков можно использовать на веб-страницах? Какой тэг применяется для вставки таких рисунков?
11. Почему фоновые рисунки нужно использовать с большой осторожностью?
Подготовьте сообщение
а) «Форматы растровых рисунков на веб-страницах»
б) «Формат PNG»
в) «SVG-графика на веб-страницах»