Изображения и медиа: форматы, размеры и оптимизация на лету

Изображения — обычно самая тяжёлая часть страницы и самый частый виновник плохого LCP. Работают четыре приёма. Формат: AVIF даёт лучшее сжатие, WebP — почти такое же при более широкой поддержке, JPEG остаётся запасным вариантом; выбор делает сервер по заголовку Accept либо разметка через <picture>. Размер под устройство: одно изображение на 2000 пикселей для телефона — это выброшенные байты, поэтому генерируют несколько вариантов и отдают через srcset/sizes. Приоритеты: картинка первого экрана грузится с fetchpriority="high" и без loading="lazy", остальные — наоборот. Стабильность вёрстки: явные width и height (или aspect-ratio) убирают сдвиг макета при загрузке. Отдельное инженерное решение — где оптимизировать: на сборке (предсказуемо, но негибко), на лету сервисом изображений с кэшированием в CDN (гибко, но нужен контроль стоимости и защита от перебора параметров).