Изображения — это не просто украшение сайта. Они напрямую влияют на:
Скорость загрузки страниц — тяжелые картинки тормозят сайт
Поведенческие факторы — пользователи уходят с медленных сайтов
Поисковое ранжирование — скорость загрузки учитывается в алгоритмах
Конверсию — каждый лишний секунд загрузки = потерянные продажи
Как определить, нужна ли оптимизация
Проверьте скорость сайта
Используйте инструменты:
Google PageSpeed Insights
GTmetrix
WebPageTest
Если страница грузится дольше 3 секунд — срочно оптимизируйте.
Проанализируйте вес изображений
В отчетах инструментов найдите раздел "Opportunities" → "Properly size images" или "Efficiently encode images".
Форматы изображений: какой выбрать
WebP — современный стандарт
Сжатие на 25-35% лучше, чем JPEG
Поддерживает прозрачность (как PNG)
Поддерживается всеми современными браузерами
JPEG — для фотографий
Идеален для снимков с плавными переходами
Не поддерживает прозрачность
Хорошее соотношение качество/размер
PNG — для графики
Прозрачность и четкие линии
Логотипы, иконки, схемы
Больший размер файла, чем JPEG
SVG — векторная графика
Масштабируется без потери качества
Идеален для логотипов и иконок
Минимальный вес
GIF — только для анимации
Ограниченная цветовая палитра
Используйте только для коротких анимаций
Практические способы оптимизации
1. Сжатие без потери качества
Онлайн-сервисы:
Image Compressor
TinyPNG — до 20 изображений за раз
Squoosh — от Google, визуальное сравнение
ImageOptim — для macOS
Командная строка:
# Для JPEG
jpegoptim --strip-all image.jpg
# Для PNG
optipng -o7 image.png
# Для WebP
cwebp -q 80 image.jpg -o image.webp2. Адаптивные изображения
Используйте srcset для разных разрешений:
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Описание изображения">
3. Ленивая загрузка (Lazy Loading)
<img src="placeholder.jpg"
data-src="real-image.jpg"
loading="lazy"
alt="Описание">Или через JavaScript библиотеки: Lozad.js, LazyLoad.
4. CDN для изображений
Сервисы автоматической оптимизации:
Cloudinary — динамическое изменение размера и формата
Imgix — параметры через URL
ImageKit — WebP автоматически
Оптимизация для поисковиков
Alt-атрибуты
<!-- Плохо -->
<img src="img123.jpg" alt="">
<!-- Хорошо -->
<img src="sheremetyevo-airport.jpg" alt="Аэропорт Шереметьево терминал B">Правила:
3-7 слов
Включайте ключевые фразы
Описывайте содержимое точно
Названия файлов
Плохо: DSC_4567.jpg
Хорошо: hotel-moscow-view.jpg
Инструменты для разных платформ
WordPress
Smush — автоматическое сжатие
ShortPixel — конвертация в WebP
EWWW Image Optimizer — локальная оптимизация
Bitrix
Встроенный компонент CFile::ResizeImage()
Модуль "Оптимизация изображений" из маркетплейса
Laravel
// Через Intervention Image
Image::make($request->file('image'))
->resize(800, null, function ($constraint) {
$constraint->aspectRatio();
})
->encode('webp', 80)
->save($path);
Чек-лист оптимизации
Конвертировать в WebP (с fallback на JPEG)
Установить правильные размеры (макс. 1920px для баннеров)
Сжать без потери качества
Добавить alt-атрибуты
Настроить ленивую загрузку
Подключить CDN
Проверить скорость через PageSpeed Insights
Итог
Оптимизация изображений — это баланс между качеством и скоростью.
Правильный подход увеличит конверсию, улучшит позиции в поиске и снизит отказы.
Начните с самых тяжелых изображений и постепенно оптимизируйте весь сайт.
