# Хорошие случаи использования JPEG:
- Фотографии товаров
- Главные изображения
- Фоновые изображения
- Фотопортфолио
- Любые изображения со сложными цветовыми градиентами

# Плохие случаи использования JPEG:
- Логотипы (используйте PNG или SVG)
- Скриншоты с текстом (используйте PNG)
- Изображения, требующие прозрачности (используйте PNG или WebP)

# Хорошие случаи использования PNG:
- Логотипы и брендинг
- Иконки и элементы UI
- Скриншоты
- Изображения с текстовыми наложениями
- Графика с прозрачностью
- Диаграммы и иллюстрации с резкими линиями

# Плохие случаи использования PNG:
- Большие фотографии (JPEG на 50-80% меньше)
- Анимации (используйте GIF, WebP или APNG)

# Преимущества WebP над JPEG:
PNG фото (1.2 МБ) → WebP без потерь (800 КБ) = на 33% меньше
JPEG фото (200 КБ) → WebP с потерями (140 КБ) = на 30% меньше

# Преимущества WebP над PNG:
PNG логотип с прозрачностью (50 КБ) → WebP (35 КБ) = на 30% меньше
Сохраняет полную поддержку прозрачности

# Эффективность сжатия AVIF:
JPEG (200 КБ, качество 85) → AVIF (100 КБ, то же воспринимаемое качество) = на 50% меньше
WebP (140 КБ) → AVIF (100 КБ) = на 28% меньше

# Когда использовать AVIF:
- Сайты с высоким трафиком (снижение затрат на пропускную способность)
- Приложения, ориентированные на мобильные устройства (быстрая загрузка в медленных сетях)
- Прогрессивное улучшение (с резервными JPEG/WebP)

# Когда НЕ использовать AVIF:
- Нужна максимальная совместимость с браузерами (устройства < 2022)
- Обработка изображений в реальном времени (кодирование медленное)

Есть ли у изображения прозрачность?
├─ Да
│  ├─ Нужна максимальная совместимость? → PNG-24
│  ├─ Только современные браузеры? → WebP (прозрачность)
│  └─ Передовые технологии + минимальный размер? → AVIF
│
└─ Нет прозрачности
   ├─ Это фотография?
   │  ├─ Нужна максимальная совместимость? → JPEG (качество 75-85)
   │  ├─ Только современные браузеры? → WebP (с потерями)
   │  └─ Минимально возможный размер? → AVIF
   │
   ├─ Это логотип/иконка?
   │  ├─ Простая векторная форма? → SVG (всегда предпочтительнее)
   │  ├─ Сложный растровый логотип? → PNG или WebP
   │  └─ Очень маленькая иконка? → PNG-8 (256 цветов)
   │
   └─ Это скриншот/диаграмма?
      ├─ Есть текст или резкие линии? → PNG или WebP (без потерь)
      └─ В основном фотографии? → JPEG или WebP (с потерями)

Уровень качества | Случай использования              | Размер файла | Визуальное качество
---------------------------------------------------------------------------------------------
90-100           | Печать, архивное хранение         | Большой      | Идеальное
80-89            | Главные изображения, портфолио    | Средний      | Отличное
70-79            | Стандартные веб-изображения       | Малый        | Хорошее
60-69            | Миниатюры, превью                 | Очень малый  | Приемлемое
Ниже 60          | Избегать (видимые артефакты)      | Крошечный    | Плохое

# Рекомендуемые настройки:
- Главные изображения: качество 85
- Фотографии товаров: качество 80
- Изображения в блоге: качество 75
- Миниатюры: качество 65-70

# Техника 1: Уменьшение цветов (PNG-24 → PNG-8)
24-битный PNG с 1000 цветов → 8-битный PNG с 256 цветов
Уменьшение размера файла: 60-75%
Используйте, когда: Изображение имеет ограниченную цветовую палитру

# Техника 2: Удаление метаданных
PNG с данными EXIF (120 КБ) → Очищенный PNG (115 КБ)
Экономия: 5-10%

# Техника 3: Оптимизация уровня сжатия
PNG по умолчанию (100 КБ) → PNG оптимизированный (80 КБ)
Экономия: 15-25% (без потерь)

# Базовый JPEG:
- Загружается сверху вниз
- Показывает частичное изображение во время загрузки
- Немного меньший размер файла

# Прогрессивный JPEG:
- Сначала загружает полное изображение низкого разрешения, затем уточняет
- Лучшая воспринимаемая производительность (полное изображение видно раньше)
- Немного больший размер файла (1-2%)

Рекомендация: Используйте прогрессивный для изображений > 50 КБ

# Пример рабочего процесса:
1. Оригинал: photo.png (2 МБ)
2. Конвертировать PNG в JPEG: photo.jpg (400 КБ) - уменьшение на 80%
3. Конвертировать JPEG в WebP: photo.webp (280 КБ) - дополнительное уменьшение на 30%
4. Опционально: Конвертировать в AVIF: photo.avif (200 КБ) - дополнительное уменьшение на 28%

Итоговый результат: 90% общего уменьшения размера файла (2 МБ → 200 КБ)

# Пример сжатия JPEG:
Оригинальный JPEG (500 КБ, качество 95) → Сжатый (200 КБ, качество 80)
Уменьшение на 60%, минимальная визуальная разница

# Пример сжатия PNG:
Оригинальный PNG (800 КБ) → Оптимизированный PNG (600 КБ)
Уменьшение на 25%, идентичное визуальное качество (без потерь)

# Пример: Миниатюра в блоге
Оригинал: фото 4000×3000 (3 МБ)
Отображается при: 400×300 пикселей

Решение:
1. Изменить размер до 800×600 (2× для retina) → 300 КБ
2. Сжать до качества 80 → 150 КБ
3. Конвертировать в WebP → 100 КБ

Результат: 97% уменьшение (3 МБ → 100 КБ) с идеальным качеством отображения

<!-- Пример HTML адаптивного изображения -->
<picture>
  <!-- AVIF для современных браузеров -->
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  />
  
  <!-- WebP резервный вариант -->
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  />
  
  <!-- JPEG резервный вариант -->
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
    alt="Главное изображение"
    loading="lazy"
  />
</picture>

<!-- Мобильное устройство получает hero-400.avif (50 КБ) -->
<!-- Десктоп получает hero-1600.jpg (300 КБ) только если браузер не поддерживает AVIF -->

# До оптимизации:
- 20 фотографий товаров (PNG, 400 КБ каждая) = 8 МБ всего
- Время загрузки страницы: 5.2 секунды (сеть 3G)

# После оптимизации:
Шаг 1: Конвертировать PNG → JPEG (фотографии товаров не нуждаются в прозрачности)
  Результат: 400 КБ → 120 КБ на изображение

Шаг 2: Сжать JPEG до качества 80
  Результат: 120 КБ → 80 КБ на изображение

Шаг 3: Конвертировать в WebP для современных браузеров
  Результат: 80 КБ → 55 КБ на изображение

Шаг 4: Создать миниатюры (200×200 вместо 800×800)
  Результат: 55 КБ → 15 КБ на миниатюру

# Итоговый результат:
- Миниатюры: 20 × 15 КБ = 300 КБ (уменьшение на 96%!)
- Полные изображения: Ленивая загрузка по клику
- Время загрузки страницы: 1.8 секунды (на 65% быстрее)

# До:
- Заголовочный JPEG (1920×1080, качество 95): 800 КБ
- Мобильные пользователи всё ещё скачивают полные 800 КБ

# После:
Создать три размера:
- Мобильный (640×360, качество 75, WebP): 40 КБ
- Планшет (1280×720, качество 80, WebP): 120 КБ  
- Десктоп (1920×1080, качество 80, WebP): 250 КБ

Экономия для мобильных: 800 КБ → 40 КБ = уменьшение на 95%
Экономия для планшета: 800 КБ → 120 КБ = уменьшение на 85%
Экономия для десктопа: 800 КБ → 250 КБ = уменьшение на 69%

# Задача: Портфолио высококачественной фотографии
- Нужно высокое визуальное качество
- 50 портфолио изображений

# Стратегия:
1. Главное изображение: AVIF + WebP + JPEG резервный вариант (качество 85)
   - Оригинальный JPEG: 500 КБ
   - AVIF: 250 КБ (на 50% меньше)
   - WebP резервный: 350 КБ
   - JPEG резервный: 500 КБ

2. Сетка миниатюр: WebP миниатюры (300×300)
   - Каждая миниатюра: 20 КБ
   - 50 миниатюр: 1 МБ всего (против 25 МБ если полноразмерные)

3. Полноразмерные изображения: Ленивая загрузка по клику
   - Загружать только когда пользователь просматривает

Результат: Начальная загрузка страницы 1.3 МБ вместо 25 МБ (уменьшение на 95%)

# Плохо: Качество слишком низкое (JPEG качество 50)
Результат: Видимые артефакты сжатия, размытые края

# Хорошо: Найти оптимальный баланс (качество 75-85)
Результат: Минимальная визуальная разница, значительная экономия размера файла

Совет: Всегда визуально проверяйте сжатые изображения перед развёртыванием

# Плохо: Фото как PNG
photo.png: 2.5 МБ (сжатие без потерь потрачено впустую на фото)

# Хорошо: Фото как JPEG или WebP
photo.jpg (качество 80): 400 КБ (на 84% меньше)
photo.webp (качество 80): 280 КБ (на 89% меньше)

Исключение: Используйте PNG для фото только если нужно сохранить прозрачность

# Плохо: Подача 4K изображения для отображения 400px
<img src="photo-4000x3000.jpg" width="400" height="300" />
<!-- Браузер скачивает 3 МБ, отображает при 400×300 -->

# Хорошо: Изменить размер до размера отображения (2× для retina)
<img src="photo-800x600.jpg" width="400" height="300" />
<!-- Браузер скачивает 150 КБ, идеальное качество отображения -->

# Плохо: Только WebP (ломается в старых браузерах)
<img src="photo.webp" alt="Фото" />
<!-- Сломанное изображение в IE, старом Safari -->

# Хорошо: Прогрессивное улучшение с резервными вариантами
<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="Фото" />
</picture>
<!-- Работает везде, современные браузеры получают меньшие файлы -->

# Плохо: Загружать все изображения немедленно
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- Скачивает все изображения даже если пользователь никогда не прокручивает -->

# Хорошо: Ленивая загрузка изображений ниже сгиба
<img src="above-fold.jpg" />
<img src="image2.jpg" loading="lazy" />
<img src="image3.jpg" loading="lazy" />
<!-- Загружает изображения только когда пользователь прокручивает к ним -->

# Конвертировать в WebP
cwebp input.jpg -q 80 -o output.webp

# Конвертировать в AVIF (требуется libavif)
avifenc --min 20 --max 40 input.jpg output.avif

# Оптимизировать PNG (без потерь)
optipng -o7 image.png

# Сжать JPEG
jpegoptim --max=80 --strip-all image.jpg

# Пакетная конвертация директории
find . -name "*.jpg" -exec cwebp {} -q 80 -o {}.webp \;