Основы веб-разработкиСоветы владельцам сайтов

Изображения на сайте: как правильно настроить летом

malej 19.06.2026 0 Комментарии

Две самые частые ошибки, которые я вижу летом:

Фото со смартфона — 4-5 мегабайт, и мастер просто закидывает его на сайт как есть.
Картинка 4000×3000 пикселей, показывается в 400×300. Браузер загружает огромный файл, потом его сжимает.

Результат: сайт загружается 10 секунд. На 4G это вечность.

Как правильно?

Шаг 1. Формат

WebP — лучший друг веб-мастера. Файл в два раза меньше JPEG, качество такое же. Браузеры его поддерживаются с 2018 года.

Сделайте обе версии:

WebP для современных браузеров (Chrome, Firefox, Edge)
JPEG как подстраховка для старого Safari

html

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание">
</picture>

Браузер сам выберет, что ему нравится.

Шаг 2. Размер

Не грузите картинку размером 4000 пикселей, если она показывается в размере 800 пикселей. Оптимизируйте. На мобильном телефоне 800 пикселей, на рабочем столе максимум 1600 пикселей. Всё остальное — перебор.

Инструменты: ImageOptim (Mac), FileOptimizer (Windows) или онлайн TinyPNG.

Шаг 3. Ленивая загрузка

Картинки, которые не видите сразу на экране, не загружайте сразу. Пусть они загружаются, когда человек до них скроллит.

html

<img src="image.webp" loading="lazy" alt="Описание">

Это встроено в HTML, работает везде.

Шаг 4. Адаптивные картинки

На мобильном телефоне отображается уменьшенная версия, на рабочем столе большая. Зачем мобилист будет грузить полноразмерное фото?

html

<img 
  srcset="image-small.webp 400w, image-large.webp 1200w"
  sizes="(max-width: 640px) 100vw, 1200px"
  src="image-large.webp" 
  alt="Описание"
>

Браузер выбирает нужный размер в зависимости от экрана.

Реальная цифра:

Один клиент, интернет-магазин, грузил фотки товаров без оптимизации. Скорость была 45/100 в PageSpeed. Мы сделали WebP, ленивую загрузку и правильные размеры. Скорость прыгнула на 82/100. И тормозная конверсия выросла на 18% (люди дольше смотрят товары, если сайт не делает).

Летом контент меняется — добавляются фотографии старых товаров, акций. Сейчас идеальный момент сделать правильно.