reChecker/Гайды/Изображения
Производительность

Как оптимизировать изображения для веба

Изображения — обычно самый тяжёлый ресурс на странице. Оптимизация может сократить вес страницы на 50-80%.

1

Используйте современные форматы

WebP на 25-35% легче JPEG при том же качестве. AVIF — ещё легче, но поддержка пока ограничена.

2

Адаптивные изображения

Используйте srcset для разных размеров экрана.

<img 
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="...">
3

Lazy loading

Добавьте loading="lazy" для изображений ниже первого экрана.

<img src="photo.webp" loading="lazy" alt="...">
4

Инструменты

Squoosh.app, TinyPNG, ImageOptim для ручной оптимизации. Sharp или next/image для автоматической.

Проверьте ваш сайт

Запустите аудит и узнайте, есть ли эта проблема на вашем сайте

Запустить бесплатный аудит

Поддержка reChecker

Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.

Эта форма для обратной связи по работе reChecker. Если нужна разработка или поддержка вашего сайта, отправьте отдельную заявку:

Для ответа укажите минимум один контакт: email или телефон.