Картинки на сайте: вес, формат и подписи

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

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

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

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

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

Форматов много, но выбор для обычного сайта сводится к четырём.

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

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

PNG — для скриншотов интерфейсов, логотипов с резкими краями и прозрачности, где важна идеальная чистота границ. Весит больше, но передаёт мелкие детали и текст точнее.

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

JPEG можно оставить там, где он уже стоит и всё работает, но для новых картинок лучше брать WebP.

Отдельно про анимации: анимированный GIF весит неприлично много. Если у вас такие есть, перевод в анимированный WebP даёт самый заметный выигрыш из всех возможных.

У каждой картинки в коде есть текстовое описание — атрибут alt. Посетитель его не видит, пока картинка грузится нормально, и именно поэтому его чаще всего не заполняют вовсе.

Как выглядит плохо. Пусто. Или «картинка1». Или имя файла из фотоаппарата вроде IMG_20260312. Или, что хуже всего, перечисление ключевых слов: «ремонт техники самара недорого срочно». Последнее не помогает в поиске, зато выглядит как попытка обмануть — и машиной, и человеком воспринимается соответственно.

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

Несколько практических правил. Длина — до ста с небольшим символов, дальше описание перестаёт читаться. Ключевое слово можно употребить, если оно естественно вписывается в описание, но специально вставлять не нужно. И не начинайте с «изображение» или «фото» — это и так понятно из контекста.

Отдельный случай — декоративные картинки: разделители, фоновые узоры, элементы оформления. У них подпись должна быть пустой, без текста. Так читалки для незрячих просто пропустят их, а не будут озвучивать бессмыслицу.

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

Поиск по картинкам. Яндекс.Картинки и Google Images — отдельный канал, про который редко вспоминают. Для некоторых тематик — товаров, интерьеров, работ «до и после» — оттуда приходят живые люди. Без подписи ваша картинка для этого поиска почти не существует.

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

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

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

После размера и формата есть ещё несколько вещей, которые дают заметный эффект.

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

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

Размеры в коде. Каждой картинке стоит заранее указать ширину и высоту. Тогда браузер сразу резервирует под неё место, и при загрузке содержимое страницы не прыгает. Это та самая проблема, когда человек целится в кнопку, а в последний момент всё уезжает вниз.

Понятные имена файлов. Вместо IMG_20260312.jpg — remont-stiralnoy-mashiny.webp. Мелочь, но она тоже помогает поиску по картинкам понять, что внутри.

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

Порядок работы, который не требует разработчика.

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

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

Затем переведите в WebP. Бесплатных онлайн-сервисов для этого много, разбираться не нужно: загрузили, скачали, заменили на сайте.

И пропишите подписи. Это самая скучная часть, но делается она один раз. Начните с картинок на страницах услуг и в кейсах — там они приносят больше всего пользы.

После всего замерьте скорость снова и сравните с исходной точкой. Обычно разница заметна сразу, и это тот редкий случай, когда результат виден в тот же день.

Если картинок на сайте сотни и руками это не осилить, нужна автоматическая обработка на стороне сайта — такие вещи закладываются при разработке или добавляются потом. А что ещё тормозит сайт помимо картинок, показывает SEO-аудит.

Разберём ваш сайт бесплатно: посмотрим, сколько весят картинки и что даст их оптимизация → оставить заявку