Изображения в HTML и CSS: что важно понять сразу

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

Что нужно иметь до начала

• Текстовый редактор — подойдёт любой: VS Code, Sublime, даже Блокнот.
• HTML-файл, который открывается в браузере. Если его нет — создайте index.html с минимальной разметкой.
• Хотя бы одно изображение в папке рядом с этим файлом. Форматы, которые понимают все браузеры: JPEG (.jpg), PNG, WebP. Для иконок и логотипов — SVG.

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

Шаг 1. Вставить картинку тегом img

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

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

Откройте файл в браузере. Картинка должна появиться в своём натуральном размере. Если вместо неё — иконка сломанного изображения и текст из alt, значит путь в src неверный. Проверьте имя файла с точностью до регистра букв: на многих серверах Cat.jpg и cat.jpg — разные файлы.

Почему alt — не для галочки

Атрибут alt читают программы экранного доступа для незрячих пользователей и поисковые роботы. Он же показывается, когда картинка не загрузилась. Описывайте содержимое, а не пишите «картинка» или «изображение кота» — слово «изображение» здесь лишнее. Если картинка чисто декоративная (разделитель, фон), оставьте атрибут пустым: alt="". Именно пустым, а не отсутствующим — так экранный диктор её пропустит.

Шаг 2. Задать размеры и не сломать пропорции

Первое, обо что спотыкаются: если задать ширину и высоту в CSS независимо, картинка растянется или сожмётся.

img {
  width: 300px;
  height: 200px; /* если пропорции файла не 3:2 — картинка исказится */
}

Чтобы этого не было, задавайте только один размер, а второй ставьте в auto:

img {
  width: 300px;
  height: auto; /* высота подстроится под пропорции */
}

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

Атрибуты width и height в HTML — тоже нужны

Отдельно от CSS пропишите в самом теге исходные размеры картинки в пикселях:

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

Это не задаёт финальный размер на странице (им управляет CSS), а сообщает браузеру пропорции заранее. Браузер резервирует место под картинку до её загрузки, и страница не «прыгает», когда изображение подгрузилось. Значения ставьте равными реальным размерам файла в пикселях.

Шаг 3. Вписать картинку в контейнер через object-fit

Задача, которая возникает сразу: есть блок фиксированного размера — карточка товара, аватар, обложка — и туда нужно поместить картинку любых пропорций так, чтобы она заполнила блок без искажений. Растягивание тут даст сплющенные лица.

Решает это свойство object-fit. Оно говорит, как содержимое картинки вести себя внутри заданной рамки.

img {
  width: 300px;
  height: 300px;
  object-fit: cover; /* заполнит квадрат, лишнее обрежется по краям */
}

Проверка: возьмите горизонтальную картинку, задайте квадратные размеры. С cover она заполнит квадрат целиком, обрезав бока, без искажений пропорций.

Основные значения:

• cover — заполняет весь блок, обрезая то, что не влезло. Для обложек и аватаров.
• contain — вписывает картинку целиком, оставляя пустые поля. Для логотипов и когда важно видеть всё изображение.
• fill — растягивает под блок, искажая пропорции. Значение по умолчанию, обычно нежелательное.

Запомните пару правил: пропорции хранит height: auto при заданной ширине, а вписать картинку в жёсткую рамку без искажений умеет object-fit: cover. Этих двух знаний хватает на девять задач из десяти.

Шаг 4. Сделать картинку адаптивной

На телефоне блок в 300px может оказаться шире экрана, и появится горизонтальная прокрутка. Базовое правило, которое стоит задать всем картинкам сразу:

img {
  max-width: 100%; /* не шире родителя */
  height: auto;    /* высота по пропорциям */
}

Теперь картинка никогда не вылезет за пределы своего контейнера и сама уменьшится на узком экране. Проверка: сузьте окно браузера мышкой — картинка должна ужиматься вместе с окном, а не уезжать за край.

Разные картинки под разные экраны

Грузить фотографию 4000px на смартфон — трата трафика. Тег <img> умеет отдавать разные файлы через атрибуты srcset и sizes:

<img
  src="cat-800.jpg"
  srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Рыжий кот на подоконнике">

Браузер сам выбирает подходящий файл по ширине экрана и плотности пикселей. Атрибут src остаётся как запасной для старых браузеров. Числа с w — реальная ширина каждого файла в пикселях, её нужно указывать честно. Готовить придётся несколько версий картинки заранее.

Шаг 5. Отложить загрузку картинок ниже экрана

Изображения, которые лежат далеко внизу страницы, можно не грузить, пока пользователь до них не долистал. Один атрибут:

<img src="cat.jpg" alt="Рыжий кот" loading="lazy">

Ставьте loading="lazy" всем картинкам, кроме той, что видна сразу при открытии страницы. Первой картинке ленивую загрузку не давайте — она нужна немедленно, и задержка навредит скорости отрисовки.

Форматы: что когда выбирать

WebP поддерживают все актуальные браузеры и весит он обычно на 25–35% меньше JPEG того же качества. SVG — векторный: масштабируется без потери резкости на любом экране, поэтому иконки и логотипы лучше делать в нём.

Если не получилось

• Иконка сломанного изображения и текст alt. Неверный путь в src. Проверьте имя файла, регистр букв и расположение относительно HTML-файла.
• Картинка искажена, сплющена или растянута. Заданы и width, и height с несоответствующими пропорциями. Оставьте один размер, второй — в auto, либо добавьте object-fit: cover.
• Появилась горизонтальная прокрутка на телефоне. У картинки нет max-width: 100%. Добавьте это правило.
• Под картинкой предательский зазор в несколько пикселей. Изображения — строчные элементы, браузер оставляет место под «хвостики» букв. Лечится img { display: block; }.
• Картинка мутная на экранах с высокой плотностью пикселей. Файл меньше, чем блок, в который его растянули. Используйте изображение большего разрешения или srcset.

Что делать дальше

Когда базовая вставка работает, посмотрите в сторону тега <picture> — он умеет отдавать WebP с запасным JPEG для старых браузеров и менять картинку по ширине экрана целиком, а не только разрешение. Для проверки скорости загрузки прогоните страницу через PageSpeed Insights и посмотрите на показатель CLS (сдвиг макета) — если картинки без указанных размеров, он будет высоким. Следующий крупный шаг — научиться сжимать изображения перед загрузкой на сайт, потому что даже правильная разметка не спасёт от фотографии на 8 МБ.