Изображения (картинки) в HTML

В этой главе:

  • Как работают цифровые изображения

  • Форматы изображений

  • Встраивание изображений

  • Тег <img>

  • Атрибут alt

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

  • Создание карты-изображения

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

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

Как работают цифровые изображения

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

картинка, состоящая из пискселей

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

Форматы изображений

Вы можете сохранять цифровые изображения, используя три общих формата: JPEG, GIF и PNG. Каждый из них имеет различные способы сжатия, свои достоинства и недостатки. Большинство браузеров имеют встроенное программное обеспечение, которое будет интерпретировать и отображать файлы этих форматов.

Встраивание изображений

Текстовое содержимое веб-страницы является частью HTML-документа, окруженной тегами, определяющими смысл и цель каждой части текста. Изображения, с другой стороны, являются внешними файлами и фактически не являются частью веб-страницы. Изображения на страницу встраиваются с помощью тега <img>. Отображение веб-страницы, которая включает в себя изображения, представляет собой двухэтапный процесс: сначала браузер загружает разметку, а затем загружает внешние изображения. Везде, где в коде HTML-документа расположен тег <img>, браузер запрашивает с веб-сервера файл, на которой ссылается тег, и отображает его на месте тега.

Тег <img>

Элемент <img> относится к элементам, вставляющим контент, то есть сам элемент не добавляется непосредственно на веб-страницу, браузер создаёт пространство требуемого размера, в котором отображается изображение, на которое он ссылается. Тег <img> является одиночным тегом, не имеющим содержимого, он имеет обязательный атрибут src, указывающий путь (относительный или абсолютный) к графическому файлу.

Браузеры обрабатывают картинки, как строчные элементы, поэтому они будут располагаться на одной строке с текстом или другими строчными элементами (включая другие картинки):

1
2
3
4
5
6
7
8
9
<html>
  <body>
 
    <p>
      Это смайлик:<img src="smile.jpg" width="144" height="50">, он улыбается.
    </p>
 
  </body>
</html>

Атрибут alt

Атрибут alt является еще одним обязательным атрибутом, он предоставляет альтернативный текст, отображаемый когда изображение недоступно. Это может произойти к примеру из-за того, что неверно указано расширение изображения, неправильно прописан путь и т.д.

1
2
3
4
5
6
7
8
9
<html>
  <body>
 
    <p>
      <img src="slon.jpg" alt="На картинке нарисован слон" width="200" height="50">
    </p>
 
  </body>
</html>

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

Картинки, которые не относятся к основному содержимому страницы, а имеют чисто декоративный характер, тоже должны иметь атрибут alt, но вместо описания их декоративных свойств его значение можно оставить пустым (alt="").

Примечание: если вам нужно добавить всплывающую подсказку с дополнительным описанием к картинке, то вы можете воспользоваться глобальным атрибутом title:

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <p>
      Это смайлик:<img src="smile.jpg" width="144" height="50"
      title="улыбающийся смайлик">, он улыбается.
    </p>
 
  </body>
</html>

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

Если для изображения не указаны размеры, то браузер будет отображать его в естественном размере, но он не сможет определить размер до тех пор, пока изображение загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width и height, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <body>
 
    <p>
      <img src="1.png" width="40" height="40">
      <img src="1.png" width="80" height="80">
      <img src="1.png" width="120" height="120">
    </p>
    <p>
      Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и
      height. Но при очень большом увеличении качество картинки может стать хуже.
    </p>
 
  </body>
</html>

Результат данного примера в окне браузера:

атрибуты width и height

Создание карты-изображения

При помощи тега <map> вы можете создать карту-изображение. Карта-изображение - это активная область на рисунке, являющаяся активной ссылкой. Атрибут name элемента <map> связан с атрибутом usemap элемента <img>, так как создает связь между тегами <img> и <map>. Тег<area> определяет активные области на картах-изображений. Ниже приведен пример такой карты, при наведении мышкой на 1 квадратик курсор изменится, дав понять, что эта область активная:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <body>
 
    <p>
      <img src="image.png" width="104" height="96" usemap="#num1">
      <map name="num1">
        <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1">
      </map>
    </p>
    <p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>
 
</body>
</html>

Результат данного примера в окне браузера:

пример карты изображения