Изображения в HTML и CSS: адаптивный размер, object-fit и фон

Сначала определите роль изображения. Если оно передаёт информацию, используйте <img> или <picture> в HTML и добавьте подходящий alt. Если это орнамент, текстура или необязательный фон, изображение можно подключить через CSS.

Это решение важнее конкретного свойства: CSS-фон не имеет альтернативного текста и может не загрузиться или не печататься.

Базовое адаптивное изображение

<img  class="article-image"  src="/assets/img/content/devtools.webp"  alt="Панель Elements с выделенным элементом main"  width="1200"  height="675"  loading="lazy"  decoding="async">​

.article-image {  display: block;  max-inline-size: 100%;  block-size: auto;}​

max-inline-size: 100% не даёт изображению выйти за контейнер, а block-size: auto сохраняет пропорции. Атрибуты width и height сообщают браузеру соотношение сторон до загрузки и уменьшают сдвиг содержимого.

loading="lazy" полезен для изображений ниже первого экрана. Главную hero-картинку, которая влияет на Largest Contentful Paint, обычно не стоит загружать лениво.

object-fit для карточек

Карточкам часто нужна одинаковая медиазона при разных исходных пропорциях:

<article class="card">  <img    class="card__image"    src="/assets/img/content/css-grid.webp"    alt="Сетка из трёх колонок в браузере"    width="800"    height="450"  >  <h2 class="card__title">Основы CSS Grid</h2></article>​

.card__image {  display: block;  inline-size: 100%;  aspect-ratio: 16 / 9;  object-fit: cover;  object-position: center;}​

cover заполняет область и обрезает края. Для схемы, скриншота или товара обрезка может уничтожить смысл — тогда используйте contain и задайте подходящий фон:

.product-card__image {  inline-size: 100%;  aspect-ratio: 4 / 3;  object-fit: contain;  background-color: #f2f4f7;}​

Точка обрезки

object-position смещает видимую область:

.portrait {  object-fit: cover;  object-position: 50% 20%;}​

Это помогает сохранить лицо или важный объект, но одна координата не подходит всем файлам. Для управляемой медиатеки фокусную точку лучше хранить как метаданные конкретного изображения.

Разные ресурсы через <picture>

Для современных форматов и art direction используйте HTML:

<picture>  <source media="(min-width: 60rem)" srcset="hero-wide.avif" type="image/avif">  <source srcset="hero.avif" type="image/avif">  <source srcset="hero.webp" type="image/webp">  <img    src="hero.jpg"    alt="Разработчик проверяет адаптивную страницу"    width="1200"    height="800"  ></picture>​

alt указывается на единственном <img>, который также служит fallback. Не меняйте изображение через CSS media query, если браузеру нужно выбрать оптимальный файл для содержательного изображения.

Плотность и ширина через srcset

<img  src="article-800.webp"  srcset="article-480.webp 480w, article-800.webp 800w, article-1200.webp 1200w"  sizes="(min-width: 64rem) 48rem, calc(100vw - 2rem)"  alt="Пример адаптивной сетки"  width="1200"  height="675">​

srcset описывает доступные файлы, а sizes — ожидаемую отображаемую ширину. Браузер учитывает плотность пикселей и выбирает ресурс. Неверный sizes может заставить скачать слишком большое изображение.

Декоративный фон

.hero {  min-block-size: 24rem;  padding: clamp(1.5rem, 5vw, 4rem);  color: #ffffff;  background:    linear-gradient(90deg, rgb(16 24 40 / 92%), rgb(16 24 40 / 35%)),    url('/assets/img/decorative/hero.webp') center / cover no-repeat,    #101828;}​

Последний цвет — fallback. Градиент отделяет текст от картинки. Если фон не загрузится, текст всё ещё должен быть виден.

Для разных плотностей у CSS-фона существует image-set():

.texture {  background-image: image-set(    url('/assets/img/noise.webp') 1x,    url('/assets/img/noise@2x.webp') 2x  );}​

Используйте это для декора, а не как замену srcset у содержательного изображения.

Маски, фильтры и прозрачность

filter и opacity применяются ко всему отрисованному изображению:

.logo--muted {  filter: grayscale(1);  opacity: 0.7;}​

Проверьте контраст и не полагайтесь на цвет изображения для передачи статуса. Если нужно затемнить только фон под текстом, используйте отдельный градиентный слой, а не opacity у общего контейнера.

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

• важная картинка подключена как CSS-фон без alt;
• у <img> нет размеров, и страница прыгает после загрузки;
• width: 100% растягивает маленький файл выше естественного размера;
• object-fit: cover обрезает текст на скриншоте;
• hero загружается лениво;
• для всех устройств скачивается огромный исходник;
• изображение содержит текст, который невозможно масштабировать или перевести.

Что запомнить

Содержательные изображения размещайте в HTML, декоративные — в CSS. Задавайте размеры и адаптивные ограничения, используйте object-fit осознанно и проверяйте обрезку на реальных файлах. Для производительности готовьте несколько размеров и не загружайте лениво ключевое изображение первого экрана.

report Сообщить об ошибке в статье