Мы предлагаем

NEW CASE
Antana

Создаем цифровые решения, которые работают на бизнес

Стать клиентомСтать клиентом
Зателефонуйте нам +38 (066) 35-14-529

Сделаем первый шаг к вашему сайту — напишите нам

Закрыть
Инструменты

Аудит изображений

SEO и маркетинг

Может заинтересовать

Атрибуты alt, вес файлов, формат и отложенная загрузка.

Что проверяет аудит изображений

Изображения — обычно самая тяжёлая часть страницы. Две-три ошибки здесь стоят больше, чем всё остальное вместе.

Атрибут alt Описание для тех, кто не видит картинку: поисковые системы, читалки экрана, медленное соединение. Отсутствующий alt и пустой — разные вещи: пустой означает «декоративное», отсутствующий означает, что о нём забыли.
Вес файлов Фото с камеры на несколько мегабайт в шапке сайта — самая частая причина медленной загрузки. Взвешиваем файлы и показываем самые тяжёлые.
Размеры в разметке Без width и height браузер не знает, сколько места оставить, и вёрстка прыгает во время загрузки. Это прямо влияет на показатель CLS.
Современный формат Тот же кадр в webp весит на четверть меньше jpg без видимой разницы. Показываем, сколько изображений ещё в старых форматах.
Отложенная загрузка Картинки ниже экрана должны грузиться при прокрутке. Но первые два-три — наоборот не должны: откладывать их вредит скорости показа.
Битые ссылки Изображение, которое отдаёт 404. Видно сразу на странице, но при сотне картинок легко пропустить.

Каким должен быть alt

Главное правило: описывайте, что на изображении, а не втискивайте ключевые слова.

Содержательный «Красный диван в гостиной с деревянными ножками» лучше, чем «диван», и несравнимо лучше «диван-купить-киев».
До 125 символов Читалки экрана обрывают более длинные описания. Если не помещается — возможно, это подпись, а не alt.
Пустой для оформления Разделители, фоновые узоры, иконки рядом с текстом. Пустой alt говорит: «это не несёт смысла, пропусти».
Без «изображение» в начале Читалка экрана уже сказала, что это изображение. Повторять значит отнимать время слушателя.

Сколько должно весить изображение

До 100 КБ Обычная иллюстрация в тексте. В webp такой размер даёт вполне приличное качество для экрана.
До 200 КБ Большое изображение в шапке на всю ширину. Больше уже заметно на медленном соединении.
Больше 500 КБ Почти всегда означает, что файл не оптимизировали вообще. Сжатие уменьшит его впятеро без потери качества.
Вся страница Сумма всех изображений желательно до 1 МБ. На мобильном интернете каждые 500 КБ — это примерно секунда ожидания.

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

Чем пустой alt отличается от отсутствующего?
Пустой alt — это осознанное указание: изображение декоративное, читалка экрана должна его пропустить. Отсутствующий означает, что об атрибуте просто забыли, и программа попытается прочитать имя файла вслух. Поэтому мы считаем их отдельно.
Сколько должно весить изображение?
Иллюстрация в тексте — до 100 КБ, большое изображение в шапке — до 200 КБ. Больше 500 КБ почти всегда означает, что файл не оптимизировали вообще: сжатие уменьшит его впятеро без видимой потери качества.
Всем ли изображениям нужна отложенная загрузка?
Нет, и это важно. Первые два-три изображения экрана откладывать вредно: они формируют показатель LCP, и задержка их загрузки ухудшает оценку скорости. Откладывать нужно то, что ниже границы видимости.
Стоит ли переводить все изображения в webp?
Для сайта в основном да: тот же кадр весит на четверть меньше без видимой разницы. Но не для всего — логотипы и иконки лучше оставить в svg, а для печати нужны другие форматы. Оригиналы стоит хранить отдельно.
Telegram Viber Позвонить