Оптимизация изображений сайта для SEO: 6 наиболее эффективных факторов

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

Давайте разберёмся, почему именно оптимизация изображений так важна для SEO:

Скорость загрузки. Гигантские файлы изображений замедляют время загрузки страницы. Поисковые системы (особенно Google) уделяют большое внимание скорости, и медленный сайт может получить пессимизацию.
Поведенческие факторы. Медленный сайт раздражает пользователей, что приводит к высокой доле отказов и низкой продолжительности сеанса. Это негативно влияет на ранжирование.
Индексация. Поисковые роботы сканируют не только текст, но и изображения. Правильно оптимизированные изображения могут появиться в поиске по картинкам, привлекая дополнительный трафик.
Доступность. Благодаря альтернативному тексту (alt-тексту) изображения становятся доступными для всех пользователей, включая тех, кто использует программы чтения с экрана.
Экономия ресурсов. Оптимизированные изображения требуют меньше ресурсов сервера и трафика, что снижает издержки.

1. Выбор правильного формата

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

Краткий обзор наиболее популярных форматов для веба:

JPG/JPEG. Идеален для фотографий и изображений со сложными цветовыми переходами. Он обеспечивает хорошую степень сжатия с незначительной потерей качества.
PNG. Лучше всего подходит для изображений с прозрачностью или градиентами, а также для графики с чёткими линиями. Однако файлы PNG обычно больше, чем JPEG.
SVG. Векторный формат, идеален для логотипов, иконок и простой графики. Обеспечивает отличное качество при любом масштабе и небольшой размер файла. Хорошо подходит для адаптивного веб-дизайна, но не рекомендуется для фотографий и сложных изображений.
WebP. Современный формат, разработанный Google, обеспечивает превосходное сжатие без потерь и с потерями, что делает WebP идеальным для веб-изображений. Рекомендуется использовать, если поддерживается вашим CMS и браузерами большинства пользователей.
AVIF. Ещё более современный формат, предлагающий ещё более высокую степень сжатия по сравнению с WebP. Сегодня поддерживается не всеми браузерами, поэтому используйте его с осторожностью.
GIF. Подходит для простых анимаций и изображений с ограниченной цветовой палитрой. Имеет высокий размер файла для длинных анимаций, в таких случаях лучше использовать видеоформаты.
ICO. Специальный формат для фавиконок сайта. Может содержать несколько размеров одного изображения.

Онлайн-сервисы конвертации файлов изображений:

2. Сжатие изображений

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

Какие расширения изображений лучше/хуже сжимаются?

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

Онлайн-инструменты для сжатия изображений:

3. Правильный размер

Используйте размер изображения, соответствующий его фактическому отображению на странице. Нет смысла загружать изображение 3000×2000 px, если на сайте оно будет отображаться как 600×400 px.

Оптимальные размеры изображений для веба зависят от их назначения и контекста использования. Вот несколько общих рекомендаций для ширины изображений:

Для полноэкранных баннеров: 1920 px или больше.
Для больших изображений (например, в слайдерах): 1200—1600 px.
Для обычных изображений внутри контента: 800—1000 px.
Для миниатюр/превьюшек: 200—400 px.

Оптимальное разрешение для веб-изображений — 72 dpi. Это стандартное значение для экранных отображений, которое обеспечивает хорошее качество при минимальном размере файла.

4. Адаптивные изображения

Адаптивные изображения — это метод, позволяющий доставлять разные версии одного и того же изображения (например, разные размеры) пользователям, основываясь на их устройстве и условиях просмотра.

Основных методов реализации адаптивных изображений два: атрибут srcset и sizes и элемент <picture>.

Атрибут srcset и sizes

Атрибут srcset перечисляет разные версии одного и того же изображения, а sizes указывает браузеру, как выбирать изображение в зависимости от размера окна просмотра.


<img src="image-small.jpg"
 srcset="image-small.jpg 320w,
 image-medium.jpg 768w,
 image-large.jpg 1200w"
 sizes="(max-width: 320px) 280px,
 (max-width: 768px) 720px,
 1200px"
 alt="Описание изображения">

Разберём код:

src="image-small.jpg" — это запасной вариант изображения для браузеров, которые не поддерживают srcset или если ни один из размеров не соответствует условиям sizes.
srcset="image-small.jpg 320w, image-medium.jpg 768w, image-large.jpg 1200w" указывает браузеру три разных изображения с соответствующими ширинами (w).
sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1200px" определяет, как браузер должен выбирать изображение:
Если ширина экрана меньше или равна 320 px, то изображение займёт 280 px ширины.
Если ширина экрана меньше или равна 768 px, то изображение займёт 720 px ширины.
В остальных случаях изображение займёт 1200 px.

Браузер будет сам выбирать наиболее подходящее изображение из srcset, основываясь на ширине viewport и условиях из sizes.

Элемент picture

Более гибкий метод, позволяющий выбирать изображение на основе различных условий (например, типа браузера, ориентации устройства и т. д.). Внутри элемента <picture> используются элементы <source> для каждого варианта изображения.


<picture>
 <source media="(max-width: 600px)" srcset="image-small.webp">
 <source media="(min-width: 601px)" srcset="image-large.webp">
 <img src="image-large.jpg" alt="Описание изображения">
</picture>

Разберём код:

<source media="(max-width: 600px)" srcset="image-small.webp">: браузер выберет image-small.webp, если ширина экрана меньше или равна
<source media="(min-width: 601px)" srcset="image-large.webp">: браузер выберет image-large.webp, если ширина экрана больше
<img src="image-large.jpg" alt="Описание изображения">: запасной вариант для браузеров, не поддерживающих <picture>.
<picture> позволяет даже использовать разные типы изображений (например, webp и jpeg) для разных устройств.

5. Наименование файлов

Правильно оформленное название помогает поисковым системам лучше понимать контент, повышает релевантность и упрощает внутреннюю работу с файлами.

Название файла должно отражать суть изображения. Ключевые слова должны быть естественными, соответствовать контексту страницы и учитывать запросы пользователей. Например, krasnaya-futbolka-muzhskaya.jpg вместо IMG12345.jpg.
Пишите на языке аудитории. Если ваша аудитория русскоязычная, используйте транслит в названиях. Например: stroitelstvo-doma.jpg или stroitelstvo-doma-iz-kirpicha.jpg.
Избегайте спецсимволов и пробелов. Они могут вызвать ошибки при загрузке файлов. Вместо пробелов используйте дефис -.
Старайтесь быть краткими, но точными. Название должно быть ёмким, не более 3-5 слов. Не нужно добавлять излишнюю информацию.
Добавляйте нумерацию. Если вы загружаете несколько версий одного изображения, используйте номера или краткие описания для различия. Например: stroitelstvo-doma-1.jpg и stroitelstvo-doma-2.jpg.

6. Атрибуты alt и title

Alt

Атрибут alt (alternative text / альтернативный текст) предоставляет текстовое описание изображения, когда оно не может быть загружено или отображено (например, из-за проблем с сетью, неправильного URL-адреса, или если пользователь использует программу чтения с экрана).

Alt является обязательным элементом и помогает поисковым системам понять, что изображено на картинке.

Рекомендации:

Alt должен быть кратким, точным и информативным описанием изображения. Он должен передавать суть изображения так, как если бы вы описывали его устно.
Описание должно соответствовать контексту страницы, на которой находится изображение.
Если это уместно, добавьте релевантные ключевые слова, но не спамьте ими.
Если изображение содержит слова, которые важны для понимания содержания, alt-текст должен включать эти слова. Это позволит alt-тексту играть ту же функцию на странице, что и изображение.
Не указывайте бессмысленный альтернативный текст (например, «картинка» или "какой-то текст").

Title

Атрибут title (tooltip / всплывающая подсказка) представляет дополнительную информацию об изображении, которая обычно отображается в виде всплывающей подсказки при наведении курсора на изображение. Не влияет на SEO так сильно, как alt. Не является обязательным атрибутом.

Рекомендации:

Не стоит делать title слишком длинным, так как он может перекрыть часть экрана.
Не нужно просто копировать текст из alt в title.
Как и с alt, не стоит переспамливать title.
В большинстве случаев, если у вас хорошо проработан alt, title можно опустить.

Подведём итог: идеально оптимизированное изображение

Идеально оптимизированное для SEO изображение должно соответствовать следующим критериям:

Формат подобран с учётом типа изображения и назначения.
Размер соответствует реальному отображению на странице.
Файл сжат с оптимальным балансом качества.
При необъодимости реализована адаптивность через srcset/sizes или picture для разных устройств.
Имя файла содержит релевантные ключевые слова, разделённые дефисами.
Имя на транслите, без символов, краткое (3-5 слов), но информативное.
Присутствует чёткий, описательный alt-текст.
При необходимости добавлен информативный title-атрибут.
Изображение тематически соответствует контенту страницы.