Изображения

Добавляем на страницу картинки и узнаём, почему атрибут alt так важен.

Изображение вставляет одиночный тег <img>: src — путь к файлу, alt — текстовое описание.

Простейшая картинка

Тег <img> — одиночный, закрывать его не нужно. Минимум два атрибута:

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

• src (source) — путь к файлу изображения;
• alt (alternative) — текстовое описание картинки.

Зачем нужен alt

alt кажется необязательным, но он критически важен:

• Доступность. Программа чтения с экрана зачитает alt незрячему пользователю — иначе он не узнает, что на картинке.
• Если картинка не загрузилась (битый путь, медленный интернет), браузер покажет текст alt вместо неё.
• SEO. Поисковики читают alt, чтобы понять содержимое изображения.

Описывайте суть, а не пишите «картинка»: alt="График роста продаж за 2024 год" полезнее, чем alt="изображение".

Размеры — width и height

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

<img src="logo.png" alt="Логотип компании" width="200" height="80">

Если указать только один из размеров, второй браузер подберёт пропорционально, и картинка не исказится.

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

Когда alt оставляют пустым

Есть тонкость. Если картинка чисто декоративная и не несёт смысла (например, узорчатый разделитель), то правильнее оставить пустой alt — alt="", а не выдумывать описание. Тогда программа чтения с экрана просто пропустит картинку и не будет отвлекать пользователя бессмысленным «изображение, изображение». Важно: пустой alt писать всё равно нужно — это осознанный сигнал «здесь описания не требуется», а не забывчивость.

Берегите вес страницы

Картинки — самая «тяжёлая» часть большинства сайтов. Фотография с телефона может весить несколько мегабайт, и если вставить её как есть, страница будет грузиться мучительно долго, особенно на мобильном интернете. Поэтому перед загрузкой изображения уменьшают до нужного размера и сжимают. Помните: атрибут width лишь отображает картинку меньше, но не уменьшает вес файла — браузер всё равно скачает оригинал целиком. Уменьшать нужно сам файл, заранее.

Итог

• <img> — одиночный тег; src — путь к файлу, alt — описание.
• alt обязателен: он нужен для доступности, при сбое загрузки и для SEO.
• width и height резервируют место под картинку и предотвращают «прыжки» страницы.