Картинки

Зачем это нужно

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

Тег <img>

<img> — одиночный тег (закрывающего нет). Всё задаётся атрибутами:

<img src="logo.png" alt="Логотип CodeWithMe">

• src (source, источник) — адрес картинки;
• alt (alternative) — текстовое описание.

Результат: картинка logo.png. Если файла нет — вместо неё значок «сломанной» картинки и текст «Логотип CodeWithMe».

Откуда берётся картинка

src работает так же, как href у ссылок:

<img src="cat.jpg" alt="Кот">                  <!-- файл рядом со страницей -->
<img src="images/dog.png" alt="Пёс">           <!-- в папке images -->
<img src="https://example.com/a.png" alt="…">  <!-- с другого сайта -->

Форматы: .jpg — фотографии, .png — картинки с прозрачностью, .svg — значки и логотипы (не теряют качество при увеличении), .webp — современный формат, весит меньше.

В редакторе справа файлов cat.jpg нет, поэтому увидишь значок сломанной картинки и текст из alt. Это нормально — проверка смотрит на атрибуты.

Зачем нужен alt

alt — не формальность:

• незрячие люди слушают страницы через программу чтения с экрана — она читает alt вслух;
• если картинка не загрузилась (медленный интернет), виден текст alt;
• поисковики по alt понимают, что на картинке.

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

Размеры

Атрибуты width и height задают размер в пикселях:

<img src="cat.jpg" alt="Кот" width="200">

Результат: картинка шириной 200 пикселей; высота подстроится сама, пропорции сохранятся.

Если задать обе стороны с другими пропорциями, картинка растянется. Обычно указывают обе — настоящие размеры файла: тогда браузер заранее оставит под картинку место, и текст не будет «прыгать» при загрузке. А отображаемый размер меняют в CSS.

Подпись: <figure> и <figcaption>

Картинку с подписью оборачивают в <figure>, а подпись пишут в <figcaption>:

<figure>
  <img src="chart.png" alt="Рост продаж за год" width="400">
  <figcaption>Рис. 1. Продажи выросли вдвое</figcaption>
</figure>

Результат: картинка с отступом, под ней — строка подписи.

Картинка-ссылка

Ссылка может обернуть картинку — так делают логотип, который ведёт на главную, или превью, открывающее большое фото:

<a href="/">
  <img src="logo.svg" alt="На главную" width="120">
</a>

Результат: кликабельный логотип. Здесь alt описывает, куда ведёт ссылка.

Как это работает внутри

<img> — строчный элемент: он стоит в строке, как большая буква. Поэтому две картинки подряд окажутся рядом, а не друг под другом. Пока картинка грузится, браузер уже рисует остальную страницу. Если размеры не указаны, он узнаёт их только после загрузки — и текст сдвигается.

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

1. Нет alt. Страница становится недоступной для незрячих. Всегда пиши alt.
2. Закрывающий </img>. Его не бывает — <img> одиночный.
3. Обратные слэши в пути. src="images\cat.jpg" (как в Windows) — неверно. В вебе только /.
4. Регистр имени файла. Cat.JPG и cat.jpg на сервере — разные файлы. Пиши имена маленькими буквами.
5. Огромное фото ради маленькой картинки. Файл в 5 МБ с width="100" всё равно скачается целиком. Уменьшай файл заранее.

Шпаргалка

Код	Что делает
<img src="…" alt="…">	картинка с описанием
width="200" / height="100"	размеры в пикселях
alt=""	декоративная картинка
<figure> + <figcaption>	картинка с подписью
<a href="…"><img …></a>	картинка-ссылка