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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SEO

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