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

Как оптимизировать изображения для сайта — вопрос, который владельцы задают последним, хотя решать его нужно первым. На типичной странице картинки занимают от половины до двух третей всего веса, и пока они не приведены в порядок, любая возня с минификацией скриптов даёт эффект в пределах погрешности. Сожмите фотографии — и мобильная версия ускорится заметнее, чем от переезда на дорогой хостинг. В SEO с 2005 года я вижу одну и ту же картину: сайт грузится пять секунд, разработчик предлагает переписать вёрстку, а на деле там четыре фотографии по три мегабайта, загруженные прямо с камеры.

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

За что отвечают изображения на странице

Три причины заниматься картинками, и каждая переводится в деньги.

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

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

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

Форматы: чем и когда пользоваться

Выбор формата — первое решение, и оно определяет вес сильнее любых настроек сжатия.

Формат	Для чего	Выигрыш по весу	Ограничения
WebP	Основной формат для фотографий и растровой графики	На 25–35% легче JPEG при том же качестве	Практически нет: поддерживается всеми актуальными браузерами
AVIF	Фотографии, где вес критичен	Ещё на 20–30% легче WebP	Дольше кодируется, поддержка чуть уже — нужен запасной вариант
JPEG	Совместимость, старые системы, обмен файлами	Базовый уровень	Тяжелее современных форматов, не умеет прозрачность
PNG	Прозрачность, скриншоты интерфейсов, чёткие линии	Проигрывает всем	Очень тяжёлый на фотографиях — там его быть не должно
SVG	Логотипы, иконки, схемы, простая графика	Единицы килобайт, масштабируется без потерь	Только для векторной графики; требует очистки от служебного мусора редактора

Практическое правило: фотографии переводите в WebP, иконки и логотипы — в SVG, PNG оставляйте только там, где действительно нужна прозрачность или пиксельная точность скриншота. Отдавать современный формат с запасным вариантом умеет любая современная CMS через тег picture или средствами сервера.

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

Размер и сжатие: две самые дорогие ошибки

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

Тему разбирал отдельно: «Краулинговый бюджет сайта: что это такое и как его оптимизировать».

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

Помогу с продвижением: продвижение сайта в Яндексе — вывожу сайты в топ Яндекса белыми методами.

Порядок действий такой:

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

Как проверить картинку на уникальность и зачем это нужно:

4:05

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

Порядок загрузки: что грузить сразу, а что потом

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

Приём	Что делает	Где применять	Типовая ошибка
Отложенная загрузка (loading="lazy")	Откладывает загрузку до приближения к области видимости	Все изображения ниже первого экрана	Повесить на главную картинку первого экрана — она начнёт грузиться позже и замедлит показ
Явные размеры (width и height)	Резервирует место до загрузки файла	Абсолютно все изображения	Пропустить — тогда содержание прыгает при загрузке, и это отдельный измеряемый показатель
Предзагрузка (preload)	Даёт браузеру команду скачать файл в приоритете	Только для одной главной картинки первого экрана	Отметить десяток изображений — приоритет обесценивается
Спрайты и встроенные SVG	Убирают лишние запросы к серверу	Мелкие иконки интерфейса	Встраивать так фотографии — раздувается сам HTML
Кэширование на стороне браузера	Повторные визиты не тянут файлы заново	Вся статика	Короткий срок жизни кэша или его отсутствие в настройках сервера

Про смещение содержания стоит сказать отдельно. Когда у картинки не заданы размеры, браузер сначала рисует текст, потом подгружает изображение и раздвигает вёрстку. Человек в этот момент промахивается мимо кнопки. Это раздражает пользователя и учитывается поисковиками как отдельная характеристика качества страницы. Лечится двумя атрибутами в теге.

Имя файла и альтернативный текст

Смысловая часть начинается с имени файла. IMG_20250714_113402.jpg не говорит машине ничего. montazh-teplogo-pola-v-vannoy.webp говорит достаточно много ещё до того, как робот посмотрит на содержание. Правила простые: латиница, слова через дефис, без пробелов, без транслитерации до нечитаемости, без перечисления ключевых фраз подряд.

Смежный материал по теме — «Бесплатное продвижение сайта в поисковиках».

Альтернативный текст — атрибут alt — описывает, что изображено, для того, кто картинку не видит. Это его единственная задача. Из неё вытекают все требования.

Ситуация	Плохо	Хорошо
Фотография работы	alt=»окна пвх купить москва недорого»	alt=»Установленное пластиковое окно с двумя створками в кирпичном доме»
Схема или чертёж	alt=»схема»	alt=»Схема подключения бойлера косвенного нагрева к двухконтурному котлу»
Логотип	alt=»логотип картинка изображение»	alt=»Логотип компании»
Декоративный элемент фона	alt=»красивый фон»	alt=»» — пустой атрибут, элемент пропускается
Изображение внутри ссылки	alt=»» (ссылка становится безымянной)	alt описывает, куда ведёт ссылка

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

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

Изображения в поиске по картинкам

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

• Файл должен быть доступен роботу. Проверьте, что папка с загрузками не закрыта в robots.txt — это встречается чаще, чем кажется, особенно после переносов сайта.
• Изображение должно лежать на той же теме. Робот определяет смысл картинки по окружающему тексту: заголовку раздела, ближайшим абзацам, подписи.
• Уникальность имеет значение. Стоковая фотография, встречающаяся на тысяче сайтов, почти не имеет шансов. Собственные снимки работ, товаров, помещений выигрывают именно за счёт уникальности.
• Отдельная карта сайта для изображений помогает крупным каталогам: она указывает роботу адреса файлов, которые иначе он может обойти не скоро.
• Размер имеет нижнюю границу. Слишком мелкие файлы в выдачу по картинкам обычно не попадают — ориентируйтесь минимум на 600 пикселей по большей стороне.

Микроразметка и структурированные данные

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

Если нужна помощь по теме — разработка сайта под ключ.

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

Массовая обработка на существующем сайте

Отдельная задача — привести в порядок сайт, где уже лежат тысячи картинок. Ручная переделка нереальна, порядок такой.

Если нужны детали, смотрите «Как SEO оптимизировать сайт».

1. Снять картину. Прогнать сайт краулером и выгрузить список изображений с весом и размерами. Сразу видно, какие файлы дают основной перегруз — обычно это два-три десятка тяжёлых снимков.
2. Начать с самых тяжёлых. Двадцать файлов весом от мегабайта дают больше выигрыша, чем тысяча мелких иконок.
3. Включить конвертацию на лету. Модуль CMS или настройка сервера, которая отдаёт WebP вместо исходника, закрывает вопрос для всего архива разом.
4. Разобраться с пустыми alt. Выгрузить список изображений без атрибута и заполнить их по шаблону для типовых элементов, а для содержательных — руками.
5. Проверить результат до и после. Замерить вес страниц и показатели скорости в панели вебмастера через две-три недели после правок, а не на следующий день.

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

Чем проверять результат

Без измерения любая оптимизация превращается в веру. Проверять нужно по трём направлениям.

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

Измеряйте на мобильном профиле с медленным соединением. На проводном интернете и мощном ноутбуке даже неоптимизированный сайт кажется быстрым — и именно поэтому проблему годами не замечают.

Частые вопросы

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

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

Сколько должна весить картинка? Ориентир для обычной иллюстрации в тексте — 60–150 килобайт, для большого изображения первого экрана — до 300, для иконки — единицы килобайт. Если фотография весит больше полумегабайта, почти наверняка она не уменьшена до нужного разрешения.

Стоковые фотографии вредят? Не вредят напрямую, но и не помогают: они не уникальны и в поиск по картинкам практически не попадают. Для страниц услуг и товаров собственные фотографии работают лучше ещё и потому, что повышают доверие — человек видит реальные работы, а не постановочные кадры.

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

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

Коротко

• Картинки дают основной вес страницы, поэтому оптимизацию скорости начинают с них, а не со скриптов и стилей.
• Формат решает больше настроек: фотографии — WebP, иконки и логотипы — SVG, PNG только ради прозрачности и скриншотов.
• Уменьшать до реальной ширины блока с двукратным запасом и сжимать с качеством 75–85; нормальный вес иллюстрации — 60–150 килобайт.
• Явные размеры в теге обязательны для всех изображений, отложенная загрузка — только для тех, что ниже первого экрана.
• Alt описывает изображение, а не повторяет ключевые фразы; имя файла — латиницей через дефис и по смыслу.
• В поиск по картинкам попадают доступные роботу, уникальные и достаточно крупные файлы, окружённые текстом по теме.

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