Как оптимизировать изображения?

Производительность в JS

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

Основные приёмы

Форматы

WebP / AVIF — современные форматы, меньше размер при том же качестве, чем JPEG/PNG.
SVG — для иконок и логотипов (векторный, масштабируется).

Сжатие

Сжимать без заметной потери качества (imagemin, squoosh); подбирать уровень качества (обычно 70–85%).

Адаптивные изображения

Отдавать нужный размер под устройство:

<img
  src="small.jpg"
  srcset="small.jpg 480w, large.jpg 1080w"
  sizes="(max-width: 600px) 480px, 1080px"
/>
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="" />
</picture>

Ленивая загрузка

<img src="image.jpg" loading="lazy" alt="" />

Загружать изображения только при приближении к вьюпорту.

Прочее

Размеры — указывать width/height (избежать сдвига layout, CLS).
CDN — раздача и трансформация изображений на лету.
Кеширование — заголовки Cache-Control.

Коротко для собеседования

Оптимизация изображений: современные форматы (WebP/AVIF, SVG для иконок), сжатие, адаптивные srcset/<picture>, loading="lazy", указание размеров (против CLS), CDN и кеширование. Снижает вес страницы и ускоряет загрузку.