Как ускорить загрузку адаптивных изображений (в связке с CSS)?

Question

Accepted Answer

## Связка HTML + CSS

CSS задаёт **отображение**, но вес файла решает выбор источника.

## Практика

- `srcset`/`sizes` и `<picture>` — разные плотности и ширины;
- современные форматы: AVIF/WebP с fallback;
- `loading="lazy"` нижеfold; для LCP — наоборот приоритет;
- в CSS: `aspect-ratio`, чтобы не прыгал layout;
- не грузите огромный `background-image` ради маленького декора — SVG/CSS-градиент;
- `image-set()` для фонов, где уместно.

```css
.hero {
  aspect-ratio: 21 / 9;
  background: image-set(url("hero.webp") type("image/webp"), url("hero.jpg") type("image/jpeg"));
}
```

## Итог

Режьте байты через правильный resource selection; CSS резервирует место и оформление. Одних `max-width: 100%` недостаточно для скорости.