HTML Изображения

Тег <img>

Изображения — лучшее украшение веб-документа. Благодаря изображениям мы можем улучшить вид сайта, сделать его ярче, интереснее и удобнее для пользователей. Под изображениями подразумевают значки, рисунки, фотографии и карты изображений, занимающие часть окна браузера. Для вставки изображения в веб-страницу используется одинарный строчный тег <img>. Для него должны быть указаны следующие два атрибута:

Атрибут «src».

Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Пример HTML:

Попробуй сам
<img src="rabbit.gif">

Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:

<img src="pictures/nameimage.gif">

Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:

<img src="http://www.wm-school.ru/pictures/nameimage.gif">

При такой записи размер изображения на экране будет соответствовать его реальным размерам.

Атрибут «alt».

При отображении веб-документа прежде всего загружается текстовая часть, а затем — более ёмкие графические файлы. При медленном Интернете вы можете заметить как в окне браузера вместо этих файлов сначала появляются прямоугольные области, зарезервированные под рисунки. Img является строчным элементом. По умолчанию изображение будет выводиться в общем потоке как одна большая буква в том месте, где встретится элемент img. Как правило, первоначальные изображения представляются в виде небольшой пиктограммы в виде прямоугольника. Уже на этом этапе можно дать знать пользователю, загрузку какого изображения он ожидает. Это очень полезно для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики. Для отображения такого поясняющего текста служит атрибут alt. Он позволяет добавить альтернативный текст, который будет отображаться вместо изображения, если по каким-либо причинам графический файл загрузить не удалось. Кроме того, атрибут alt используется поисковыми системами для поиска по содержимому альтернативному тексту картинок в Интернете.

Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt="". Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Теоретически, если рисунок не может быть найден, вместо него выводится значение атрибута alt:

Пример HTML:

Попробуй сам
<p><img src="rabbit.gif" alt="Это кролик"></p>
<p><img src="errorname.gif" alt="Это слон"></p>

Атрибуты «width» и «height»

Вы уже знаете, что браузер загружает изображения после того, как загрузит HTML-документ и начнет отображать веб-страницу. И если вы отдельно не укажете размеры изображения, то браузер не будет их знать до тех пор, пока не загрузит рисунок. В этом случае вместо изображения сначала отображается квадратик, а после загрузки графического файла происходит обновление страницы с соответствующим перемещением текста, других объектов страницы и потерей времени. Если же размеры заданы, то браузер оставляет место для изображения и страница загружается быстрее. Вы также можете указать значения атрибутов width и height, которые меньше или больше, чем фактические размеры изображения, и браузер установит пропорции рисунка так, чтобы они соответствовали новым размерам. Их значения можно указывать в пикселах или процентах от размера окна (в этом случае после размера ставится знак %). Если после числовых значений атрибутов размерность не указана явно то, по-умолчанию, браузер интерпретирует эти величины в пикселях.

Пример: использования атрибутов width и height

апельсин апельсин апельсин
Если вам нужно значительно изменить размеры изображения, то используйте специальные графические редакторы для работы с изображениями. Они смогут изменить размеры изображения вовсе без искажений.

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

Если вы используете атрибуты width и height для того, чтобы изменить размеры изображения в браузере, то можно сказать, что вы применяете их для оформления веб-страницы, а в этом случае, лучше использовать CSS, что позволит добиться тех же результатов. Вы можете использовать атрибут style указав свойства width и height изображения:

<img src="images/orange.jpg" alt="апельсин" style="width:150px;height:147px;">         

Пример: задание размеров изображения с помощью атрибута style

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения. Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства. В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров. В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях.

<img src="images/camel.jpg" style="max-width:100%" alt="Верблюд">         

Пример: задание размеров изображения с помощью max-width

Карты-изображения

Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тега <map>, а области-ссылки в них с помощью тега <area>. Атрибут name тега <map> связан с атрибутом usemap и создает связь между изображением и картой.


<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta">
  <!-- прямоугольник с координатами в верхнем левом углу изображения (133,163)-->
  <area shape="rect" coords="133,163,414,252" 
  title="Зажигалка" href="javascript:alert('Это прямоугольная ссылка');"> 
  <!-- круг с радиусом в 40 пикселей и центром, расположенном в точке (58, 158) -->
  <area shape="circle"" coords="58,158,40" 
  title="Монета" href="javascript:alert('Вы выбрали круг');">
  <!-- многоугольник с координатами вершин (133,62), (278,59) и т.д. --> 
  <area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95" 
  title="Ключ от авто" href="images/auto500.jpg" target=_blank> 
</map>

Пример карты-изображения (по фрагментам изображения можно щелкать):

Пример: Создание карты изображений

Карта изображений

Атрибуты тега <area>:

Название атрибутаОписание
shapeОчертания области. Возможные значения атрибута:
rect – прямоугольник;
circle – круг;
poly – многоугольник.
coordsКоординаты области:
Для прямоугольника – координаты левого верхнего и правого нижнего углов.
Для круга – координаты центра и радиус.
Для многоугольника – координаты всех углов.
hrefURL-адрес файла, на который делается ссылка.
titleВсплывающий текст, появляющийся при наведении курсора на заданную область.
altТекстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.

Задачи


  • Путь к изображению

    В приведенном коде ошибочно указан путь к изображению "face_smiley.jpg" вместо "smiley.jpg". Исправьте ошибку.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Путь к изображению</title>  
     </head>
     <body>
      <p><img src="face_smiley.jpg" style="width:100px;height:75px;"></p>
     </body>
    </html>
  • Альтернативный текст

    Изображение в данном примере не может быть отображено веб-браузером. Укажите для изображения альтернативный текст "wm-school.ru", который необходим для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Альтернативный текст</title>  
     </head>
     <body>
      <p><img src="wm-school.jpg" style="width:100px;height:75px;"></p>
     </body>
    </html>
  • Изображение-ссылка

    Сделайте изображение абсолютной ссылкой, ведущей на сайт "www.wm-school.ru".

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Изображение-ссылка</title>  
     </head>
     <body>
      <p><img src="smiley.jpg" alt="Уроки HTML" style="width:100px;height:75px;"></p>
     </body>
    </html>
  • Размеры изображения

    С помощью HTML увеличьте изображение в 2 раза.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Размеры изображения</title>  
     </head>
     <body>
      <p><img src="smiley.jpg" alt="Смайлик" style="width:100px;height:75px;"></p>
     </body>
    </html>
  • Изображение в 100%

    Сделайте чтобы изображение отображалось полностью вне зависимости от ширины окна браузера.
    Изменяйте размер окна браузера с помощью растягивания/сужения размера или меняйте масштаб с помощью Ctrl+"+" / Ctrl+"-".

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Изображение в 100%</title>  
     </head>
     <body>
      <p><img src="../images/ship1000.jpg" alt="" style="width:1000px;height:563px;"></p>
     </body>
    </html>