When to use IMG and when Background-Image? With the PageSpeed ​​excuse we have forgotten about true SEO

Regarding the importance of User Experience and the new Google evaluation criteria and metrics called Google Core Web Vitals we talked about it a lot.

We also have talked about how important it is to provide good and valid values ​​to the real end user and don't fool Google's Pagespeed test.

Today we had the real confirmation of a highly deleterious and negative modus operandi, which causes damage to those who use it in order to deceive Google and obtain a better PageSpeed ​​score, or at least better from the LABS tests.

We wanted to write a post to demonstrate once again how not knowing a topic can only harm you.

The specific case to be examined and the PageSpeed ​​score.

It all stems from the comment of a person on Facebook about his Recipes site which has always struggled to take off. We have already said in other articles that we manage major brands and cooking recipe sites with over 60 million page views per month and therefore managing three of the first six sites in Italy we allow ourselves to say that perhaps we know something.

The interlocutor is informed that his site does not supports Brotli compression, a feature that is very productive nowadays, in the same way as it does not support BBR TCP very important for slow 3G connections or even 4G with high packet loss and high latency.

For its part, we receive a rather self-centered and questionable response, stating that its site is a surface-to-air rocket and that it is even superior to Giallo Zafferano.

So let's focus our attention on the PSI PageSpeed ​​Insight test report leaving us at first glance rather stunned because in fact it has all optimal values ​​and surpasses all Google PageSpeed ​​Insight metrics.

In short, according to the owner we are faced with a site that exceeds the values ​​of Giallo Zafferano, but Giallo Zafferano makes several tens of millions of visitors a month, and this site perhaps a few thousand, so few visits that it is not even estimated by services like SimilarWeb Sites.

We begin to see those values ​​in detail and we are faced with a use / abuse of the use of the CSS background-image property

In fact, this site does not load images in HTML using the img tag but using a div with background-images property that loads the image as background.

And here begins the pains and the severe criticism not so much of the owner of the site, moved by the best of intentions, but of the dangers faced when trying at all costs to obtain a high PageSpeed ​​score in the green area and therefore above 90. , sacrificing important features and functionalities that irremediably impact in this case on SEO and positioning.

IMG vs Background-image let's see the difference between the two.

It is self-evident that the huge mistake that was made in this case is to sacrifice the use of the HTML img tag to replace it with the non-blocking background-image that was created for other purposes and with features and related pros and cons, certainly not suitable for use that has been made of it on an online recipe blog which aims to position itself and be searched on search engines.

Definition of the HTML IMG tag

The tag img di HTML it is used to include images within a web page. This tag needs two mandatory attributes: src e old.

The tag <img> is used to embed an image in an HTML page.

The images are not technically inserted in a web page; the images are linked to web pages. The tag <img> creates a holding space for the reference image.

The tag <img> has two mandatory attributes:

• src - Specifies the path to the image
• alt - Specifies alt text for the image, if the image for some reason cannot be displayed

Note: also, always specify the width and height of an image. If the width and height are not specified, the page may flicker when loading the image.

Definition of the CSS background-image property

The property background-image set one or more background images for an element.

By default, a background image is placed in the upper left corner of an element and repeated both vertically and horizontally.

Google does not index images declared and uploaded via background.image

Google's John Mueller said in a webmaster hangout that Google's image search doesn't index and rank images from CSS background code. He said that if you want your images to rank in Google's image search, then it's best to use the normal image tag with the source attribute pointing to the image.

The reference has been public since 2018 and can be viewed at 20:55 of the video below.

If you prefer to access reliable alternative documentation you can understand the same thing by reading the same notions at this URL: https://www.seroundtable.com/google-image-search-css-25068.html

Use an img tag. It's best for a variety of reasons.

When to use

1. When your image has to be indexed by the search engine
2. If it has a relationship with the content, not with the design.
3. If your image is not too small (non-iconic images).
4. Pictures where you can add alte titleattribute that have very positive SEO implications.

When to use background-image CSS

1. Images used exclusively for design.
2. No relationship with the content and that do not need to be indexed.
3. Small images that we can load with CSS3.
4. Repeated images (in the blog author icon, the date icon will be repeated for each post etc.).
5. Images from which SEO-side indexing is not expected.

Based on the list above and some observations we have these reasons to use a imgDay:

1. A logo image has a semantic meaning and is related to the content. So this is just the right thing to do from a semantic point of view.
2. Google doesn't automatically index background imagesotherwise the image search results would be filled with image sprites. Google hasn't officially released a statement about it, but it will most likely add more value to the div with an air label, although an image will most likely have even more value. (Bing presumably doesn't do anything with this though)

So: most likely it is best to use a imgtag

If anyone thinks that accessing 2018 documentation and references is wrong and misleading, remember that John Muller recently returned to the subject in this Tweet on April 14, 2021 with a very clear answer that leaves little room for interpretation.

Last I checked, we don't use CSS background images for image search, so the point might not be that relevant (also, what would a background image rank for?). A simple way to check for aria labels indexing is to search for the text in them: https://t.co/w5dOfsjg0a (= not indexed)

- 🐝 johnmu.csv (personal) weighs more than 15MB 🐝 (@JohnMu) April 12, 2021

What can we learn from this experience?

This experience helps us to understand how the goal of having a fast and performing website has put us in a position to lose sight of what are the fundamentals of SEO for example.

We have always described our work (that of fast and performing systems engineers for Hosting) as that of an excellent cog among many gears that constitute the beating heart of a successful publishing project.

Each department and each branch of the project and the various departments must be able to express the best without invalidating the work of other departments and without giving up compromises by managing the due priorities.

In this specific case we have seen how it is counterproductive and not very logical in order to achieve business objectives, to sacrifice SEO and the functionality offered by the html tag, only in order to have a site that brilliantly passes a PageSpeed ​​Insight test by cheating on the type of item chosen for image upload.

Pagespeed is very important but SEO is more.

Always be scrupulous in evaluating the pros and cons of any changes you make to your site, taking care above all to understand the real reasons and side effects that could arise even irreparably.