Картинки украшают страницы, но при неаккуратном подходе превращаются в главного врага скорости сайта. Огромные фотографии тормозят загрузку, пустые подписи не дают поисковику понять содержание, а лишние файлы съедают трафик посетителей на мобильном интернете. Правильная оптимизация изображений решает сразу несколько задач: ускоряет сайт, улучшает пользовательский опыт и открывает дополнительный канал трафика из поиска по картинкам.
Почему изображения важны для SEO
Поисковые системы давно научились индексировать картинки и показывать их в отдельных разделах выдачи. Для многих тематик, таких как рецепты, одежда, интерьер, путешествия, поиск по изображениям приносит заметную долю посетителей. Кроме того, картинки влияют на сайт косвенно.
- От веса изображений напрямую зависит скорость загрузки страницы, а скорость — один из факторов ранжирования и удобства.
- Качественные иллюстрации удерживают посетителей и улучшают поведенческие показатели.
- Описания и подписи дают поисковику дополнительный контекст о теме страницы.
- Изображения участвуют в расширенном виде сниппетов, особенно для товаров и рецептов.
Выбор формата
Формат определяет баланс между качеством и размером файла. Не существует универсально лучшего варианта, поэтому выбирайте под тип картинки.
| Формат | Лучше всего подходит | Особенности |
|---|---|---|
| JPEG | Фотографии с множеством оттенков | Сжатие с потерями, нет прозрачности |
| PNG | Скриншоты, логотипы, графика с прозрачностью | Без потерь, но файлы тяжёлые для фото |
| WebP | Почти любые изображения | Меньше размер при том же качестве, есть прозрачность |
| AVIF | Фото и графика, когда важен минимальный вес | Отличное сжатие, но поддерживается не везде |
| SVG | Иконки, логотипы, простые схемы | Векторный формат, масштабируется без потерь |
Практичный подход: отдавать современные форматы тем браузерам, которые их понимают, а для остальных оставлять запасной вариант в JPEG или PNG. Это делается через элемент picture с несколькими источниками.
Размер и сжатие
Самая частая ошибка — загрузить фотографию прямо с камеры и ужать её на странице стилями. Браузер всё равно скачает весь исходный файл, хотя показывает его в маленьком окошке.
- Определите реальные размеры, в которых картинка отображается на сайте.
- Измените размеры изображения под эти значения с запасом для экранов с высокой плотностью пикселей.
- Примените сжатие. Для фотографий уровень качества в районе семидесяти-восьмидесяти процентов обычно незаметен глазу, но заметно уменьшает вес.
- Удалите лишние метаданные: информацию о камере, геометки, профили.
- Сравните результат с оригиналом на глаз. Если артефакты видны, немного повысьте качество.
Ориентир для обычных иллюстраций в тексте: десятки килобайт, а не мегабайты. Для главного баннера допустима чуть большая цифра, но и там стоит стремиться к умеренному размеру.
Имена файлов
Название файла — маленький, но полезный сигнал. Вместо IMG_4521.jpg используйте осмысленное имя, описывающее содержимое: sinij-divan-v-gostinoj.jpg. Несколько простых правил:
- пишите латиницей, слова разделяйте дефисами;
- избегайте пробелов, спецсимволов и заглавных букв;
- включайте главное слово, но не набивайте ключевые фразы;
- делайте имена уникальными для разных картинок.
Атрибут alt
Alt — текстовое описание изображения. Оно выполняет две важные функции: показывается, если картинка не загрузилась, и озвучивается программами чтения экрана для людей с нарушениями зрения. Поисковики используют его, чтобы понять, что изображено.
Хороший alt коротко и точно описывает картинку. Сравните:
- плохо: «картинка», «фото1», «купить диван недорого дёшево москва»;
- хорошо: «угловой серый диван в светлой гостиной».
Если картинка чисто декоративная и ничего не несёт, оставьте alt пустым, но сам атрибут не удаляйте. Тогда программы чтения экрана пропустят её. Не пытайтесь запихнуть в alt все ключевые слова страницы: это выглядит как спам и приносит вред.
Окружение изображения
Поисковик оценивает картинку не изолированно, а вместе с тем, что рядом. Помогите ему понять контекст:
- размещайте изображение рядом с релевантным абзацем;
- добавляйте подпись под картинкой, если она уместна, ведь подписи читают чаще основного текста;
- следите, чтобы тема страницы и содержание картинки совпадали;
- используйте уникальные изображения вместо стандартных стоковых, которыми пользуются сотни сайтов.
Уникальные фото и схемы — серьёзное преимущество. Они привлекают ссылки, их охотнее сохраняют и распространяют, а поиск по картинкам лучше ранжирует оригинальные материалы.
Адаптивность и ленивая загрузка
Посетители заходят с телефонов, планшетов и больших мониторов. Отдавать всем одну и ту же огромную картинку расточительно. Атрибуты srcset и sizes позволяют браузеру самому выбрать подходящий размер файла из нескольких заготовленных.
Вторая важная техника — ленивая загрузка. Изображения, находящиеся ниже первого экрана, загружаются только когда пользователь приближается к ним при прокрутке. Это сокращает начальный объём данных и ускоряет отображение страницы. Для самой верхней, главной картинки ленивую загрузку включать не стоит: её нужно показать как можно быстрее.
Ещё один момент — указание ширины и высоты в разметке. Если браузер заранее знает размеры, он резервирует место и страница не «прыгает» при загрузке картинок. Это улучшает показатель визуальной стабильности.
Карта изображений и индексация
Если картинки подгружаются скриптом или лежат на отдельном домене, робот может их не обнаружить. Проверьте, что файлы доступны для индексации и не закрыты в robots.txt. Для крупных проектов полезно добавить изображения в карту сайта, указав адреса картинок для каждой страницы.
Следите за тем, чтобы изображение открывалось по постоянному адресу. Если вы часто меняете структуру папок, прежние адреса перестанут работать, а накопленный вес пропадёт. При переездах настраивайте перенаправления.
Типичные ошибки
- Тяжёлые файлы. Мегабайтные фото в обычных статьях замедляют сайт.
- Текст внутри картинки. Важные заголовки и описания нужно писать обычным текстом, а не рисовать на изображении.
- Пустые или спамные alt. Оба варианта плохи.
- Отсутствие запасного формата. Новые форматы без запасных вариантов ломают картинки в старых браузерах.
- Нет проверки на мобильных. На телефоне картинка может выглядеть иначе, чем на компьютере.
- Одинаковые изображения на разных страницах. Это снижает уникальность.
Контрольный список
- Подобрать формат под тип изображения.
- Привести размеры в соответствие с отображением.
- Сжать файлы и убрать метаданные.
- Дать понятные имена.
- Заполнить alt осмысленным описанием.
- Включить ленивую загрузку и адаптивные размеры.
- Указать ширину и высоту.
- Проверить индексацию в панели вебмастера.
Автоматизация процесса
Вручную обрабатывать каждый файл утомительно, особенно на крупных проектах. Настройте автоматику: многие системы управления сайтом умеют сами сжимать загружаемые картинки, создавать набор размеров и преобразовывать формат. Для готовых сайтов подойдут пакетные утилиты и сервисы, которые обрабатывают целую папку за один проход.
Заведите правило для редакторов: перед загрузкой уменьшать изображение до нужной ширины и давать файлу понятное имя. Десять секунд на подготовку экономят месяцы работы над ускорением сайта. Раз в квартал проверяйте отчёты по скорости и находите самые тяжёлые страницы: обычно проблема кроется в нескольких забытых фотографиях.
Заключение
Оптимизация изображений не требует сложных знаний, но даёт ощутимый результат: быстрые страницы, довольных посетителей и дополнительный поток из поиска по картинкам. Пройдитесь по своему сайту, найдите самые тяжёлые файлы, сожмите их и наведите порядок с именами и описаниями. Затем сделайте эти правила привычкой при каждой публикации нового материала.