W
W
weranda2020-09-04 13:03:39
css
weranda, 2020-09-04 13:03:39

Sprite (png, svg) or individual images - which is better for SEO?

Greetings.
There is a brand section on the site page - links. It looks something like this:
5f52081c6e4b1860716174.png
Thinking about how best to form brand images and not coming to any definite conclusion. There are several options and which one to choose is a question!

1. Insert image link inside (a > img)
Many images will be loaded. Load. Probably better for SEO as there are brand specific images.

2. Add a background (png) for the links.
The option eats less resources. No single brand images are probably worse for SEO than single images. There are two options: each link has a separate background file or taken from a sprite.

3. Add a vector (svg) inside the links.
It clogs the page with unnecessary code, but each brand has its own specific image, but does the PS understand what is in SVG?

4. Add inside links background (svg).
Eats few resources, always looks neat. There are no separate images and worse for SEO, probably - PS understands specific images better. There are two options: each link has a separate background file or taken from a sprite

SVG approach, if you use a sprite, I like it more for working with it (add, change + looks normal - does not blur on retina displays), but it seems that the first option is better for SEO (a lot of different pictures, and the more of them, the better, probably) if I didn't make so many separate requests for each image, and many requests can negatively affect SEO (the site will take longer to load) ... in general, guys, some vicious circle.

Now I looked at several market leaders in different niches, they mainly use separate images for each link (a > img.png) of a group of brands, but they do this because they know that it’s better for SEO or they just do it how it turns out :) .png and .svg sprites are used mainly for interface elements, but what if there are a lot of small images (100–200) on the page? - Load them into a sprite (some), you will get a gain in resource consumption, but you will lose in relevance.

Share your knowledge, thoughts, observations, experiences: what is better and when to use? Single png/svg, single background png/svg or png/svg sprite.

Answer the question

In order to leave comments, you need to log in

5 answer(s)
N
Nikita Mikhailov, 2020-09-04
@Psixodelik

More sense for SEO is not even in the number of pictures, but in how they are described. Content images are best kept as images (img). As sprite elements, it makes sense to keep icons and other non-content images.
For regular images, don't forget to include the correct attributes (like alt). This is what SEO will thank you for.

E
Eugene, 2020-09-04
@iamd503

Just use images (svg, png) + Lazy load

P
Puma Thailand, 2020-09-05
@opium

Taking into account the fact that by the name of the brand you probably will not be found, what kind of SEO are we talking about?

V
Viktor Petrov, 2020-12-12
@vpetrov

You are probably not interested in searching for logo images, but in links from these logos. Well, design accordingly: when css is disabled, a text link is visible, and with it enabled, blocks with logos (and signatures) are visible. How to implement it is not important, as long as a large number of pictures does not slow down the download.
Sprites are a good idea.

V
Vitya, 2021-11-25
@NikeFIT

you will not see much difference in the result, therefore, do as it is easier for you

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question