Изображения на сайте: вес, форматы и alt, от которых зависит скорость и трафик

Шаг 1. Замерьте, сколько весят картинки прямо сейчас

Разговор про изображения почти всегда начинается одинаково: «у нас вроде нормально грузится». Проверяется это за пятнадцать минут, и дальше вы спорите не о вкусах, а о килобайтах.

Замер в браузере. Откройте сайт на компьютере и нажмите F12 — откроется панель разработчика. Перейдите на вкладку Network (Сеть), в списке фильтров выберите Img, затем обновите страницу сочетанием Ctrl+F5, чтобы не считался сохранённый в браузере кэш. Внизу панели появится строка с количеством запросов и объёмом переданных данных. Запишите три числа: сколько картинок грузится, сколько они весят вместе, сколько весит самый тяжёлый файл. Отсортируйте список по колонке Size — сверху окажутся главные виновники, обычно их четыре-пять штук.

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

Ориентиры из практики. В наших проектах страница каталога до работы обычно весит 3–6 МБ, и на изображения приходится 70–90% этого объёма. После переборки тот же шаблон, как правило, укладывается в 0,9–1,5 МБ. Одна фотография товара шириной около 1000 пикселей в современном формате обычно занимает 60–120 КБ, фон первого экрана — 150–250 КБ. Если у вас отдельный файл весит 2–4 МБ, это не «немного тяжеловато», это примерно в двадцать раз больше рабочей нормы.

Замер снаружи. Прогоните те же три адреса через инструмент проверки скорости страниц от Google. Смотрите вкладку для мобильных устройств и показатель LCP — время до отрисовки самого крупного элемента экрана. В большинстве случаев этот «самый крупный элемент» и есть ваша главная картинка. В блоке рекомендаций инструмент прямо назовёт файлы, которые стоит уменьшить, отдать в другом формате или отложить — это готовый список задач для подрядчика, его можно переслать без пересказа.

Замер на живой аудитории. Лабораторный тест — это один прогон с одного канала. Реальность показывает Метрика: Отчёты → Мониторинг → Время загрузки страниц. Там видно, сколько ждут ваши посетители, и данные раскладываются по устройствам и по адресам через группировки. Смотрите не среднее значение, а медиану: среднее вытягивают вверх единичные аномалии вроде человека в поезде. Если мобильные грузятся дольше десктопа больше чем в полтора раза, в подавляющем большинстве случаев виноваты именно изображения.

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

Шаг 2. Форматы: чем открывать какую задачу

Правило простое: формат подбирают под тип картинки, а не выбирают «один на весь сайт». Фотография, схема и логотип сжимаются принципиально по-разному, и попытка держать всё в PNG утяжеляет страницу в разы.

Как перевести сайт на современные форматы, по шагам.

1. Выясните, что умеет ваша система управления. На WordPress и Битриксе конвертация обычно закрывается модулем: он хранит оригинал и отдаёт браузеру облегчённую копию, ничего не ломая в админке. На самописном сайте это делает разработчик на уровне шаблона.
2. Включите WebP как основной формат, а JPEG оставьте запасным через конструкцию picture/source — тогда редкий старый браузер получит привычный файл и не покажет пустоту.
3. Задайте качество сжатия 75–82 для фотографий. Разницу с «максимальным» на глаз обычно не видно даже на большом мониторе, а вес падает в 2–3 раза. Ставить 100 бессмысленно: вы платите мегабайтами за то, чего никто не различает.
4. Прогоните весь каталог пакетно, а не руками. Одна аккуратно обработанная карточка ничего не изменит — тяжесть создаёт масса из тысячи файлов.
5. Через неделю повторите замер из первого шага и сравните три записанных числа. Если вес не изменился, значит модуль отдаёт новый формат не всем или старые файлы остались в шаблоне.

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

SVG — это не картинка, а инструкция для браузера, поэтому логотип в нём выглядит одинаково чётко и на телефоне, и на мониторе с высокой плотностью пикселей, занимая при этом килобайты. Логотип в PNG на 400 КБ, который грузится на каждой странице, — типовая находка при аудите.

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

Шаг 3. Размеры, srcset и ленивая загрузка

Сжатие — половина дела. Вторая половина: телефону нельзя отдавать ту же картинку, что монитору. Экран смартфона показывает превью каталога шириной 400–500 пикселей, а в файле лежит 3000 — человек оплачивает трафиком в шесть раз больше данных, чем видит.

Как определить нужные ширины. Откройте панель разработчика (F12), наведите курсор на картинку в списке элементов — браузер покажет две величины: реальный размер файла и размер, в котором картинка отображается. Если первое число больше второго более чем вдвое, файл избыточен. Пройдите так по четырём-пяти типовым местам и составьте таблицу ширин для разработчика.

Что просить у разработчика, по пунктам.

1. Генерировать 3–4 версии каждой картинки при загрузке и подставлять их через srcset и sizes. Это стандартный механизм: браузер сам выбирает подходящий файл под ширину экрана и плотность пикселей.
2. Прописать у каждой картинки атрибуты width и height (или соотношение сторон в стилях). Без них вёрстка «прыгает» во время загрузки: человек метится в кнопку, а под пальцем оказывается другая ссылка. Поисковые системы этот скачок измеряют отдельным показателем и учитывают в оценке удобства.
3. Поставить loading="lazy" всему, что ниже первого экрана: такие файлы начнут грузиться только при прокрутке. На длинной странице каталога это обычно срезает 40–70% стартового веса.
4. Не ставить ленивую загрузку на главную картинку первого экрана — эффект будет обратным. Наоборот, ей задают приоритет через fetchpriority="high" и, если это ключевой элемент, предзагрузку.
5. Отдавать статику с длинным сроком кэширования и через сжатие на сервере, а имена файлов версионировать, чтобы обновлённая картинка не застревала у постоянных посетителей.

Отдельно про карусели и слайдеры. Слайдер на восемь баннеров, где все восемь грузятся сразу, — это минус 1,5–3 МБ на каждом заходе. Первый слайд грузим сразу, остальные — лениво. По нашему опыту, дальше второго слайда доходит малая часть посетителей, поэтому чаще выгоднее вовсе заменить карусель одним статичным блоком с понятным предложением.

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

Шаг 4. Alt, имя файла и подписи: что реально работает

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

Как заполнять, по шагам.

1. Опишите словами то, что реально изображено, будто рассказываете собеседнику по телефону: 5–12 слов, обычный человеческий язык.
2. Уберите слова «фото», «изображение», «картинка»: программа чтения и так объявляет, что это изображение, и получается «изображение: фото кухни».
3. Не вставляйте список ключевых фраз через запятую. Перечисление вида «купить недорого с доставкой» поиск читает как попытку накрутки, а человек с экранной программой — как мусор в середине текста.
4. Декоративным элементам — разделителям, узорам, фоновым подложкам — поставьте пустой alt="". Тогда программа их пропустит и не будет зачитывать бессмысленные названия файлов.
5. Иконки-ссылки и кнопки-картинки описывайте по действию: не «стрелка», а «перейти к следующей фотографии».
6. Не повторяйте один и тот же alt на всех фото карточки. Если снимков пять, различайте их по ракурсу и детали: общий вид, фурнитура, разрез, монтаж, упаковка.

Имя файла — вторая половина работы. Файл вида IMG_20260714_113045.jpg не сообщает ничего ни поиску, ни вам самим через полгода. Переименуйте в транслит с дефисами по схеме «что-это-модель-ракурс». Делайте это до загрузки: переименование после публикации меняет адреса файлов, и уже накопленные показы в поиске по картинкам обнуляются.

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

Ориентиры. У сайтов, которые приходят к нам на аудит, alt заполнен обычно у 20–40% изображений, а заполнен осмысленно — у единиц. Поиск по картинкам в наших проектах обычно приносит порядка 2–7% органических визитов; в мебели, отделке, товарах для интерьера доля бывает заметно выше, потому что люди там ищут глазами. Это не «главный канал», но это трафик, который вы уже оплатили съёмкой.

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

Типовая ошибка: владелец сам залил фото с телефона

Самая частая поломка приходит не от подрядчика, а из админки. Владелец добавляет новинку сам: снимает на телефон, заходит в панель, грузит файл как есть. Снимок на 12 мегапикселей весит 4–6 МБ и имеет ширину около 4000 пикселей. Дальше возможны три сценария, и все плохие.

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

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

Как чинить, по шагам.

1. Включите в системе управления автоматическое ограничение при загрузке: максимальная сторона 1600–2000 пикселей, качество 80, очистка служебных данных. Настраивается это один раз и, как правило, снимает основную часть проблемы.
2. Проверьте, какой именно файл выводится в шаблоне карточки и в списке каталога. В панели разработчика наведите курсор на картинку и посмотрите её реальный размер — если там 4000 пикселей, шаблон берёт оригинал.
3. Прогоните архив: пакетная переобработка уже загруженных файлов обычно даёт больше, чем любые дальнейшие оптимизации.
4. Напишите короткую инструкцию для тех, кто наполняет сайт: три строчки про ширину, формат и имя файла на видном месте в админке.

Три соседние ошибки той же природы. Первая: скриншот сохранён в PNG и весит 1,5 МБ вместо 120 КБ — для скриншотов интерфейса PNG уместен, но его тоже нужно прогонять через сжатие. Вторая: картинку «уменьшили в вёрстке», то есть файл шириной 3000 пикселей показывают в блоке шириной 300 — браузер всё равно скачивает весь файл целиком. Третья: иконки соцсетей и оплаты подгружаются двадцатью отдельными файлами вместо одного набора — каждый запрос это отдельное обращение к серверу.

Ориентир по эффекту. В наших проектах наведение порядка только с изображениями обычно снижает вес типовой страницы в 2–4 раза, а время до отрисовки первого экрана на мобильных сокращается на 0,8–2 секунды. Дальше эффект зависит от сервера и скриптов, и одними картинками его уже не вытянуть. Зато цена работ невелика: это, как правило, 1–3 дня разработчика, а не переделка сайта.

Чтобы такие вещи не всплывали через полгода после запуска, требования к весу и форматам стоит вносить в приёмку сразу — как это оформить, разобрано в чек-листе приёмки сайта. Пункт формулируется проверяемо: «страница каталога на мобильном не тяжелее 1,5 МБ, ни один файл не больше 300 КБ» — такое либо выполнено, либо нет, спорить не о чем.

Что смотреть в Метрике, Вебмастере и Директе

Работа считается сделанной не когда «стало быстрее», а когда это видно в трёх местах. Ниже — конкретные разделы и порядок нажатий.

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

Второе — Отчёты → Содержание → Популярное. Выпишите 10–15 страниц с наибольшим числом просмотров и чините их первыми: оптимизировать редкую страницу так же трудоёмко, как ходовую, а отдача несопоставима. Третье — Отчёты → Технологии → Разрешение дисплея: он показывает, какие ширины экранов у вас реально есть, и заодно объясняет разработчику, зачем нужны версии по 400–500 пикселей. Четвёртое — Вебвизор: посмотрите десяток записей мобильных сессий подряд. Секунды пустого экрана в записи убеждают лучше любых показателей. Пятое — доля отказов по устройствам: если на смартфонах она выше, чем на десктопе, на 10 пунктов и больше, это почти всегда скорость первого экрана. Какие ещё отчёты держать под рукой постоянно, собрано в материале про отчёты Метрики, которые действительно нужны.

Вебмастер. Начните с раздела «Диагностика → Диагностика сайта»: там всплывают проблемы с ответом сервера и доступностью файлов. Затем «Индексирование → Статистика обхода» — здесь видно, что робот скачивает и какие коды ответа получает; если он тратит обходы на тысячи вариаций одной картинки, это повод закрыть служебные каталоги. Дальше «Инструменты → Проверка ответа сервера»: вставьте адрес не страницы, а самого файла картинки и посмотрите заголовки — есть ли кэширование и какой отдаётся тип файла. Полезно также проверить, что изображения не перекрыты правилами robots.txt. Подробный маршрут по разделам — в тексте о том, что смотреть в Яндекс Вебмастере.

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

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

2026 год: мобильные, нейропоиск и картинки

Три вещи изменили цену вопроса именно сейчас, и их стоит держать в голове, планируя работы.

Мобильный трафик стал основным окончательно. В наших проектах доля визитов со смартфонов обычно 65–80%, в услугах для частных клиентов — выше. Это значит, что «эталон» для проверки — не рабочий ноутбук с проводным интернетом, а телефон на обычной сотовой связи в помещении. Любое решение о картинках сначала оценивают на нём. Практический вывод: версия изображения под мобильный экран важнее, чем версия под ретину десктопа, хотя исторически делают наоборот.

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

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

Реклама. Единая перфоманс-кампания и товарные форматы берут изображения из фида — там свои требования к пропорциям, минимальной стороне и отсутствию текста на картинке. Файл, который прекрасно смотрится на сайте, может быть отклонён в кампании, поэтому под фид готовят отдельный набор. Если вы размещаете креативы через блогеров или посевы в сообществах, каждое такое размещение — реклама: нужен идентификатор erid, пометка «реклама», указание рекламодателя и последующая отчётность в ЕРИР. Ответственность за нарушения установлена КоАП, зависит от состава, актуальные суммы и порядок стоит сверить с юристом.

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

Что делать в ближайший месяц. Снять замеры, включить ограничение размера при загрузке, перевести фото на WebP с запасным JPEG, добавить srcset и ленивую загрузку, пройти alt на ходовых страницах и записать требования в регламент. Это не разовый проект: через полгода без правил сайт снова обрастает мегабайтами, потому что контент наполняют живые люди, а не скрипт.