Оптимизация изображений уменьшает размер файлов, сохраняя визуальное качество. Основной рабочий процесс: изменить размер до отображаемых размеров, сжать с качеством 75-85%, конвертировать в WebP или AVIF, добавить ленивую загрузку и задать явные атрибуты width/height. В исследовании DebugBear было достигнуто снижение на 97,5% (4,3 МБ → 109 КБ) с использованием именно этой последовательности.
Почему оптимизация изображений важна
Изображения составляют примерно 64% от общего веса страницы (Sanity). Неоптимизированные изображения напрямую ухудшают:
| Метрика | Влияние | Причина |
|---|---|---|
| LCP (Largest Contentful Paint) | Превышение порога 2,5 с | Перегруженные главные изображения |
| CLS (Cumulative Layout Shift) | Смещение контента при загрузке | Отсутствие атрибутов width/height |
| Показатель отказов | Посетители уходят до загрузки контента | Медленная первоначальная отрисовка |
| Мобильные позиции | Более низкие позиции в поиске | Избыточная пропускная способность на нестабильных сетях |
Три столпа: изменение размера, сжатие, формат
Столп 1: Изменение размера — наибольший единичный выигрыш
Обслуживание изображений в их фактическом отображаемом размере — это главная оптимизация. В исследовании DebugBear фотография размером 7108×4744 отображалась при 1266×845: только изменение размера сократило файл с 4,3 МБ до 495 КБ (снижение на 89%).
Шаги:
- Определите отображаемые размеры — WordPress.com рекомендует загружать изображения с шириной в 1,5-2 раза больше области контента для чёткого результата.
- Измените размер перед загрузкой — используйте Preview (Mac), Paint (Windows) или GIMP.
- Добавьте адаптивные изображения с атрибутами
srcsetиsizes, чтобы обслуживать разные ширины (400w, 800w, 1600w) в зависимости от размера области просмотра.
Это позволяет браузеру выбирать подходящий файл для каждой области просмотра — мобильные пользователи загружают меньшие файлы, а пользователи десктопа получают чёткие версии.
Столп 2: Сжатие — с потерями или без потерь
| Режим | Как работает | Размер файла | Лучше всего для |
|---|---|---|---|
| С потерями | Безвозвратно удаляет часть данных | Меньше (снижение на 40-60%) | Фотографии, сложные изображения |
| Без потерь | Точно сохраняет все данные | Больше | Логотипы, текст, скриншоты, прозрачность |
Для большинства веб-изображений сжатие с потерями при качестве 75-85 обеспечивает оптимальный баланс. И WebP, и AVIF поддерживают оба режима.
Столп 3: Выбор формата — WebP против AVIF против JPEG
| Формат | Сжатие по сравнению с JPEG | Скорость кодирования | Поддержка браузеров (2026) | Лучше всего для |
|---|---|---|---|---|
| WebP | На 25-35% меньше | Быстрое | 97%+ | LCP-изображения, общее использование |
| AVIF | На ~50% меньше | На 50% медленнее WebP | 92%+ | Максимальное сжатие |
| JPEG | Базовый уровень | Самое быстрое | 100% | Универсальный запасной вариант |
Схема принятия решений:
| Сценарий | Рекомендуемый формат |
|---|---|
| LCP/главное изображение выше сгиба | WebP (быстрое кодирование, широкая поддержка) |
| Снижение общего веса страницы | AVIF (лучшее сжатие) |
| Продуктовая фотография (HDR) | AVIF (широкий цветовой охват) |
| Пользовательский контент | WebP (быстрая обработка) |
| Анимированная графика | WebP (поддержка анимации) |
| Графика с текстом/чёткими линиями | WebP без потерь |
Гибридный подход (рекомендуется): Согласно Framer, обслуживайте WebP при первом запросе, конвертируйте в AVIF в фоновом режиме, затем обслуживайте AVIF при последующих посещениях. Вы получаете быструю начальную доставку и меньшие кэшированные файлы.
Ленивая загрузка и адаптивные изображения
Ленивая загрузка откладывает загрузку изображений за пределами экрана до момента необходимости, экономя пропускную способность и улучшая начальную загрузку. Добавьте loading="lazy" к любому тегу изображения ниже сгиба страницы.
Правила:
- Никогда не используйте ленивую загрузку для изображений выше сгиба — это задерживает LCP.
- Установите приоритет LCP-изображениям с помощью
fetchpriority="high". -
Предварительно загружайте критические фоновые изображения CSS в
<head>, используяrel="preload" as="image" fetchpriority="high". -
Всегда задавайте явные атрибуты width и height для элементов изображений, чтобы предотвратить CLS.
Сравнение инструментов
| Инструмент | Лучше всего для | Форматы | Пакетная обработка | Стоимость |
|---|---|---|---|---|
| Squoosh | Сравнение форматов для разработчиков | WebP, AVIF, JPEG, PNG | Да | Бесплатно |
| TinyPNG | Оптимизация отдельных изображений для дизайнеров | WebP, JPEG, PNG | 20 файлов | Бесплатно |
| ImageLean | Сжатие в браузере с акцентом на приватность | WebP, AVIF, JPEG, PNG | Да | Бесплатно |
| Smush | Владельцы сайтов на WordPress | WebP, AVIF, JPEG, PNG | Массовая | Бесплатно/Pro |
| Cloudflare Images | Глобальное масштабирование через CDN | Автоконверсия | На лету | Оплата за использование |
| Next.js Image | Проекты React/Next.js | Авто WebP/AVIF | Автоматически | Бесплатно |
CDN или плагин для оптимизации
| Подход | Как работает | Преимущества | Недостатки |
|---|---|---|---|
| На основе CDN (Cloudflare, Fastly) | Оптимизирует на сетевом ребре, кэширует результат | Никаких ручных действий, адаптация к устройству | Требуется подписка на CDN |
| На основе плагина (Smush, TinyPNG) | Обрабатывает при загрузке или через API | Больше контроля над результатом | Необходимо массово обработать существующие изображения |
Лучшая практика: Гибридный подход — CDN для доставки на лету + плагин для сжатия при загрузке. CDN сокращают время загрузки изображений на 50%+ для международных посетителей (DebugBear).
Рабочие процессы автоматизации
CI/CD конвейер
GitHub Actions может автоматически сжимать и конвертировать форматы при каждом push с помощью Squoosh CLI или sharp. Все изображения в кодовой базе оптимизируются перед развёртыванием.
Headless CMS
Платформы вроде Sanity обслуживают оптимизированные изображения с преобразованиями на лету — сохраните один высококачественный исходник и автоматически получите миниатюры, адаптивные размеры и современные форматы.
Электронная коммерция
- WooCommerce: Smush интегрируется напрямую — авто-сжатие при загрузке, массовая оптимизация галерей, CDN для глобальной доставки.
- Shopify: Встроенный конвейер обрабатывает оптимизацию. Убедитесь, что исходные изображения имеют правильный размер перед загрузкой, а темы генерируют соответствующие атрибуты
srcset.
Исправление предупреждений PageSpeed Insights
| Предупреждение | Причина | Решение |
|---|---|---|
| “Properly size images” | Изображение больше отображаемого размера | Измените размер в соответствии с контейнером + используйте srcset |
| “Serve images in next-gen formats” | Используется JPEG/PNG вместо WebP/AVIF | Конвертируйте с помощью Squoosh или автоконверсии Smush |
| “Defer offscreen images” | Все изображения загружаются немедленно | Добавьте loading="lazy" только для изображений ниже сгиба |
| “Eliminate render-blocking resources” | Большие изображения в Base64 в CSS/HTML | Обслуживайте как отдельные файлы; избегайте Base64 для объёма больше нескольких сотен байт |
Заключение
Оптимизируйте изображения последовательно: изменение размера → сжатие → конвертация в современный формат → добавление ленивой загрузки → установка явных размеров. Автоматизируйте с помощью гибрида CDN и плагина. Начните с аудита вашего сайта с DebugBear — снижение размера на 97,5% из исследования достижимо для большинства сайтов с помощью этих методов.
FAQ
В чём разница между сжатием с потерями и без потерь?
Сжатие с потерями безвозвратно удаляет данные для получения меньших файлов — подходит для фотографий. Сжатие без потерь точно сохраняет все данные — подходит для логотипов, текста и скриншотов. WebP и AVIF поддерживают оба режима. Для веб-изображений стандартом является сжатие с потерями при качестве 75-85%.
Что использовать — WebP или AVIF в 2026 году?
WebP для LCP/изображений выше сгиба (быстрее кодирование, более широкая поддержка). AVIF для максимального сжатия (меньшие файлы, медленнее кодирование). Используйте гибридный подход: WebP при первой загрузке, AVIF для кэшированных последующих посещений.
Как исправить предупреждения PageSpeed “Properly size images” и “Next-gen format”?
Измените размер изображений в соответствии с их отображаемыми размерами. Конвертируйте JPEG/PNG в WebP или AVIF. Используйте srcset с элементом <picture> для обслуживания соответствующих версий в зависимости от размера экрана и поддержки форматов. Пользователи WordPress могут автоматизировать это с помощью плагина Smush.
Добавить комментарий