Скорость и доступность
Картинки на сайте: три ошибки, которые есть почти у каждого
Картинки это самая тяжёлая часть обычной страницы и самая простая для исправления. Мы посмотрели, что лежит на главных страницах живых сайтов: старый формат, отсутствие отложенной загрузки и не заданные размеры.
Что мы измерили
Мы скачали главные страницы 128 сайтов и разобрали всю разметку картинок на них: 10 361 тег. Медианная главная содержит 52 картинки, самая насыщенная 533.
Отдельно самая массовая находка, которая почти не обсуждается: у 79 процентов картинок не заданы ширина и высота в разметке, а на 47 сайтах их нет ни у одной картинки вовсе. Именно из-за этого содержимое страницы прыгает при загрузке.
Разобраны главные страницы в августе 2026. Считалась разметка, а не файлы: то, что видно в исходном коде страницы. Выборка не случайная: это сайты, которые проверяли мы, в основном малый и средний бизнес на WordPress и Битриксе. Цифры описывают этот корпус, а не весь рунет.
Ошибка первая: старый формат
WebP при одинаковом качестве весит примерно на четверть меньше JPEG и заметно меньше PNG. Формату десять лет, его понимают все браузеры, которыми пользуются живые люди. При этом 63 процента проверенных главных не содержат ни одной картинки в современном формате, а тег picture с запасным вариантом используют всего 18 сайтов.
Это самая дешёвая экономия из существующих: содержимое сайта не меняется, вёрстка не трогается, посетитель ничего не замечает, кроме того, что страница пришла быстрее.
Ошибка вторая: у картинки нет alt
Атрибут alt отсутствует у 13 процентов картинок в нашем корпусе, всего 1 315 штук. Хотя бы одна такая картинка нашлась на 45 процентах сайтов.
Важное различие, которое часто путают: пустой alt это не ошибка. Он есть на 118 сайтах из 128, и для декоративной картинки он правильный: программа чтения с экрана её пропустит. Ошибка это когда атрибута нет совсем, потому что тогда читалка произносит имя файла целиком.
Что писать в alt: то, что человек увидел бы вместо картинки. Для товара это его вид и отличительный признак, для схемы её смысл, для фотографии объекта что на ней изображено. Ориентир по длине примерно до ста знаков: это строка, которую читалка произнесёт вслух целиком, и слушать перечисление ключевых слов человеку неприятно.
Чего в alt быть не должно: слов «картинка», «фото» и «изображение» в начале, потому что читалка и так сообщает, что перед ней картинка; названия файла; и перечисления через запятую вариантов одного запроса. Последнее поисковики распознают как попытку набить страницу словами.
Ошибка третья: всё грузится сразу
Отложенная загрузка означает, что браузер скачивает картинку тогда, когда посетитель до неё долистал. На длинной главной это половина трафика, которую можно просто не тратить. В корпусе отложена половина картинок, но 32 процента сайтов не откладывают ни одной, то есть грузят весь низ страницы, до которого доходит меньшинство посетителей.
Обратная крайность встречается тоже и вредит сильнее: отложить главную картинку первого экрана. Тогда браузер сначала решает, что она не нужна, потом обнаруживает её на экране и начинает грузить. Первый экран из-за этого показывается позже, а не раньше.
Как проверить свои картинки
- Откройте главную, нажмите правую кнопку и выберите просмотр исходного кода. Поиском по странице найдите <img и посмотрите на первые десять тегов: есть ли alt, есть ли width и height, чем заканчивается имя файла.
- В инструментах разработчика откройте вкладку сети, поставьте фильтр на картинки и перезагрузите страницу. Сразу видно, сколько мегабайт уходит на изображения и какие файлы самые тяжёлые.
- Проверьте, отложены ли картинки в подвале: если при перезагрузке грузятся все, отложенной загрузки нет.
Порядок исправления
- Сжать и перевести в WebP всё, что уже лежит в библиотеке файлов, оставив запасной формат.
- Задать размеры в разметке, чтобы страница перестала прыгать.
- Включить отложенную загрузку всему, что ниже первого экрана, и явно исключить главную картинку.
- Дописать alt там, где картинка несёт смысл, и оставить пустым там, где она украшение.
- Настроить обработку при загрузке, чтобы новые файлы приходили уже сжатыми, иначе через полгода всё вернётся.
Что делаем мы
Пакетная конвертация с проверкой качества по каждому файлу, размеры в разметке, отложенная загрузка с исключением первого экрана, описания к содержательным картинкам. Входит в пакет «Ускорить сайт», на WordPress 17 000 ₽ – 28 000 ₽. Оригиналы остаются в резервной копии, которая делается до начала работ.
Источники и нормы
Собственные цифры выше получены замерами Фиксометра. Определения, пороги и правила сверены с первичными документами:
- Google Search Central: image SEO best practices. Текстовые описания, доступность изображений роботу и требования к качеству страницы.
- web.dev: Image performance. Выбор формата, размера и способа доставки изображений.
- web.dev: browser-level image lazy loading. Работа loading=lazy и ограничение: изображения первого экрана откладывать нельзя.
Частые вопросы
Пустой alt это ошибка?
Нет. Пустой alt у декоративной картинки это правильно: программа чтения с экрана её пропустит, а не станет читать имя файла. Ошибка это отсутствие атрибута вовсе, потому что тогда содержимое картинки для незрячего посетителя и для поиска по картинкам просто не существует.
Влияет ли alt на позиции?
На позиции страницы напрямую почти нет. На поиск по картинкам влияет заметно, а для интернет-магазина это отдельный источник посетителей. Плюс это требование доступности: сайт без описаний картинок недоступен людям, которые пользуются программой чтения с экрана.
Все ли браузеры понимают WebP и AVIF?
WebP понимают все актуальные браузеры, включая мобильные. AVIF почти все. Для остальных оставляется запасной JPEG через тег picture, и браузер сам берёт тот формат, который умеет.
Не испортится ли качество?
При правильных настройках разница глазом не видна: WebP при том же качестве весит на четверть меньше JPEG. Конвертацию делают с проверкой по каждому файлу, а оригиналы остаются в резервной копии.
Зачем картинке width и height, если размеры задаются стилями?
Чтобы браузер знал место под картинку до того, как она загрузится. Без этого текст сначала рисуется, а потом прыгает вниз, когда картинка встала на место. Это отдельная метрика Google, она называется CLS, и она портит впечатление от сайта даже на быстром интернете.
Проверьте свой сайт
Бесплатная проверка соберёт картинки со всех обойдённых страниц, посчитает их вес, покажет, у каких нет описания и какие можно перевести в современный формат. Рядом будет видно, как это связано с весом страницы и временем показа первого экрана.