§ 27. Рисунки

Форматы рисунков

Рисунки хранятся на веб-серверах в виде отдельных файлов и подключаются к веб-странице с помощью тэга <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 можно использовать для хране​ния смешанных векторно-растровых изображений, а также анимированных рисунков. Большинство современных векторных редакторов (Inkscape, OpenOffice.org Draw, Adobe Illustrator, CorelDraw) может сохранять изображения в формате SVG.

Рисунки в документе

Для вставки изображения в код веб-страницы используется непарный тэг <img>. Его атрибут src (от англ. source — источ​ник) задаёт имя файла, например:

<img src="night.jpg">

Этот файл браузер будет искать в том же каталоге, где нахо​дится веб-страница. Можно, как и при создании гиперссылок, указывать относительный путь к файлу:

<img src="../../images/night.jpg">

или даже загружать картинку с другого веб-сервера:

<img src="http://example.com/images/night.jpg">

По умолчанию рисунок вставляется прямо в текст, как одна «большая буква». Для того чтобы установить обтекание текстом, используют атрибут 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+xml" data="test.svg"

width="48" height="48" align="left"></object>

Этот тэг используется для добавления на веб-страницу «нестандартных» данных. Атрибут 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-графика на веб-страницах»

 

НАЗАД