One of the changes I am making as WordPress Developer for my websites is that I am trying to avoid using images as background over using images as source.
Here are some of the main reasons why I decided to go this way.
Increases web Vitals Scores
Core web vitals is one of the major reasons I have decided to change the way I write and change my approaches to coding.
Here are some of the main reasons behind core web vitals why using image as source is better option:
Lazy loading images
Lazy loading of images is possible when used as a source.
Using faster alternatives/format of image
Using image as source will let using alternative format of images such as webp possible. This will in turn help website load faster as formats like webp are much less in size preserving same quality
These in turn helped websites to score better on PageSpeed Insights.
Boosts SEO and Image SEO
Using images as background and missing the chance to use alt attributes always bothered me. Especially if that were a custom photoshoot.
Using images as a source is better for SEO and considering custom images/pictures ranks pretty well in image search, can’t be happier.
IE is dying
One of the main reasons I used images as background images was because of IE.
It’s pretty common to have web designs where one column of a section is image and other is text and image covers the whole section to balance the design. Since IE wasn’t fully supporting css object-fit: cover property, I had to use it for the sake of an old friend.
Now since it is dying and being replaced(suggested to used) by IE Edge, I can't be happier. Loved the picture above, when came as notification when testing in IE. Of course, image above is used as image src.