Редактор получил фотографию товара и сразу загрузил исходник в карточку. На компьютере всё выглядит аккуратно. На смартфоне снимок появляется с задержкой, мелкая надпись на упаковке распадается после автоматического сжатия, а в HTML у картинки нет понятного описания.
Оптимизация изображений решает здесь три разные задачи: подготовить файл под место на странице, сохранить важные детали и передать смысл картинки пользователю и Яндексу. Сервис для сжатия выполняет только часть работы. Ниже проведём один товарный снимок от исходника до проверки опубликованной страницы.
Сначала определите роль изображения
Спросите, что потеряет посетитель, если файл не загрузится. Главное фото товара показывает внешний вид и свойства. Схема объясняет порядок действий, а иконка внутри кнопки обозначает функцию.
Фоновая текстура лишь поддерживает оформление. Эти изображения нельзя обрабатывать и описывать одинаково.
Для нашего снимка важны форма товара, цвет и надпись на упаковке. Значит, редактор проверяет их после каждого изменения. Если картинка только заполняет пустое место и ничего не объясняет, сначала подумайте, нужна ли она вообще: удалённый декор не требует сжатия, загрузки и дальнейшего контроля.
Подготовьте размеры под реальные места на странице
Размер исходника, размер файла и размер показа — разные характеристики. Конструктор может визуально уменьшить фотографию до маленькой карточки, но браузер всё равно получит большой оригинал. Слабое превью при увеличении, наоборот, теряет резкость.
Составьте карту использования снимка: карточка каталога, основное фото товара, увеличенный просмотр и мобильная версия. Для каждого места подготовьте подходящий вариант или настройте адаптивную выдачу через srcset. После публикации посмотрите в браузере, какой файл фактически загрузился при каждой ширине. Один огромный исходник во всех блоках означает, что работа ещё не закончена.
Выберите формат по содержанию файла
Формат выбирают по изображению, а не по моде. JPG и JPEG подходят для обычных фотографий. PNG нужен, когда важны прозрачность или чёткие графические границы.
WebP сравните с исходным вариантом на том же размере показа и внимательно проверьте мелкие детали, края и плавные переходы. GIF оставляйте для простой анимации, если движение действительно помогает понять содержание. Не переводите весь каталог в один формат одной командой.
Возьмите типичный снимок, изображение с мелкими деталями и файл с прозрачностью. Подготовьте по два подходящих варианта и сравните их рядом. Побеждает не расширение само по себе, а меньший файл, который сохраняет нужное качество и корректно работает в шаблоне.
Сжимайте по наблюдаемому качеству
Универсального процента сжатия нет. Контроль качества начинается с важных деталей: приблизьте логотип, границу материала, лицо модели, мелкий текст и плавные переходы цвета. Если вокруг контуров появились ореолы, текст распался или градиент превратился в полосы, вернитесь к предыдущему варианту.
Сравнивайте файлы на реальном фоне и в том размере, который увидит посетитель. Ошибка часто скрывается в отдельном окне редактора и становится заметной только внутри карточки. Зафиксируйте выбранный формат, итоговый размер и место показа. Тогда следующая загрузка не начнётся с нового случайного эксперимента.
Пишите alt по функции изображения
Alt передаёт смысл картинки в контексте страницы. Для главного снимка можно написать: «настольная лампа с латунным основанием и зелёным плафоном». Если та же лампа показана крупным планом ради переключателя, описание меняется: «поворотный выключатель на основании лампы». Фраза «купить лампу недорого фото цена» не описывает изображение и выглядит как набор запросов.
Для функциональной иконки назовите действие, если без неё кнопка непонятна. Чисто декоративной картинке оставьте пустой атрибут alt="", чтобы описание не повторяло соседний текст. Схему или график нельзя спрятать в одну короткую фразу: вынесите вывод обычным текстом рядом. Яндекс отдельно предупреждает, что важная информация внутри изображения не заменяет текст страницы.
Сделайте изображение доступным Яндексу
Робот Яндекс Картинок использует alt и текстовый контекст, чтобы понять содержание файла. Размещайте иллюстрацию рядом с тем фрагментом, который она поясняет. Если подпись помогает читателю, добавьте её. Файл называйте по содержанию, а не IMG_4827.jpg.
Проверьте техническую доступность:
- URL файла открывается без авторизации и сервер возвращает 200 OK;
- robots.txt не закрывает нужную папку;
- изображение присутствует в обычном HTML, а не появляется только как фон или после сложного сценария JavaScript;
- alt, подпись и соседний текст относятся именно к этому файлу;
- после замены файла старый URL не ведёт на ошибку внутри опубликованной страницы.
Справка Яндекса указывает, что фоновые и раскрываемые скриптом картинки обычно не индексируются. Для труднодоступных изображений можно использовать Sitemap, но файл карты не исправит закрытый URL, неверный ответ сервера или отсутствующий контекст.
Проверьте опубликованную страницу
Вернёмся к снимку из начала статьи. Релиз можно принимать, когда карточка и крупный просмотр получают подходящие варианты, надпись на упаковке остаётся читаемой, URL отвечает кодом 200, а alt описывает товар без списка ключей. На смартфоне изображение не должно вытеснять цену и кнопку за пределы первого экрана или менять размер уже после начала чтения.
Откройте инструменты разработчика и перезагрузите страницу без кеша. Сверьте загруженный файл, его размеры и сетевой ответ. Затем проверьте HTML и отправьте страницу на проверку в Яндекс Вебмастере. Скорость оценивайте отдельно для всей страницы: руководство о скорости сайта и Core Web Vitals поможет не приписывать одному изображению чужие задержки.
Страницу нельзя принимать, если испорчена важная деталь, один огромный исходник используется во всех местах, URL закрыт, сервер возвращает ошибку, alt не описывает картинку или важный текст остался только внутри изображения.
Если проблема повторяется во всём каталоге, исправляйте шаблон и правила загрузки, а не отдельные карточки. Массовую проверку файлов, ответов сервера, HTML и внутренних шаблонов включите в технический SEO-аудит и план продвижения сайта.
Частые вопросы
Нужно ли переводить все изображения в WebP?
Нет. Сравните WebP с подходящим исходным форматом на реальном размере показа. Выбирайте вариант, который уменьшает файл без заметной потери нужных деталей и корректно работает в шаблоне.
Нужен ли alt декоративной картинке?
Для чистого декора оставьте пустой alt="". Если картинка передаёт информацию или выполняет действие, опишите её смысл или функцию. Не заполняйте атрибут ключевыми словами ради наличия текста.
Гарантирует ли оптимизация изображения позиции?
Нет. Формат, размер и alt не гарантируют позиции или показы в Яндекс Картинках. После публикации проверяйте файл и разметку вместе с качеством и доступностью всей страницы.