Изображения в HTML

Закладки перемещают вас по тексту. Изображения выводят на страницу фото, схемы и логотипы. Базовый инструмент HTML — пустой элемент img: в обычном использовании он не оборачивает подпись между открывающим и закрывающим тегами. Он указывает на файл через src и даёт текстовую альтернативу через alt.

Что делает img

img — replaced-элемент. Браузер загружает ресурс по src и рисует его в макете. Если файл отсутствует или заблокирован, посетителям всё равно нужен полезный alt (или, для чистого декора, явно пустой alt=""). Пути подчиняются тем же относительным и абсолютным правилам, что уже знакомы по ссылкам и favicon.

Прямой ответ

Пишите <img src="path/to/file.jpg" alt="short description">.

• src — где лежит файл изображения
• alt — текстовая альтернатива, когда изображение не видно или не загрузилось
  Необязательные width и height могут зарезервировать место и уменьшить скачки макета. Лучше сжимать слишком большие фото, чем отдавать многомегабайтные файлы каждому ученику на медленном соединении.

Основные атрибуты кратко

Базовое информативное изображение

Кладите картинки в понятную папку вроде images/ и описывайте в alt то, что важно.

Читаем базовый пример

• src="images/team.jpg" — относительный путь от HTML-файла
• alt объясняет смысл фото для скринридеров и при сбое загрузки
• В обычном HTML нет отдельного закрывающего </img> — атрибуты живут на одном теге
• Если папка или имя файла неверны, картинка ломается, даже когда тег выглядит идеально

Подсказки width и height

Указание width и height помогает браузеру зарезервировать место до прихода байтов. По возможности сохраняйте соотношение сторон реального файла, чтобы картинка не выглядела растянутой. Уменьшение огромного фото только HTML-атрибутами всё равно скачивает огромный файл — изменяйте размер и сжимайте ресурсы для веба.

Декоративные изображения и пустой alt

Когда изображение ничего не сообщает — чистое украшение, уже покрытое соседним текстом — используйте alt="". Не опускайте атрибут. Опустить alt и написать пустой alt="" — разное: пустой значит «игнорируй меня в дереве доступности», отсутствие часто значит «в разметке что-то пошло не так».

Пишите alt ради смысла, не ради спама

Хороший alt — короткая замена изображению в контексте: то, что зрячему пользователю нужно, чтобы понять страницу. Плохой alt набивает ключевые слова, повторяет подпись уже напечатанную рядом или говорит «image» без содержания. Если это диаграмма — кратко передайте вывод; если логотип ещё и ссылка на главную — доступное имя ссылки обычно берётся из alt изображения или окружающего текста — будьте честны.

Форматы файлов, которые встречают новички

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

Практика в редакторе

1. Положите небольшой .jpg или .png в папку images.
2. Добавьте img с верным относительным src и ясным alt.
3. Добавьте width и height, совпадающие с соотношением сторон.
4. Один раз намеренно сломайте путь — убедитесь, что alt (или UI битой картинки) помогает заметить ошибку, затем исправьте путь.
5. Добавьте одно декоративное изображение с alt="" и убедитесь, что атрибут не удалён целиком.

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

• Нет alt у информативных изображений
• Неверная папка или опечатка в src
• Отправка многомегабайтного камерного фото, когда хватило бы меньшего веб-файла
• Использование alt как свалки ключевых слов
• Растягивание логотипов несовпадающими width/height
• Путаница src (изображения) с href (ссылки)

Итог

• Изображения используют img с src и alt
• Пути подчиняются тем же правилам, что и другие файлы сайта
• alt поддерживает доступность и сбои загрузки; alt="" только для чистого декора
• Width и height могут резервировать место; реальный размер файла всё равно оптимизируйте
• Выбирайте разумный формат и держите загрузки лёгкими