Оптимизация изображений для ускорения загрузки сайта

Подготовьте только готовое практическое руководство на русском языке.
Стиль — технический, прикладной и без лишних вступлений.
Не предлагайте дополнительные услуги и не завершайте ответ фразами вроде «если хотите, могу...».

Соблюдайте структуру:
1. Общая стратегия:
   - аудит тяжёлых изображений;
   - приоритизация LCP-элементов и изображений выше сгиба;
   - автоматизация в CI или build pipeline.
2. Форматы и качество:
   - объясните, когда использовать AVIF, WebP, JPEG, PNG и SVG;
   - добавьте рекомендации по качеству, метаданным и визуальной проверке.
3. Responsive images:
   - разберите srcset, sizes и picture;
   - включите короткий пример с AVIF, WebP и fallback.
4. Lazy loading и приоритизация:
   - опишите loading="lazy", preload для LCP, decoding="async", width и height и борьбу с CLS.
5. Размеры и layout:
   - правила по реальным размерам, crop и aspect-ratio.
6. SVG:
   - минификация, варианты интеграции, безопасность и доступность.
7. CDN и серверная оптимизация:
   - cache-control, fingerprinting, on-the-fly трансформации.
8. Инструменты и автоматизация:
   - CLI-инструменты, build-плагины и image CDN по категориям.
9. Маленькие, но важные детали:
   - progressive JPEG, data URI, тестирование на реальных сетях.
10. Метрики и валидация:
   - Lighthouse, WebPageTest, RUM и основные цели.
11. Краткий чек-лист внедрения:
   - 6–8 шагов по порядку.

Используйте короткие заголовки, списки и не более одного компактного блока кода на раздел, где без него не обойтись.