Картинки весят больше, чем весь остальной сайт

Если открыть почти любой медленный сайт и посмотреть, из чего состоит страница, картина будет похожей: код, шрифты и стили занимают малую часть, а основной объём — изображения. Особенно на сайтах, где продаёт картинка: недвижимость, интерьеры, архитектура, производство.

Сайт жилого комплекса без больших визуализаций, фотографий двора и планировок не представить. Отказываться от них не нужно. Нужно готовить их так, чтобы посетитель видел качество, а не ждал загрузки.

Откуда берутся тяжёлые картинки

Обычно это цепочка разумных на первый взгляд решений. Визуализатор присылает рендеры в огромном разрешении, рассчитанном на печать. Фотограф отдаёт исходники с камеры. Контент-менеджер загружает их на сайт как есть, потому что «так качественнее». Система управления не сжимает их или сжимает плохо.

В итоге на телефон загружается изображение, которого хватило бы на рекламный щит. Разницы в качестве посетитель не видит, а разницу в скорости — чувствует.

Бывает и обратная ситуация: картинки пережали так сильно, что визуализация покрылась размытыми пятнами, а на небе появились полосы. Для недвижимости это тоже потеря: покупатель оценивает проект по изображениям, и мутная картинка работает против продаж.

Размер под экран, а не под печать

Первое правило — картинка должна быть того размера, в котором её покажут. Если фото занимает половину экрана ноутбука, загружать его в размере для большого монитора бессмысленно.

При этом экраны у всех разные. Поэтому правильная схема — несколько версий одного изображения: небольшая для телефона, средняя для ноутбука, большая для широких и чётких экранов. Браузер сам выберет подходящую. Делать это вручную не нужно: хорошо устроенный сайт нарезает версии автоматически при загрузке файла.

Особенно это касается первого экрана. Широкий баннер на телефоне обычно обрезается до узкой полосы, и для него разумно подготовить отдельную, вертикальную версию кадра, а не просто уменьшенную копию.

Формат имеет значение

Привычные JPEG и PNG по-прежнему работают везде, но есть более новые форматы — WebP и AVIF. При том же видимом качестве они весят заметно меньше. Актуальные браузеры их поддерживают, а для старых можно оставить запасной вариант.

Коротко о том, что для чего:

• фотографии и рендеры — WebP или AVIF;
• логотипы и иконки — SVG, векторный формат;
• PNG — только если нужна прозрачность, а вектор не подходит;
• анимированные GIF — лучше заменить коротким видео.

Отдельная история — планировки. Их часто загружают огромными растровыми картинками, хотя чертёж из линий и подписей хорошо ложится в векторный формат: файл получается лёгким и остаётся чётким при любом увеличении.

Загружать не всё сразу

Длинная страница жилого комплекса может содержать десятки изображений: галерея, ход строительства, инфраструктура, планировки. Посетитель, который открыл первый экран, их не видит. Нет смысла загружать фотографии из низа страницы, пока человек до них не дошёл.

Отложенная загрузка решает это: изображения подгружаются, когда до них остаётся немного прокрутки. А вот главное изображение первого экрана, наоборот, должно загружаться в первую очередь — от него зависит, насколько быстрым покажется сайт. То же с галереями и слайдерами: пока посетитель смотрит первый кадр, остальные можно не загружать — достаточно подготовить соседний, чтобы листание было плавным.

Ещё одна деталь: у каждой картинки заранее должно быть зарезервировано место на странице. Иначе текст сначала отобразится, а потом резко сдвинется, когда подгрузится изображение.

Как не испортить всё после запуска

Даже если при разработке всё настроено правильно, через полгода на сайте могут появиться новые тяжёлые картинки: баннер акции, свежие фото хода строительства. Поэтому важно, чтобы сайт сам обрабатывал загружаемые файлы — уменьшал, сжимал, готовил нужные версии, — а не полагался на то, что каждый сотрудник помнит правила. И раз в несколько месяцев полезно проверять самые посещаемые страницы: сколько они весят и не появилось ли на них что-то непредусмотренное — например, видео, вставленное в исходном качестве.

Качество картинки определяет глаз посетителя, а не размер файла. Всё, что сверх видимого на экране, — просто ожидание.

Если сайт с красивыми визуализациями открывается дольше, чем хотелось бы, можно посмотреть, сколько на самом деле весят страницы и что получится облегчить, не жертвуя качеством.