Спрайт (png, svg) или отдельные изображения — что лучше для SEO?

Fix Price
Fix Price
  • Сообщений: 2
  • Последний визит: 24 февраля 2025 в 14:12

Есть на странице сайта раздел брендов — ссылки. Выглядит примерно так:

Думаем о том, как лучше сформировать изображения брендов и не прихожу к какому-то определенному умозаключению. Вариантов несколько и какой выбрать — вопрос!

1. Внутрь ссылки вставить изображение (a > img)
Будет подгружаться много изображений. Нагрузка. Вероятно, лучше для SEO, так как есть конкретные изображения брендов.

2. Добавить для ссылок фон (png).
Вариант жрет меньше ресурсов. Нет отдельных изображений брендов, вероятно, хуже для SEO, чем отдельные картинки. Возможны два варианта: каждой ссылке отдельный файл фона или брать из спрайта.

3. Добавить внутрь ссылок вектор (svg).
Засоряет страницу лишним кодом, но для каждого бренда есть своя конкретная картинка, но понимает ли ПС что на SVG?

4. Добавить внутрь ссылок фон (svg).
Жрет мало ресурсов, всегда выглядит опрятно. Нет отдельных изображений и хуже для SEO, вероятно — ПС лучше понимает конкретные изображения. Возможны два варианта: каждой ссылке отдельный файл фона или брать из спрайта

SVG подход, если использовать спрайт, нравится больше по работе с ним (добавлять, менять + выглядит норм — не размывается на ретина дисплеях), но кажется, что первый вариант для SEO лучше (много разных картинок, а чем их больше, тем лучше, вероятно), если бы не делал столько отдельных запросов для каждого изображения, а много запросов могут отрицательно повлиять на SEO (сайт будет дольше подгружаться)… в общем, ребята, какой-то замкнутый круг.

Посмотрели сейчас несколько лидеров рынка по разным нишам, они используют в основном отдельные изображения для каждой ссылки (a > img.png) группы брендов, но делают они это из-за того, что знают, что так точно для SEO лучше или же просто делают как получается:) .png и .svg спрайты используют в основном для элементов интерфейса, но что делать если на странице много небольших изображений (100–200)? — Загрузишь их в спрайт (некоторые), получишь выигрыш в потреблении ресурсов, но потеряешь в релевантности.

Поделитесь своими знаниями, мыслями, наблюдениями, опытом: что лучше и когда использовать? Отдельные png/svg, отдельные фоновые png/svg или спрайте png/svg.

DST Global
DST Global
  • Сообщений: 12
  • Последний визит: Сегодня в 18:28

Больше смысл для СЕО даже не в количестве картинок, а в том, как они описаны. Контентные изображения лучше держать именно в виде изображений (img). В качестве спрайтовых элементов имеет смысл держать иконки и другие не контентные изображения.

Для обычных изображений не забывайте указывать правильные атрибуты (например, alt). Вот за это СЕО точно скажет спасибо

Галина Окунева
Галина Окунева
  • Сообщений: 7
  • Последний визит: 24 февраля 2025 в 14:06

Просто используйте изображения (svg, png) + Lazy load

Дмитрий Аксёнов
Дмитрий Аксёнов
  • Сообщений: 46
  • Последний визит: 24 февраля 2025 в 14:13

Вам, вероятно, интересен не поиск по картинкам логотипов, а ссылки с этих логотипов. Ну и оформляйте соответственно: при отключенном css видна текстовая ссылка, а с включенным — блоки с логотипами (и подписями). Как реализовать — не важно, лишь бы большим количеством картинок не тормозило загрузку.

Спрайты — неплохая идея.

Авторизуйтесь, чтобы писать на форуме.

Заявка на услуги DST

Наш специалист свяжется с вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.

Адрес

Ижевск, ул. Воткинское шоссе, д. 170 Е, Технопарк Нобель, офис 1117

8 495 1985800
Заказать звонок

Режим работы: Пн-Пт 10:00-19:00

info@dstglobal.ru

Задать вопрос по почте

Укажите ваше имя
Укажите ваше email
Укажите ваше телефон