Изображения делают страницу наглядной. В HTML для этого используется тег <img>. Это одиночный тег, он не требует закрытия.

1. Простое изображение — атрибуты src и alt

src (source) — указывает путь к файлу изображения. alt (alternative text) — текст, который покажется, если изображение не загрузилось, и для экранных дикторов.

<img src="/images/logo.svg" alt="Логотип DevSkillRoad">

Как это выглядит в браузере:

2. Размеры изображения — width и height

Атрибуты width и height задают размер в пикселях. Браузер зарезервирует место под картинку ещё до её загрузки — страница не будет «прыгать».

<img src="/images/logo.svg" alt="Логотип" width="50" height="50">

Как это выглядит в браузере:

3. Популярные форматы изображений

• JPEG (jpg) — для фотографий и сложных картинок. Поддерживает сжатие, размер файла небольшой.
• PNG — для логотипов, иконок, изображений с прозрачностью. Качество лучше, но файл тяжелее.
• SVG — векторный формат для иконок и логотипов. Масштабируется без потери качества.
• WebP — современный формат от Google, лучше сжимает, чем JPEG и PNG.

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

Тег <img> можно обернуть в ссылку — тогда изображение станет кликабельным.

<a href="/index.html">
    <img src="/images/logo.svg" alt="На главную" width="50">
</a>

Как это выглядит в браузере:

5. Изображение с подписью — <figure> и <figcaption>

Тег <figure> группирует изображение и подпись. <figcaption> добавляет пояснительный текст.

<figure>
    <img src="/images/logo.svg" alt="Логотип" width="80">
    <figcaption>Логотип DevSkillRoad</figcaption>
</figure>

Как это выглядит в браузере:

6. Что нельзя делать с изображениями

• Пропускать атрибут alt.
• Ставить картинку без необходимости — например, вместо текста.
• Забывать про лицензии: нельзя просто взять любую картинку из интернета.
• Использовать огромные изображения без указания размеров — страница будет тормозить.