Как не убить скорость сайта картинками

Картинки и скорость. Не грузите больше пикселей, чем показываете - hero без lazy, WebP и srcset часто дают больший выигрыш, чем тюнинг JS.

Шесть мегабайт в hero - и всё остальное не важно

Можно идеально собрать Vite, вычистить CSS и убрать лишний JavaScript - а потом положить в первый экран фото с телефона на шесть мегабайт. Lighthouse покраснеет, пользователь уйдёт раньше, чем прочитает оффер. Картинки часто весят больше всего страницы.

Главное правило размеров

Если блок на экране 600 пикселей шириной, не отдавайте файл на 4000. Браузер ужмет, но пользователь уже заплатил временем и трафиком. Готовьте версии под реальные breakpoints.

<img
  src="/images/case-800.webp"
  srcset="/images/case-400.webp 400w, /images/case-800.webp 800w"
  sizes="(max-width: 768px) 92vw, 800px"
  width="800"
  height="500"
  alt="Пример интерфейса"
  loading="lazy"
  decoding="async">

Hero - особый случай

Первую большую картинку нельзя вешать lazy, если она нужна сразу. Её готовят отдельно: правильный размер, сжатие, при необходимости preload. Всё остальное ниже fold - lazy.

Подробный разбор без библиотек - в статье про lazy loading. Если страница всё ещё тяжёлая после картинок - смотрите что делать с медленной страницей и точечное обновление без редизайна.

Форматы: WebP, SVG, PNG

• Фото - WebP или AVIF с запасным JPEG.
• Иконки и логотипы - SVG, если возможно.
• PNG - только где нужна прозрачность без вектора.
• JPEG - для совместимости в picture/source.

Что я проверяю на чужом сайте

Открываю DevTools в Network, сортирую по размеру. Первые три файла часто и есть проблема. Смотрю, не тянется ли карта или чат-виджет на каждой странице. Иногда выигрыш - не в hero, а в футере с тяжёлой картой.

Самая дешёвая оптимизация - не грузить то, что пользователь ещё не видит.

Если после картинок страница всё ещё тяжёлая - смотрим скрипты и кэш. Но в восьми из десяти случаев на лендинге малого бизнеса достаточно нормализовать изображения и убрать лишнее из первого экрана. Ориентиры по доработке - на странице цен, часто это пара часов работы с заметным эффектом.

Сжатие без мифов о «потере качества»

WebP quality 80-85 для фото на сайте обычно неотличимо от 100 для глаза, но файл в три раза меньше. Я прогоняю пакетом через Squoosh, sharp или imagemin в CI - один раз настроил, дальше автоматически.

Для retina можно отдавать 2x только там, где это заметно: hero, продукт, скрины. Фоновые декоративные картинки - минимальный вес, иногда хватит CSS-градиента вместо jpeg на 400 КБ.

Картинки в CMS и на React

Если контент грузит маркетолог - дайте ему пресет: «ширина не больше 1600, формат WebP, вес до 200 КБ на фото». Без правила снова появятся оригиналы с телефона. В React/Vite имеет смысл импорт через сборщик или отдельный скрипт оптимизации при деплое.

SVG и иконки

Спрайт иконок или inline SVG для UI - килобайты вместо набора PNG. Не вставляйте SVG на 500 КБ из Figma с лишними метаданными - прогон через SVGO.

Для open graph картинки - отдельный файл 1200×630, сжатый, не тот же оригинал что в hero 4K.

Art direction для контента

Договоритесь с фотографом или дизайнером: кадрирование под web, не «всё в архиве RAW». Горизонт для hero, вертикаль для stories - разные crops. Одна фотосессия с умом закрывает сайт и соцсети без десяти мегабайт на страницу.

Placeholder blur (LQIP) - приятный UX при lazy load: tiny base64 или blurhash, потом основное изображение. Не обязательно на MVP, но на медиа-лендингах заметно.

CDN для картинок имеет смысл при аудитории из разных регионов. На локальном бизнесе одного города иногда достаточно быстрого VPS в вашей стране.

Видео и фоновые медиа

Autoplay video в hero - красиво и тяжело. Постер обязателен, video lazy, muted, без звука по умолчанию. На mobile часто лучше статичный кадр вместо video.

CSS background-image с url( huge.jpg ) не lazy - знайте это. Иногда img с object-fit выигрывает у background по контролю и lazy.

Responsive images для retina: 2x только где видно пиксели - hero продукт, не мелкая иконка.

Аудит после правок: Lighthouse mobile, WebPageTest на 4G, свой телефон. Три точки - не парanoia.

Где теряют время и деньги

• Загружать фото с камеры или из стока в полном разрешении без сжатия.
• Ставить loading="lazy" на hero-картинку первого экрана.
• Использовать PNG для больших фотографий.
• Не указывать width и height - layout прыгает при загрузке.
• Держать карусель из пяти тяжёлых слайдов в hero.

Рядом по теме: Lazy loading без библиотек, Hosting и SSL, Услуги.

Как не утонуть в деталях

1. Сожмите все фото до размера, близкого к отображаемому на сайте.
2. Конвертируйте фото в WebP, оставьте JPEG как fallback.
3. Hero грузите сразу, остальное - с lazy loading.
4. Проверьте Network в DevTools: топ-3 файла по весу.
5. Укажите width и height у каждого значимого img.
6. Уберите декоративные слайдеры, если их никто не листает.

Когда звать разработчика. Разработчик нужен, чтобы настроить srcset, picture, preload hero и автоматическое сжатие в сборке - руками в CMS это быстро превращается в хаос. Ориентиры по срокам и бюджету - на странице цен, услуги - в разделе услуг.

Что делаю перед сдачей лендинга

Network в сортировка по размеру. Топ-3 файла - в Squoosh. Hero без lazy. Остальное - lazy и WebP.

Маркетологу даю лимит: «до 200 КБ, WebP, ширина 1600 max». Иначе через месяц снова оригинал с телефона на 5 МБ.

Lighthouse mobile - не для галочки. Для рекламы. Медленная страница сливает бюджет.