June 29 2022

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

We see a fairly common mistake in abusing the background image property in order to improve the PageSpeed ​​score and Core Web Vitals and worsen 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.

Google PageSpeed ​​Inight test

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 or.

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 alttitleattribute 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.

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.

Do you have doubts? Don't know where to start? Contact us!

We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.


Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.


Managed Server Srl is a leading Italian player in providing advanced GNU/Linux system solutions oriented towards high performance. With a low-cost and predictable subscription model, we ensure that our customers have access to advanced technologies in hosting, dedicated servers and cloud services. In addition to this, we offer systems consultancy on Linux systems and specialized maintenance in DBMS, IT Security, Cloud and much more. We stand out for our expertise in hosting leading Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart and Magento, supported by a high-level support and consultancy service suitable for Public Administration, SMEs and any size.

Red Hat, Inc. owns the rights to Red Hat®, RHEL®, RedHat Linux®, and CentOS®; AlmaLinux™ is a trademark of AlmaLinux OS Foundation; Rocky Linux® is a registered trademark of the Rocky Linux Foundation; SUSE® is a registered trademark of SUSE LLC; Canonical Ltd. owns the rights to Ubuntu®; Software in the Public Interest, Inc. holds the rights to Debian®; Linus Torvalds holds the rights to Linux®; FreeBSD® is a registered trademark of The FreeBSD Foundation; NetBSD® is a registered trademark of The NetBSD Foundation; OpenBSD® is a registered trademark of Theo de Raadt. Oracle Corporation owns the rights to Oracle®, MySQL®, and MyRocks®; Percona® is a registered trademark of Percona LLC; MariaDB® is a registered trademark of MariaDB Corporation Ab; REDIS® is a registered trademark of Redis Labs Ltd. F5 Networks, Inc. owns the rights to NGINX® and NGINX Plus®; Varnish® is a registered trademark of Varnish Software AB. Adobe Inc. holds the rights to Magento®; PrestaShop® is a registered trademark of PrestaShop SA; OpenCart® is a registered trademark of OpenCart Limited. Automattic Inc. owns the rights to WordPress®, WooCommerce®, and JetPack®; Open Source Matters, Inc. owns the rights to Joomla®; Dries Buytaert holds the rights to Drupal®. Amazon Web Services, Inc. holds the rights to AWS®; Google LLC holds the rights to Google Cloud™ and Chrome™; Microsoft Corporation holds the rights to Microsoft®, Azure®, and Internet Explorer®; Mozilla Foundation owns the rights to Firefox®. Apache® is a registered trademark of The Apache Software Foundation; PHP® is a registered trademark of the PHP Group. CloudFlare® is a registered trademark of Cloudflare, Inc.; NETSCOUT® is a registered trademark of NETSCOUT Systems Inc.; ElasticSearch®, LogStash®, and Kibana® are registered trademarks of Elastic NV Hetzner Online GmbH owns the rights to Hetzner®; OVHcloud is a registered trademark of OVH Groupe SAS; cPanel®, LLC owns the rights to cPanel®; Plesk® is a registered trademark of Plesk International GmbH; Facebook, Inc. owns the rights to Facebook®. This site is not affiliated, sponsored or otherwise associated with any of the entities mentioned above and does not represent any of these entities in any way. All rights to the brands and product names mentioned are the property of their respective copyright holders. Any other trademarks mentioned belong to their registrants. MANAGED SERVER® is a trademark registered at European level by MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italy.


Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top