HTML-тег <img>

Изображения добавляются на сайт с помощью тега HTML <img>. Адрес картинки задается через атрибут src. Само изображение может находиться как на вашем сайта, так и на любом другом. Ниже простейший пример вставки картинки в HTML.

See the Pen
img простой
by Андрей (@adlibi)
on CodePen.

Атрибуты изображения

Атрибут Описание и значения
align Значения: top | bottom | middle | left | right

Устарело – определяет выравнивание картинки.

alt Альтернативный текст для описания картинки. Выводится до момента загрузки изображения, а также вместо картинки, если они не поддерживаются. Его отсутствие считается считается технической ошибкой верстки, но тег img работать будет.

Синтаксис: alt="альтернативный текст"

border Устаревшее значение. Выводит рамку вокруг картинки, значение задается в пикселях.
crossorigin Значения: anonymous | use-credentials

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

height Высота картинки: в пикселях или %.
hspace Устарело – количество пустого места, которое нужно вставить слева и справа от объекта: в пикселях.
ismap Указывает, что картинка является частью карты (изображение-карта содержит интерактивные области). При нажатии на картинку на сервер передаются данные в виде параметра адресной строки.
longdesc Устарело – указывает URL-адрес длинного описания картинки.
src Адрес изображения (или путь к нему). По большому счету является единственным обязательным атрибутом, без него непонятно, что нужно вывести.
sizes Устанавливает разные размеры изображения для разных размеров экрана устройства, на котором просматривается страница. В параметрах указывается медиазапрос (в скобках указывается ширина экрана устройства) и ширина картинки для данного медиазапроса. Через запятую может быть указано несколько значений.

Пример записи:

sizes="(max-width: 480px) 300px, (max-width: 800px) 600px"

Работает только вместе с атрибутом srcset.

srcset Позволяют задать разные источники изображения, которые нужно выводить при разных размерах экрана. Список может состоять из нескольких параметров, каждый на отдельной строке. В каждой строке можно указать: 1. адрес изображения, 2. дескриптор ширины (положительное целое число), за которым сразу следует w (необязательно), 3. дескриптор плотности пикселей (положительное целое число, за которым следует х).

<img src="img.jpg"
srcset="
    img-mobile.jpg 320w,
    img-tablet.jpg 800w,
    img-desktop.jpg 2000w
sizes="
    (max-width: 480px) 300px,
    (max-width: 800px) 600px,
    (max-width: 1200px) 100vw"
  alt="HTML-тег <img>">
title Описание картинки. Выводится при подводке курсора к картинке на сайте. В настоящий момент используется все реже из-за значительного пересечения по смыслу с alt.
usemap Определяет изображение в виде карты-изображения. Значение должно начинаться с символа #.
vspace Устарело – пустое пространство, которое нужно вставить сверху и снизу объекта.
width Ширина картинки в пикселях или процентах.

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

Размеры изображения, отображаемого на сайте, задаются атрибутами width – ширины и height – высота. Если вы не укажите их, тогда картинка будет выведена в своем реальном размере. Если вы зададите только один атрибут, то второй атрибут будет вычислен пропорционально. По умолчанию единица измерения задается в пикселях, но также можно задать и проценты, например 100%. Пример указания размеров у тега img:

<img src="img.jpg" alt="описание фотографии" width="500" height="600">

Совет: Всегда указывайте для изображений атрибуты высоты и ширины. Если они заданы, пространство, необходимое для вставки картинки, резервируется при загрузке страницы. Без этих атрибутов браузер не знает заранее размер картинки и не может зарезервировать для него место. Из-за этого возникает эффект, когда макет страницы изменяется во время загрузки, то есть изображение займет свое место, а нижележащие элементы сдвинутся вниз.

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

Чтобы избежать этого лучше заранее, до загрузки на сайт, уменьшить размер картинок, сделав соответствующим размерам, отображаемым на сайте.

Изображение как ссылка

Для вставки изображения в HTML в виде ссылки, чтобы при клике на нее происходило перенаправление пользователя на другую страницу или другой раздел страницы, нужно обернуть тег img тегом ссылки a. Примерный код следующий:

<a href="websovet.pro"><img src="image.jpg" ></a>

Теперь на сайте появится кликабельное изображение image.jpg.

Основные форматы графических файлов

Очень кратко опишу некоторые форматы графических файлов, используемых вебмастерами.

  • JPEG – пожалуй, самый распространенный в настоящий момент формат. Формат отлично передает насыщенные цветами изображения. Используется в большинстве случаев, если только не требуются какие-то особые свойства у картинки, которые он не поддерживает;
  • GIF – позволяет контейнер из нескольких изображений-кадров, с помощью которых создается анимация;
  • PNG – позволяет добавлять в изображение участки с определенной степенью прозрачности;
  • SVG – векторные рисунки, позволяет масштабировать без потери качества;
  • BMP – растровое несжатое изображение, редко сейчас используется;
  • WebP – формат, разработанный и продвигаемый компанией Google. На момент написания этой статьи не поддерживается ни одним известным графическим редактором.
  • ICO – предназначен в первую очередь для значков, в том числе фавикона сайта. В настоящий момент устарел, но еще встречается на многих сайтах.
Оцените статью
Инструкции для Web
Добавить комментарии