#8. Изображения: тег img, атрибуты src, alt, width/height, форматы

Изображения делают страницу живой. За них отвечает одиночный тег <img> — как <br> и <hr> из урока #5, закрывающего у него нет. Обязательных атрибута два: src и alt.

src — путь к файлу

Атрибут src (source) указывает, где лежит картинка. Пути работают по тем же правилам, что и href из урока #7: относительные — внутри своего сайта, абсолютные — на чужие файлы. Пусть рядом со страницей лежит папка images:

mysite/
    index.html
    images/
        cat.jpg

Тогда вставить картинку можно так:

<img src="images/cat.jpg" alt="Рыжий кот">

На странице это выглядит так: — здесь путь абсолютный, картинка лежит на этом же сайте.

alt — описание картинки

alt — короткое текстовое описание изображения. Оно показывается, если картинка не загрузилась (например, путь неверный), читается вслух программами для незрячих и помогает поисковым системам понять, что изображено. Поэтому alt нужен каждому <img>.

width и height — размеры

Атрибуты width (ширина) и height (высота) задают размер в пикселях — просто число, без единиц измерения:

<img src="images/cat.jpg" alt="Рыжий кот" width="600" height="400">

Указывать размеры — хорошая привычка: браузер заранее резервирует место, и страница не «прыгает» во время загрузки картинок. Важно соблюдать реальные пропорции, иначе изображение растянется или сожмётся.

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

• JPEG — фотографии: миллионы цветов и небольшой размер файла.
• PNG — когда нужна прозрачность: иконки, скриншоты, логотипы.
• GIF — анимированные картинки.
• WebP — современный формат: как JPEG, но весит ещё меньше.
• SVG — векторная графика: масштабируется без потери качества, подходит для иконок и схем.

Простое правило: фотографии — JPEG или WebP; графика с прозрачностью и резкими краями — PNG или SVG; анимация — GIF.

Практика

Создайте рядом со своей страницей папку images, положите в неё любую картинку и вставьте её на страницу с alt и размерами.
Затем намеренно укажите неверный путь (src="images/net-takogo-fayla.jpg") и посмотрите, как вместо картинки отобразится текст из alt.