Работа с изображениями в HTML
Изображения – важная часть веб-страниц. Они делают контент более наглядным и удобным для восприятия. В HTML для вставки изображений используется тег <img>. Он является одиночным и не требует закрывающего тега.
К обязательным атрибутам тега <img> относятся:
src(от англ. source, источник) — путь к изображению,alt(от англ. alternative, альтернатива) — текст, который отображается, если изображение не загрузилось.
<img
src="путь_к_изображению"
alt="Отображается, если изображение не загрузилось"
/>Как указать путь к картинке
Для того чтобы правильно указать путь:
- к локальному изображению, нужно указать путь к изображению относительно вашего файла с HTML кодом,
- к внешнему изображению, нужно указать ссылку на это изображение.
Локальный путь к картинке
Рассмотрим ситуацию, когда у нас есть учебный проект, в котором мы работаем с локальными изображениями. Допустим, мы создали папку first-project, в которой находятся:
- файл
index.html, - папка
images, содержащая изображениеpicture.jpg
Структура проекта выглядит следующим образом:
first-project
├─── images
│ └─── picture.jpg
└─── index.htmlЧтобы указать путь к нашей картинке picture.jpg, нужно в index.html указать следующий путь:
<img src="images/picture.jpg" alt="" />Обратите внимание, что перед images/picture.jpg нет слэша /. Это связано с тем, что папка images находится на одном уровне с файлом index.html, и путь указывается относительно его местоположения. Если бы index.html находился внутри другой папки, путь к изображению нужно было бы корректировать в зависимости от структуры директорий.
Например, если index.html находился бы в папке layouts, то путь к изображению picture.jpg выглядел бы следующим образом:
<img src="../images/picture.jpg" alt="" />Где ../ используется для того, что вернуться на один уровень выше.
first-project
├─── images
│ └─── picture.jpg
├─── layouts
│ └─── index.htmlВнешний путь к картинке
Если изображение размещено на другом веб-сайте или в облачном хранилище, можно указать абсолютный URL-адрес:
<img src="https://your-site.com/images/picture.jpg" alt="" />При использовании внешних ссылок следует учитывать:
- скорость загрузки – изображения, размещённые на сторонних серверах, могут загружаться дольше
- и политику CORS – некоторые серверы блокируют доступ к изображениям с других сайтов.
Форматы изображений
При выборе формата изображения важно учитывать его назначение и качество. Основные форматы:
- JPEG – подходит для фотографий, хорошо сжимает, но без прозрачности,
- PNG – поддерживает прозрачность, лучше для логотипов и графики,
- GIF – используется для анимаций,
- WebP и AVIF – современные форматы с хорошим сжатием и поддержкой прозрачности, максимально быстро загружаются на странице по сравнению с другими форматами,
- SVG – векторный формат, идеален для иконок и логотипов.
Адаптивное изображение
Адаптивное изображение — это изображение, которое автоматически подстраивается под ширину экрана.
Чтобы из обычного изображения с заданными шириной и высотой сделать адаптивное, нужно добавить следующие свойства:
img {
width: 100%;
height: auto;
}Добавление подписи к картинке
Чтобы добавить подпись к изображению, можно использовать элемент <figure> в сочетании с <figcaption>:
<figure>
<img src="images/picture.jpg" alt="Описание изображения" />
<figcaption>Это подпись к изображению</figcaption>
</figure><figure>используется для группировки изображения и его подписи,<figcaption>содержит подпись к изображению.
Ниже можете увидеть пример изображения с подписью, который можно редактировать и запускать в реальном времени.
Такой подход помогает улучшить читаемость кода и делает его более понятным для поисковых систем и вспомогательных технологий за счет семантически правильной разметки.
Картинка внутри карточки
В карточках на сайте внизу или справа от изображения иногда появляется белая полоса. Происходит это когда изображение обернуто в ссылку.
Решается данная ситуация назначением overflow: hidden ссылке и display: block самому изображению. Это также поможет скруглить края изображения, при условии что border-radius задан родительскому контейнеру - ссылке.
a {
overflow: hidden;
}
a > img {
display: block;
}Ниже представлен пример изображения в карточке: слева — вариант с применённым решением, справа — без каких-либо дополнительных стилей.
Использование <picture> и srcset
Тег <picture> позволяет загружать разные изображения в зависимости от устройства:
<picture>
<source srcset="image-mobile.jpg" media="(max-width: 768px)" />
<source srcset="image-desktop.jpg" media="(min-width: 1280px)" />
<img src="image-default.jpg" alt="" />
</picture>В примере выше по умолчанию используется изображение image-default.jpg. На мобильных устройствах (<768px) используется image-mobile.jpg, а на компьютерах (>1280px) — image-desktop.jpg.
Также можно использовать srcset прямо в <img>, чтобы браузер выбирал подходящее изображение:
<img
src="image-default.jpg"
srcset="image-small.jpg 600w, image-large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Описание изображения"
/>srcsetсодержит список изображений с их шириной (600w и 1200w).sizesуказывает, какую ширину использовать в зависимости от экрана.
Оптимизация изображений
Чтобы ускорить загрузку страницы, важно оптимизировать изображения:
- Используйте сжатие (например, TinyPNG).
- Загружайте изображения в современных форматах (WebP, AVIF).
- Используйте атрибут
loading="lazy", чтобы загружать изображения только при прокрутке к ним.
<img src="путь_к_изображению" alt="" loading="lazy" />Перечисленные способы существенно ускорят загрузку страницы.
Опубликовано: 17 февр. 2025 г.