SEO

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

14.10.2026 · 9 мин чтения

Изображение проходит через модуль сжатия для ускорения сайта

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

Сначала определяю задачу изображения

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

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

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

Выбираю формат по содержанию

Универсального формата нет. Для фотографий и сложных градиентов я в первую очередь проверяю AVIF и WebP, а JPEG оставляю как простой совместимый вариант. Для растровой графики с прозрачностью подходят WebP или PNG. Логотипы, пиктограммы и несложные схемы обычно выгоднее хранить в SVG, предварительно очистив код от редакторского мусора.

Формат	Где использую	Что проверяю
AVIF	Фотографии и сложные иллюстрации	Качество мелких деталей и запасной формат
WebP	Фото, графика, прозрачность	Артефакты после сжатия
JPEG	Фотографии без прозрачности	Баланс качества и веса
PNG	Растровая графика с прозрачностью	Не используется ли для обычного фото
SVG	Иконки, логотипы и простые схемы	Безопасный и очищенный код

Набор карточек для выбора формата веб-изображения

Формат выбираю по типу графики, а не по привычке или одному показателю размера.

Сжимаю до видимого предела

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

Для разовой обработки мне подходит Squoosh или другой сервис с визуальным сравнением. Для большого каталога настраиваю автоматическую генерацию вариантов на стороне CMS, сборки или CDN. Важно, чтобы система не пережимала уже подготовленный файл многократно: повторное сжатие с потерями постепенно разрушает детали.

Отдаю подходящий размер каждому экрану

Одного большого изображения, уменьшенного CSS, недостаточно. В атрибуте srcset я перечисляю доступные варианты по ширине, а в sizes объясняю браузеру, сколько места займёт картинка при разных размерах окна. Браузер сам выбирает подходящий ресурс с учётом разметки и плотности пикселей. Если меняется сам кадр, использую picture и отдельные источники для разных условий.

Ширину и высоту изображения задаю в HTML или через aspect-ratio. Тогда браузер резервирует место до загрузки файла, и соседний текст не прыгает. Свойство object-fit помогает аккуратно заполнить контейнер, но не заменяет правильную обрезку: важная часть фотографии не должна исчезать на мобильном экране.

Адаптивные версии изображения для компьютера, планшета и телефона

Посетитель получает не самый большой файл, а вариант, подходящий его экрану и макету.

Настраиваю приоритет и отложенную загрузку

Изображения ниже первого экрана загружаю отложенно с loading="lazy". Но для главной картинки первого экрана этот режим обычно вреден: она часто становится крупнейшим видимым элементом и должна начать загружаться рано. Для неё я оставляю обычную загрузку, при необходимости задаю высокий приоритет и убеждаюсь, что адрес файла присутствует в исходном HTML, а не появляется только после выполнения скрипта.

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

Пишу alt для людей и поиска

Альтернативный текст я формулирую как короткую замену изображению в контексте конкретной страницы. Для товара называю сам товар и существенный вид или ракурс. Для схемы передаю её основную мысль. Не начинаю с фразы «изображение» и не перечисляю ключевые слова. Если картинка декоративная и ничего не добавляет, оставляю пустой alt, чтобы скринридер мог её пропустить.

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

Проверяю результат на реальной странице

Финальную проверку я провожу не в папке с файлами, а в браузере. В панели Network смотрю, какой ресурс фактически скачался на мобильной и широкой версии, не дублируются ли запросы и работает ли отложенная загрузка. В Lighthouse и PageSpeed Insights ищу подсказки, а затем сверяю их с водопадом загрузки и данными реальных пользователей, если они накоплены.

Аудит сетки изображений, параметров сжатия и скорости

Проверяю не только вес файла, но и выбор источника, момент загрузки, размеры и визуальное качество.

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

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

SEO

Проверю изображения на вашем сайте

Найду тяжёлые файлы, неверные размеры и проблемы загрузки, затем соберу понятный список правок.

Леонид Стрельцов

Интернет-маркетолог и автор материала

Обо мне VK Telegram Max