Когда выбирать , а когда CSS background-image?

## Разберёмся ` `/` ` — **контентные** изображения; `background-image` — **декоративные**. ## Trade-offs | | ` ` / ` ` | `background-image` | |---|---|---| | Семантика / SEO / a11y | есть `alt`, в потоке контента | нет «картинки» для AT по умолчанию | | Адаптив | `srcset`, `sources`, media | media-queries, `image-set` | | object-fit / ленивая загрузка | нативно удобнее | контроль через background-* | | Сложный art direction | сильная сторона ` ` | тяжелее | ```html ``` ```css .hero { background: url("pattern.svg") center / cover no-repeat; } ``` ## Итог Смысл и доступность → ` `/` `; орнамент, градиенты, паттерны → CSS background. Не прячьте важный контент в фоне.

← К списку

Когда выбирать <picture>, а когда CSS background-image?

CSS · middle · сложность 5

Войти, чтобы отмечать

Разберёмся

<picture>/<img> — контентные изображения; background-image — декоративные.

Trade-offs

	`<picture>` / `<img>`	`background-image`
Семантика / SEO / a11y	есть `alt`, в потоке контента	нет «картинки» для AT по умолчанию
Адаптив	`srcset`, `sources`, media	media-queries, `image-set`
object-fit / ленивая загрузка	нативно удобнее	контроль через background-*
Сложный art direction	сильная сторона `<picture>`	тяжелее

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.webp" />
  <img src="hero-narrow.webp" alt="Команда на встрече" />
</picture>

.hero {
  background: url("pattern.svg") center / cover no-repeat;
}

Итог

Смысл и доступность → <picture>/<img>; орнамент, градиенты, паттерны → CSS background. Не прячьте важный контент в фоне.

Загрузка…