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

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

Скорость загрузки влияет на всё: на отказы, на конверсию, на оценку страницы поисковиками. Подробно мы разбирали это в материале про скорость загрузки сайта. Изображения — самый простой и быстрый рычаг. Часто достаточно правильно подготовить картинки, и страница ускоряется в разы без единой строчки серверной оптимизации.

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

Почему изображения важны для SEO

Связь работает по трём направлениям.

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

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

Выбираем формат

Формат определяет, сколько будет весить файл при одинаковом внешнем качестве. Разберём основные варианты.

Практическое правило

• Фотографии отдавайте в современных форматах (WebP или AVIF) с запасным вариантом в JPEG.
• Логотипы, иконки и простые схемы делайте в SVG. Они не теряют чёткости на экранах высокой плотности и весят меньше килобайта.
• PNG оставляйте для случаев, где нужна точная передача цветов и прозрачность, а векторное решение невозможно.
• Не используйте GIF для анимации: короткое видео или анимированный WebP даёт тот же эффект при кратно меньшем весе.

Правильные размеры: главная экономия

Самая распространённая ошибка — загружать файл гораздо больше, чем он отображается. Фото шириной в несколько тысяч пикселей помещают в блок шириной пятьсот пикселей, а браузер честно скачивает всё и уменьшает на месте. Это лишний вес без единой выгоды.

Как определить нужный размер

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

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

Сжатие: сколько можно убрать без потерь

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

Ориентиры по качеству

• Для фотографий в JPEG и WebP обычно хватает уровня качества около семидесяти пяти — восьмидесяти пяти процентов. Ниже начинаются заметные размытия на гладких поверхностях.
• Для изображений с мелким текстом и резкими линиями уровень выше, иначе вокруг букв появляются «ореолы».
• Для превью в списках можно сжимать сильнее, чем для главных изображений страницы.

Что проверять после сжатия

1. Нет ли полос на градиентах и небе.
2. Нет ли «кубиков» вокруг контрастных контуров.
3. Не потерялась ли чёткость логотипов и текста на изображении.
4. Сколько килобайт получилось в итоге.

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

Адаптивные изображения: разные файлы для разных экранов

Современный HTML позволяет браузеру самому выбирать подходящий файл. Атрибут «srcset» перечисляет версии разной ширины, а атрибут «sizes» сообщает, какую долю экрана занимает картинка. Браузер учитывает ширину окна, плотность экрана и скорость соединения, и скачивает именно то, что нужно.

Элемент «picture» идёт дальше: он позволяет предложить разные форматы и даже разные кадрирования. Например, широкий баннер для компьютера и вертикально обрезанный вариант для смартфона, где важное остаётся в центре. Если браузер не поддерживает современный формат, он берёт запасной.

Этот подход устраняет ещё одну проблему: «прыжки» страницы при загрузке. Для каждого изображения нужно указывать ширину и высоту, чтобы браузер заранее зарезервировал под него место. Иначе текст сдвигается, когда картинка подгружается, и посетитель случайно нажимает не туда. Это один из показателей визуальной стабильности, который оценивают поисковые системы.

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

Зачем скачивать изображение, которое человек увидит только после прокрутки на три экрана вниз? Ленивая загрузка откладывает получение картинок до того момента, когда они приближаются к видимой области. Для этого достаточно атрибута «loading» со значением «lazy» у изображений ниже первого экрана.

Где ленивая загрузка нужна, а где вредна

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

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

Имена файлов, alt и подписи

Эти детали часто воспринимают как формальность, а зря. Они влияют и на доступность, и на поисковое понимание.

Имена файлов

Файл «IMG_4837» ничего не говорит. Файл «kuhnya-iz-dereva-v-stile-loft» уже объясняет содержимое. Используйте латиницу, строчные буквы, дефисы вместо пробелов и короткое описание сути. Не нужно набивать ключевые слова: достаточно точно отразить, что на фото.

Атрибут alt

Альтернативный текст нужен для программ чтения с экрана, а также отображается, если изображение не загрузилось. Хороший alt описывает, что изображено и зачем оно здесь, коротко и по делу.

• Плохо: «картинка», «фото 1», «купить сайт недорого Москва дешево».
• Хорошо: «Менеджер показывает макет главной страницы клиенту на встрече».
• Для чисто декоративных изображений оставляйте пустой alt, чтобы программы чтения не отвлекали человека лишними описаниями.
• Если изображение является ссылкой или кнопкой, alt должен описывать действие, а не картинку.

Доступность — не только забота о людях с особенностями, но и общий признак качества сайта. Подробнее об этом в статье про доступность сайта.

Подписи и окружающий текст

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

Иконки, логотипы и графика интерфейса

Небольшие элементы оформления часто забывают оптимизировать, хотя именно их на странице десятки. Несколько советов:

• Делайте иконки в SVG и объединяйте их в набор, чтобы не загружать каждую отдельным запросом.
• Для одноцветных иконок используйте цвет через CSS, а не отдельные файлы для каждого состояния.
• Простые декоративные фоны и градиенты рисуйте средствами CSS, а не картинками. Подробнее о том, как аккуратно их использовать, — в статье про градиенты в интерфейсах.
• Следите за единым стилем: толщина линий, скругления, размер. Правила — в материале про иконки на сайте.

Фотографии и иллюстрации: качество исходников

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

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

Автоматизация: чтобы не сжимать вручную

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

• Автоматическое уменьшение до разумной максимальной ширины.
• Создание набора размеров для адаптивной выдачи.
• Конвертация в современные форматы с запасным вариантом.
• Сжатие с заранее подобранными параметрами.
• Удаление служебных метаданных, которые добавляют вес, а иногда раскрывают лишнее, например место съёмки.
• Заполнение alt по умолчанию из названия записи с возможностью правки.

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

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

Если изображения для вас важный источник трафика, помогите поисковику их найти. Убедитесь, что картинки доступны для обхода и не закрыты от индексации. Для сайтов, где изображения подгружаются скриптами, можно добавить их в карту сайта. Подробнее о настройках индексации — в статье про robots.txt и sitemap.xml.

Отдельно обратите внимание на права: используйте только те изображения, на которые у вас есть право, и храните подтверждения. Чужие картинки со стоков без лицензии — частая причина претензий.

Типичные ошибки

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

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

1. Откройте страницу в инструментах разработчика и отсортируйте запросы по размеру. Самые тяжёлые файлы видны сразу.
2. Запустите проверку скорости и посмотрите рекомендации по изображениям.
3. Проверьте страницу на медленном соединении, имитируемом в инструментах браузера.
4. Убедитесь, что при отключённой загрузке картинок страница осмысленна: видны alt и подписи.
5. Сравните общий вес страницы до и после. Хорошим результатом считается снижение вдвое и более для страниц, где фото составляют основу.

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

Чек-лист оптимизации изображений

1. Для каждого типа изображений выбран подходящий формат.
2. Фото сохраняются в современных форматах с запасным вариантом.
3. Логотипы и иконки выполнены в SVG.
4. Размеры файлов соответствуют размерам отображения с запасом для плотных экранов.
5. Качество сжатия проверено визуально.
6. Настроены адаптивные версии через srcset и picture.
7. У всех изображений указаны ширина и высота.
8. Ленивая загрузка включена для картинок ниже первого экрана и выключена для главной.
9. Имена файлов осмысленные, alt написан по делу.
10. Обработка при загрузке автоматизирована.

Итог

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

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