Скил «Картинки без веса»: WebP, lazy loading, бюджеты

Форматы WebP/AVIF, адаптивный srcset, бюджеты размеров. Снижение веса страницы в 2–4 раза без видимой потери качества.

Шаги

1. 1Переведите основные форматы в WebP/AVIF

   Фотографии — WebP (на 25–35% легче JPEG) или AVIF (до 50% легче). JPEG оставьте как fallback для старых браузеров через <picture>.

2. 2Настройте адаптивные размеры

   Одна и та же картинка отдаётся в 3–4 разрешениях через srcset, а атрибут sizes подсказывает браузеру, какое взять. Телефон не должен скачивать картинку на 2400px.

   ПРОМПТ ДЛЯ АГЕНТА

   Ты — оптимизатор изображений. Вот разметка моей страницы: [вставьте HTML картинок]. Перепиши её на <picture> с WebP + fallback, srcset с 3 размерами и lazy loading для изображений ниже первого экрана.

   📋 Скопировать промпт⚡ Обкатать

3. 3Введите бюджеты размеров

   Главный баннер — до 200 КБ, превью — до 30 КБ, сумма картинок на странице — до 500 КБ. Бюджеты дисциплинируют сильнее любых автоматизаций.

4. 4Сожмите то, что уже на сайте

   Прогоните существующую медиатеку через пакетный оптимизатор (Sharp-скрипт или Squoosh CLI). Качество 70–85 для WebP — зона незаметной потери.

5. 5Проверьте кэш и CDN

   Картинки — самый кэшируемый контент: длинный Cache-Control + отдача через CDN с точки присутствия ближе к клиенту.

✅ Сделал материал, если:

• ☐Основной формат — WebP с JPEG/PNG-фолбэком
• ☐У всех контентных картинок есть srcset
• ☐Below-fold изображения грузятся лениво
• ☐Качество сжатия в диапазоне 70–85
• ☐Главный баннер весит меньше 200 КБ