Как поднять веб-ресурс в поисковую выдачу быстро

Знаете, что объединяет большинство сайтов, которые никак не могут выбраться из второй-третьей страницы выдачи? Казалось бы, и тексты есть, и мета-теги заполнены, и структура нормальная. А копнёшь глубже — картинки по 3–5 мегабайт, без alt-атрибутов, с названиями типа IMG_20230415_112233.jpg. Поисковик видит тяжёлую страницу, которая грузится вечность, и пользователь уходит. Поведенческие метрики падают, позиции вслед за ними.

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

Почему картинки — это не мелочь

Изображения — один из самых тяжёлых элементов на странице. Один необработанный баннер может весить больше, чем весь остальной код страницы вместе взятый. Что это означает на практике?

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

Яндекс особенно чувствителен к поведенческим факторам — это один из ключевых сигналов в его алгоритмах. Google через Core Web Vitals буквально измеряет скорость загрузки и включает её в формулу ранжирования. Так что это не просто «лучше было бы ускорить» — это прямо влияет на позиции.

Форматы: что выбрать и когда

Первый вопрос, который надо решить — в каком формате хранить картинки. Универсального ответа нет, но ориентиры такие:

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

Как реально сжимать картинки: инструменты и цифры

Вот показательный пример из практики работы с Tilda-проектами. Одна и та же фотография:

• Оригинал после загрузки на платформу (обрезка до 1680×945 px) — 1,2 МБ
• После обработки в Photoshop (те же размеры, правильный экспорт) — 832 КБ
• После прогона через TinyPNG — 353 КБ

Итог: с 1,2 МБ до 353 КБ без видимой потери качества. Умножьте это на 20–30 картинок на странице — и поймёте, насколько серьёзная экономия.

Инструменты, которые реально использую

• TinyPNG / TinyJPG — онлайн, бесплатно до 20 файлов, отличное сжатие
• Squoosh (от Google) — гибкий, позволяет сравнить до/после прямо в браузере
• Photoshop — «Сохранить для Web» даёт хороший контроль над балансом качество/вес
• ImageOptim (macOS) — прогоняет пакет файлов, удаляет метаданные автоматически

Про метаданные отдельно. Каждая фотография с телефона или фотоаппарата несёт в себе EXIF-данные: модель камеры, GPS-координаты, дата съёмки. Пользователю это не нужно, поисковику тоже — зато лишние килобайты к весу файла добавляет исправно. Убирайте метаданные при оптимизации.

SEO-атрибуты изображений: что заполнять обязательно

Технически быстрые картинки — это половина дела. Вторая половина — правильная SEO-разметка.

Alt-атрибут

Alt — это текстовое описание изображения для поисковика. Робот не «видит» картинку, он читает alt. Если поле пустое — картинка для поиска по сути невидима. Если заполнено мусором типа «фото1» — тот же эффект.

Как писать alt правильно:

1. Описывайте, что реально изображено — коротко и по делу
2. Включайте ключевой запрос, если он там уместен — но без насилия над текстом
3. Не превращайте alt в набор ключей через запятую — это спам, Яндекс это не любит
4. Оптимальная длина — 5–15 слов

Плохо: alt="купить диван диваны москва недорого диван угловой"

Хорошо: alt="Угловой диван в гостиной с серой обивкой"

Название файла

IMG_7823.jpg ничего не говорит поисковику. uglovoj-divan-seryj-v-gostinoj.jpg — уже информация. Называйте файлы латиницей через дефис, отражая содержание.

Ленивая загрузка (lazy loading)

Это когда картинки загружаются только тогда, когда пользователь прокручивает страницу до них. Реализуется одним атрибутом loading="lazy" в HTML. Снижает время первой загрузки страницы ощутимо — особенно на длинных страницах с большим количеством изображений.

Карта сайта и robots.txt для изображений

Хотите, чтобы ваши картинки попадали в поиск по изображениям? Тогда два момента:

• Sitemap с изображениями — добавьте картинки в XML-карту сайта с тегами <image:image>. Яндекс и Google будут знать, что индексировать
• robots.txt — проверьте, что папки с изображениями не закрыты от краулинга. Краулинговый бюджет — это ресурс, который робот тратит на обход вашего сайта. Если картинки заблокированы — они просто не попадут в индекс

Адаптивность и Retina: про современные экраны

Сегодня половина трафика идёт с мобильных. На экранах с высокой плотностью пикселей (Retina, HiDPI) обычная картинка выглядит размытой — это плохо и для пользователя, и для конверсии.

Что делать:

• Готовьте изображения в двух версиях: стандартной и x2 для Retina
• Используйте атрибут srcset в HTML, чтобы браузер сам выбирал подходящую версию
• CDN (сети доставки контента) помогут раздавать картинки быстро вне зависимости от геолокации пользователя — актуально для продвижения сайтов в Яндексе и Google по всей России

Чек-лист по оптимизации изображений

Перед публикацией любой страницы с картинками пройдитесь по этому списку:

• Формат выбран правильно (WebP там, где возможно)
• Размер файла до 200–400 КБ для обычных изображений
• Разрешение соответствует реальному отображению на странице
• Метаданные (EXIF) удалены
• Имя файла осмысленное, латиница, через дефис
• Alt-атрибут заполнен и содержит описание
• Установлен loading="lazy" для изображений ниже первого экрана
• Картинки не заблокированы в robots.txt
• Изображения включены в XML-карту сайта

Что дальше

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

Начните прямо сейчас с аудита текущих изображений на сайте. Зайдите в PageSpeed Insights, введите адрес своей страницы и посмотрите, что Google думает про ваши картинки. Там сразу увидите, сколько веса можно срезать и сколько секунд выиграть. Это займёт пять минут — и даст чёткий список конкретных задач.