1. Оптимизация изображений

Разница в использовании между <img> и стилизацией css через background-image
⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)

Оптимизации:

1.Ленивая загрузка
Как делали раньше.
Подписывались на scroll, resize, orientationchange и проверяли если ли изображение во viewport

Теперь
IntersectionObserver + атрибут img loading="lazy"


2. Вес изображений
Подбираем для разных устройств разные картинки по качеству используя атрибут

srcset = '1x 2x 3x'

и как фолбек src=''

Для css аналогично есть background-image: image-set(url)

Оптимизированные форматы изображений:
- webp,
- avif (плохо поддерживается)

Чтобы сделать универсально можно заюзать такую конструкцию

<picture>
 <source avif> // сначала avif
 <source srcset webp> // если не сработало, то webp
 <img loading='lazy'> // фолбек - img
</picture>

Gif лучше конвертить в mp4 и использовать video

<video>
 <source ...>
</video>

3. Оптимизация на уровне сборщиков
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader

imgproxy для динамических изображений