Изображения добавляются на сайт с помощью тега HTML <img>
. Адрес картинки задается через атрибут src
. Само изображение может находиться как на вашем сайта, так и на любом другом. Ниже простейший пример вставки картинки в HTML.
See the Pen
img простой by Андрей (@adlibi)
on CodePen.
Атрибуты изображения
Атрибут | Описание и значения |
---|---|
align |
Значения: top | bottom | middle | left | right
Устарело – определяет выравнивание картинки. |
alt |
Альтернативный текст для описания картинки. Выводится до момента загрузки изображения, а также вместо картинки, если они не поддерживаются. Его отсутствие считается считается технической ошибкой верстки, но тег img работать будет.
Синтаксис: |
border |
Устаревшее значение. Выводит рамку вокруг картинки, значение задается в пикселях. |
crossorigin |
Значения: anonymous | use-credentials
Применяется, когда нужно подгрузить изображение с чужого сайта для использования его в элементе |
height |
Высота картинки: в пикселях или %. |
hspace |
Устарело – количество пустого места, которое нужно вставить слева и справа от объекта: в пикселях. |
ismap |
Указывает, что картинка является частью карты (изображение-карта содержит интерактивные области). При нажатии на картинку на сервер передаются данные в виде параметра адресной строки. |
longdesc |
Устарело – указывает URL-адрес длинного описания картинки. |
src |
Адрес изображения (или путь к нему). По большому счету является единственным обязательным атрибутом, без него непонятно, что нужно вывести. |
sizes |
Устанавливает разные размеры изображения для разных размеров экрана устройства, на котором просматривается страница. В параметрах указывается медиазапрос (в скобках указывается ширина экрана устройства) и ширина картинки для данного медиазапроса. Через запятую может быть указано несколько значений.
Пример записи:
Работает только вместе с атрибутом |
srcset |
Позволяют задать разные источники изображения, которые нужно выводить при разных размерах экрана. Список может состоять из нескольких параметров, каждый на отдельной строке. В каждой строке можно указать: 1. адрес изображения, 2. дескриптор ширины (положительное целое число), за которым сразу следует w (необязательно), 3. дескриптор плотности пикселей (положительное целое число, за которым следует х ).
|
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 – предназначен в первую очередь для значков, в том числе фавикона сайта. В настоящий момент устарел, но еще встречается на многих сайтах.