Изображения

💡 Объяснение

Как картинка попадает на страницу

Картинка не хранится внутри HTML-файла. HTML лишь говорит браузеру: «Возьми файл вот отсюда и покажи здесь». Поэтому картинка — это отдельный файл, который лежит рядом со страницей, обычно в папке images.

Тег <img>

<img src="images/cat.jpg" alt="Рыжий кот спит на подоконнике">

<img> (image — изображение) — одиночный тег: закрывать его не нужно, всё нужное передаётся атрибутами.

• src (source — источник) — путь к файлу картинки. Без него картинки не будет.
• alt (alternative — замена) — текстовое описание картинки.

Пути к файлам

Путь в src — это «маршрут» от страницы до картинки:

• cat.jpg — файл лежит в той же папке, что и страница;
• images/cat.jpg — зайти в папку images и взять там файл;
• ../cat.jpg — подняться на одну папку вверх;
• https://site.ru/cat.jpg — картинка с другого сайта (так лучше не делать: сайт может удалить картинку).

Путь должен совпадать с именем файла буква в букву, включая расширение: cat.JPG и cat.jpg — для сервера разные файлы.

На нашем сайте для тренировки есть картинки: /images/cat.svg, /images/dog.svg, /images/rocket.svg, /images/mountain.svg.

Форматы картинок

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

Зачем нужен alt

Атрибут alt обязателен, и вот почему:

• Незрячие люди пользуются программами, которые читают страницу вслух. Вместо картинки программа прочитает alt.
• Если картинка не загрузилась (медленный интернет, ошибка в пути), на её месте появится текст из alt.
• Поисковики по alt понимают, что изображено на картинке.

Хороший alt описывает суть картинки коротко, как если бы ты рассказывал её другу по телефону: не alt="картинка" и не alt="IMG_2034", а alt="Рыжий кот спит на подоконнике". Писать «изображение…» не нужно — и так понятно, что это картинка.

Размеры

Атрибуты width (ширина) и height (высота) задают размер в пикселях: width="200". Достаточно указать один размер — второй браузер подберёт сам, сохранив пропорции. Если указать оба «наугад», картинка растянется или сплющится.

Позже мы научимся задавать размеры через CSS — так гибче и удобнее.

Картинка с подписью: figure и figcaption

<figure>
  <img src="images/cat.jpg" alt="Рыжий кот спит">
  <figcaption>Мой кот Барсик</figcaption>
</figure>

<figure> объединяет картинку и подпись в одно целое, а <figcaption> — это сама подпись. Разница с alt: подпись видят все, а alt — это замена картинки.

Авторское право

Картинка из поиска — не «ничья». У каждого изображения есть автор. Для своего сайта бери:

• свои фотографии и рисунки;
• картинки с бесплатных фотостоков (например, Unsplash, Pixabay) — там указано, что их можно использовать;
• изображения с лицензией Creative Commons — и указывай автора.

Частые ошибки

• Опечатка в пути или имени файла — вместо картинки значок «сломанного» изображения.
• Путь с обратной косой чертой images\cat.jpg — в вебе пишем только /.
• Пустой или бессмысленный alt.
• Огромная фотография 5000 пикселей, уменьшенная через width — страница грузится очень долго.

Проверь себя

1. Почему у <img> нет закрывающего тега?
2. Кто и когда «видит» текст из alt?
3. Чем alt отличается от figcaption?