2.2.4. Вставка изображений на веб-страницу

Тэг <img> используется для размещения изображения на веб-странице. Этот тэг одиночный. Синтаксис тэга:

<img src="путь к изображению" width=ширина height=высота alt="Подпись к изображению">

Пример:

<img src="/pictures/catphoto.jpg" width=200 height=175 alt="Фотография моего кота">

Атрибуты тэга <img>:

src – обязательный атрибут, в котором указывается имя файла изображения;

width и height – задают ширину и высоту изображения (в пикселах) соответственно;

alt – альтернативный текст, который выводится, если браузер по какой-либо причине не может показать изображение. Например, это происходит, если пользователь отключил вывод изображений или нажал кнопку «Stop» (Остановить), не дождавшись загрузки картинок. Наконец, пользователь может просматривать веб-страницу текстовым браузером, в котором вообще не выводятся изображения. Поэтому нужно указывать этот атрибут для изображений, которые несут смысловую нагрузку, например, являются гипертекстовыми ссылками.

border – размер рамки вокруг изображения. По умолчанию 0, т.е. рамка отсутствует. Исключением являются изображения, являющиеся гиперссылками: они по умолчанию обводятся рамкой. Чтобы сделать изображение-гиперссылку без рамки, необходимо в явном виде указать у него атрибут border=0;

align – выравнивание изображения относительно текста (возможные значения: top, bottom, left, right);

hspace – отступы слева и справа от изображения (в пикселах). Используются, чтобы текст не сливался с рисунком;

vspace – отступы сверху и снизу от изображения (в пикселах)

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

При размещении изображений следует учитывать ограничения, связанные с их размером и форматом. Большие изображения значительно замедляют время загрузки страницы. Изображение, полученное с помощью современной цифровой камеры с разрешением 5 мегапикселов с наилучшим качеством, имеет размер около 2 Мбайт. При скорости передачи данных модемом 28 кбит/с загрузка только одного такого изображения займёт около 10 мин. Поэтому такие изображения перед размещением на веб-странице необходимо уменьшить в графическом редакторе.

Другое важное ограничение – формат изображения. Размещайте на своих страницах только те форматы изображений, которые поддерживаются большинством браузеров. В настоящий момент – это GIF и JPEG. Формат GIF (файлы с расширением .gif) поддерживает 256 цветов, прозрачность (позволяет любой цвет в палитре сделать прозрачным), анимацию (сохранение в одном файле нескольких изображений). Формат JPEG (файлы с расширением .jpg) поддерживает до 16,7 млн. цветов и используется для сохранения фотографических изображений. В настоящее время растёт также популярность формата PNG. Не следует использовать на веб-страницах формат BMP – он поддерживается не всеми браузерами и имеет большой объём.

Не забывайте указывать размеры изображений. Начинающим это может показаться ненужным, ведь браузер и так выводит изображение. Однако дело в том, что браузер, встретив тэг <img>, повторно обращается к веб-серверу, запрашивая картинку. Перед этим он определяет некоторую область прямоугольной формы, где будет размещено изображение. Если в тэге <img> указаны атрибуты width и height, то браузер резервирует место в соответствии с их значениями; если не указаны – то некоторую прямоугольную область с размерами по умолчанию. Пришедшее от сервера изображение будет размещено в этой области. Таким образом, не придётся тратить время на изменение размеров стандартной области перед вставкой картинки в неё (и, возможно, переформатирование соседних элементов страницы). Кроме того, форматирование страницы сохранится даже в том случае, когда картинка не отображается браузером.

Указывайте реальные размеры изображений. Если вас не устраивают размеры картинки, которую вы разместили на странице, сначала измените её ширину и высоту в графическом редакторе, затем исправьте атрибуты width и height в соответствии с новыми размерами. Например:

<img src="/pictures/photo1.jpg" width=200 height=200 alt="">

Допустим, картинка показалась вам слишком большой. Выясним, что произойдёт, если вы уменьшите размеры в атрибутах width и height, не изменяя размеров самого́ изображения:

<img src="/pictures/photo1.jpg" width=150 height=150 alt="">

Браузер зарезервирует место размером 150×150 пикселов и запросит с сервера файл photo1.jpg из папки pictures. На сервере находится файл с изображением размером 200×200 пикселов, который и будет отправлен пользователю. В браузере это изображение будет сжато до размера 150×150 пикселов. На это уйдёт дополнительное время, и качество изображения в большинстве случаев ухудшится.