Оптимизация изображений: скорость сайта и поиск

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

Почему это влияет на позиции

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

Что делать с весом

• Отдавать картинку в нужном размере. Кадр шириной 4000 пикселей в блоке шириной 600 — самая частая и самая дорогая ошибка. Браузер скачает всё, а покажет уменьшенную копию.
• Использовать современный формат. WebP при сопоставимом визуальном качестве обычно легче JPEG заметно, а прозрачность заменяет PNG. Формат поддерживается всеми актуальными браузерами.
• Сжимать разумно. Качество в районе 80-85 на фотографиях практически неотличимо от исходника при существенно меньшем весе.
• Откладывать загрузку. Всё, что ниже первого экрана, грузится по мере прокрутки. Изображения первого экрана, наоборот, откладывать не нужно — они и есть то, чего ждёт посетитель.
• Готовить версии под разные экраны. Телефон не должен качать десктопный кадр: разница в весе кратная.
• Указывать размеры в разметке. Это не ускоряет загрузку, но убирает скачки вёрстки.
• Проверять SVG. Иконки и логотипы в векторе часто выгружаются из редактора с лишними данными и весят больше растровой версии.

Что даёт какой эффект

Разметка, которую видит поиск

Здесь всё сводится к нескольким правилам, которые легко соблюдать и легко забыть.

1. Имя файла осмысленное. Не IMG_2451, а название товара, объекта или работы латиницей через дефис. Это один из немногих сигналов о содержимом файла.
2. Атрибут alt описывает картинку. Коротко и по делу: что изображено. Набивать туда ключевые слова не нужно — это работает против сайта и мешает людям, которые пользуются экранными читалками.
3. Подпись рядом с изображением. Текст вокруг картинки помогает и человеку, и поиску понять контекст.
4. Изображения товаров и объектов — в карту сайта. Отдельная карта изображений ускоряет их попадание в индекс.
5. Уникальные фотографии выигрывают у стоковых. Одна и та же стоковая картинка стоит на сотне сайтов, и шансов показаться по ней немного.

Разные картинки для разных экранов

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

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

Автоматизация вместо ручной работы

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

Что закладываем в такую обработку:

• Максимальную ширину, выше которой картинка не хранится.
• Набор версий под типовые ширины блоков в шаблонах.
• Уровень сжатия, единый для всего сайта.
• Запасной вариант в исходном формате для старых браузеров.
• Обработку уже загруженных файлов — разово, по всему архиву.

Настроено один раз, дальше работает само и не зависит от того, кто именно загружает контент.

Как проверить свой сайт за десять минут

1. Откройте страницу в браузере, включите инструменты разработчика и вкладку с сетевыми запросами.
2. Обновите страницу и отсортируйте запросы по размеру. Обычно сразу видны две-три картинки, которые весят больше, чем вся остальная страница.
3. Сравните фактический размер изображения с размером блока, в котором оно показано. Расхождение в несколько раз — это готовая задача.
4. Проверьте, какие форматы отдаются: если весь каталог в JPEG и PNG, перевод в WebP даст заметный результат.
5. Прокрутите страницу и посмотрите, есть ли скачки вёрстки в момент подгрузки картинок.
6. Повторите замер в режиме медленного соединения — он ближе к реальности мобильного посетителя, чем офисный интернет.

Чего делать не стоит

• Сжимать до состояния, когда на фотографии видны артефакты. Товар должно быть видно, скорость не важнее продажи.
• Откладывать загрузку изображений первого экрана — это ухудшает восприятие вместо улучшения.
• Прятать текст в картинку. Всё, что важно для поиска, должно быть текстом.
• Ставить одинаковый alt на все изображения страницы.
• Заменять фотографии работ на стоковые ради аккуратности. Свои снимки убеждают сильнее.

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