Картинка на странице - это не файл, вставленный «внутрь» HTML, а тег <img>, который говорит браузеру: загрузи файл по такому-то адресу и покажи его здесь. У тега нет пары - закрывающий </img> не нужен и не пишется. Разберём три вещи, без которых картинка на странице работает не так, как должна.
В этом уроке
Попробуй убрать width и height или поменять текст в alt - результат справа обновится сам.
Тег img и атрибут src
<img> - тег без содержимого и без закрывающей пары: вся информация о картинке задаётся через атрибуты, а не через текст внутри тега. Обязательный атрибут src указывает адрес файла - по тем же правилам абсолютных и относительных ссылок, что и у <a href>.
<img src="/images/koshka.jpg" alt="Рыжая кошка спит на подоконнике"> - тег закрывать не нужно, у него нет пары.
<img src="/images/koshka.jpg" alt="Рыжая кошка спит на подоконнике"></img> - закрывающий тег здесь лишний, у img его не бывает.
Атрибут alt
Атрибут alt - текстовое описание картинки на случай, если её не видно: файл не загрузился, ссылка сломалась, или человек пользуется программой чтения с экрана вместо глаз. Для декоративной картинки, которая не несёт смысла (просто узор или разделитель), alt всё равно нужен - но пустой: alt="". Это явно говорит программам, что картинку можно пропустить, а не просто забыли подписать.
<img src="/images/koshka.jpg" alt="Рыжая кошка спит на подоконнике"> - по alt понятно, что на картинке, даже если она не загрузится.
<img src="/images/koshka.jpg"> - alt пропущен вовсе: если картинка не загрузится, не останется даже текстового описания.
Атрибуты width и height
Атрибуты width и height сообщают браузеру размеры картинки заранее, ещё до того, как файл загрузится. Зная соотношение сторон, браузер сразу резервирует под картинку нужное место на странице. Без этих атрибутов место резервируется только после загрузки файла - а до этого момента блок под картинку «нулевой», и когда картинка наконец появляется, весь текст под ней резко сдвигается вниз.
<img src="/images/koshka.jpg" alt="Рыжая кошка спит на подоконнике" width="640" height="360"> - место под картинку зарезервировано заранее, текст ниже не дёрнется.
<img src="/images/koshka.jpg" alt="Рыжая кошка спит на подоконнике"> - без размеров текст под картинкой прыгнет вниз в момент её загрузки.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Дописывать закрывающий тег </img> | Лишняя разметка - у img нет пары, закрывать нечего | Оставлять img одиночным тегом: <img src="..." alt="..."> |
| Пропускать alt у декоративной картинки, потому что «она не важна» | Программа чтения с экрана не может отличить «забыли подписать» от «специально пропустили» | Указывать пустой alt="" явно - это и значит «можно пропустить» |
| Не указывать width и height, полагаясь только на CSS | До загрузки файла место под картинку не зарезервировано - текст ниже сдвигается, когда картинка появляется | Указывать width и height в самом теге, а адаптивность задавать отдельно через CSS |
| Писать в alt название файла вместо описания | Название вроде IMG_4821.jpg ничего не говорит о содержимом картинки | Описывать словами, что изображено, а не имя файла |
Шпаргалка
| Термин | Значение |
|---|---|
| img | Тег для показа картинки - без содержимого и без закрывающей пары |
| src | Обязательный атрибут - адрес файла картинки |
| alt | Текстовое описание картинки; для декоративной - пустое alt="" |
| width / height | Размеры картинки - резервируют место на странице заранее |
Коротко: отвечаем на вопросы
Нужен ли alt, если картинка чисто декоративная и не несёт смысла?
Да, атрибут alt всё равно нужен, но со значением пустой строки: alt="". Это явно сообщает программам вроде экранных дикторов, что картинку можно пропустить, а не просто забыли подписать - совсем без alt так понять нельзя.
Что покажется вместо картинки, если файл не загрузится?
Браузер покажет текст из атрибута alt на месте картинки - это одна из причин, по которой alt называют текстовой альтернативой: он появляется и когда изображение не может загрузиться (ошибка сети, битая ссылка), и когда его вообще не видно человеку.
Зачем указывать width и height у картинки, если размер можно задать через CSS?
Размеры в самом теге позволяют браузеру заранее посчитать соотношение сторон и зарезервировать под картинку место ещё до того, как файл загрузится. Без этого браузер не знает высоту блока заранее, и когда картинка наконец появляется, весь текст ниже резко сдвигается - это называют «прыжками» вёрстки.
