Hey there!
I've been pondering over the best way to display brand images in the brand links section on a website page, and I'm struggling to come to a solid conclusion. There are a few options to consider, and the question of which one to choose is quite perplexing!
(https://media.licdn.com/dms/image/D4D12AQGjBbMYjd9LAg/article-cover_image-shrink_720_1280/0/1661859966715?e=2147483647&v=beta&t=Bx0SeAwyDVQuIUtmh0nu-vi13XC6GHuXB3PINhTi-JA)
1. Placing links with individual image inserts (a > img)
This approach involves uploading a large number of images, which may be beneficial for SEO due to the presence of specific brand images.
2. Incorporating a png background for the links.
This option is resource-efficient, but it may not be as effective for SEO without individual brand images. It presents two possibilities: using a separate background file for each link, or utilizing a sprite.
3. Embedding a vector (svg) within the links.
While this method may clutter the page with additional code, it allows for unique brand images. However, it's uncertain whether the PS understands SVG images.
4. Using an svg background within the links.
This method conserves resources and maintains a clean appearance. However, it may be less beneficial for SEO without individual images. Similar to the png background option, it offers the choice of using separate background files or a sprite.
If using a sprite, the SVG approach may be more preferable for working with it (adding, modifying, and maintaining a clear appearance on retina displays). Nonetheless, it appears that the first option might be better for SEO, since numerous distinct images are advantageous, although excessive queries can have a negative impact.
I've observed that several industry leaders across different niches predominantly utilize separate images for each brand link (a > img.png). However, it's uncertain whether they do this for SEO benefits or simply because it's convenient :) .png and .svg sprites are primarily used for interface elements, but what's the best approach when there are numerous small images on the page (100-200)? Should some of them be loaded into a sprite to reduce resource consumption, or is maintaining relevance more important?
I would love to hear your insights, experiences, and recommendations. What approach do you believe is better, and in what circumstances should it be utilized? Separate png/svg, separate background png/svg, or sprite png/svg?
After considering various options, I have found that the best approach depends on a balance between visual appeal, performance, and SEO considerations.
When it comes to displaying brand images, the use of individual image inserts (a > img) may seem appealing at first due to the specificity it offers. However, when dealing with a large number of images, this approach can lead to increased page load times and potential SEO pitfalls if not optimized properly.
Incorporating a png background for the links can be resource-efficient, especially if utilizing a sprite. However, this approach may not be as effective for SEO, and it could potentially limit the visual impact of the brand images.
Embedding a vector (svg) within the links brings the advantage of scalability and clarity, but it does introduce additional code that might clutter the page. There is uncertainty regarding whether search engines fully understand and index SVG images for SEO benefits.
Using an SVG background within the links, especially with a sprite, can help maintain a clean appearance and conserve resources. However, the SEO impact of this approach may be similar to that of using a png background without individual images.
When faced with the dilemma of handling numerous small brand images on a page, it's important to consider the trade-off between resource consumption and relevance. While loading some images into a sprite can reduce the overall number of server requests and improve performance, it's crucial to ensure that the chosen approach does not compromise the visibility and impact of the brand images.
In my experience, the best approach for displaying brand images in the brand links section would be to strike a balance between visual presentation, performance optimization, and SEO considerations. This may involve a combination of separate png/svg images for prominent brands that require individual representation, coupled with the use of sprites for smaller or less visually impactful brands to reduce resource consumption.
The essence of SEO lies not in the abundance of images, but rather in their appropriate descriptions. Content images should be kept as such (img). Meanwhile, icons and non-content images could benefit from being sprite elements.
Remember to include the necessary attributes for regular images, such as alt text. Your efforts in this area will not go unnoticed by SEO.
You may not be inclined to browse through images of logos, but rather seek links from these logos. Consider this approach: when css is turned off, a text link will be displayed, and when enabled, logo blocks (including signatures) will appear.
The method of implementation is of little consequence, as long as the loading speed is not affected by a large number of images. Sprites could also be considered.