SEO: image as a css background vs <img/>

[Phlisg]

Hey there,

I struggle a lot in keeping the images’ ratio set in the <img> tag correctly, despite trying numerous techniques.

I decided I would ease my headaches by switching those <img> tags to some <div> with inline css style, i.e:

<div style="background: url(my-image.jpg) no-repeat 50% 50% / cover"></div>

Some images I load in this fashion are not related to the page’s main content, but some are. For the latter, I was wondering if adding an <img> tag in the div or underneath it would make the SEO-bots unhappy about the hidden images? I would hide the images by either setting their width and height to 0 or with display: none

Example:

// CSS:
.some-container div img {
    width: 0;
    height: 0;
   
    /* or */
    display: none;
}

<!-- HTML -->
<div style="background: url(my-image.jpg) no-repeat 50% 50% / cover">
    <img src="my-image.jpg" alt="proper alternative text" title="a proper title">
</div>

Thank you for your insights

[DaveMaxwell]

Why would “seo-bots” care about images?

[PaulOB]

@Phlisg

if adding an <img> tag in the div or underneath it would make the SEO-bots unhappy about the hidden images?

Anything extra (out of the ordinary) that you do just for SEO is bad.

The logic is simple and if your images are ‘content’ or important to the content then they should be in the html. If they are simply decoration images then they go in the css as background images. All the rest is nonsense.

So to answer your question then what you really need to do is find a way that can accommodate your images in the html in the way that you require without resorting to silly tricks that are just there for seo.

Historically there are many image replacement techniques around that will do what you want but there are minor drawbacks to each. It is still best where possible to keep the html as it was intended and then try and achieve the look you want. You may find the latter part of this thread interesting as it covers a lot of what you need to know about images and a possible solution for you. The css object fit property can accomplish what you want in modern browsers apart from IE but there are polyfills around to allow support. You will see in the thread that I offer a css version to accomplish much the same thing but maybe a little more convoluted.

I would suggest that the best course of action is to try and achieve what you want with the correct mark up from the start rather than hiding images with display:none which if only done for seo purposes is like a red rag to a bull. Sometimes though you have to bend the rules a little to achieve what you want but I seldom run into issues with scaling images but that may be because I avoid painting myself into a corner to start with:)

[SamA74]

@Phlisg

I struggle a lot in keeping the images’ ratio set in the <img> tag correctly,

It’s not difficult:-

img { height: auto; }

[ronpat]

@Phlisg

I struggle a lot in keeping the images’ ratio set in the <img> tag correctly, despite trying numerous techniques.

The width and height values within the <img> tag should be actual dimensions of the image. Scaling of those dimensions should be coded in the CSS. By including the actual dimensions in the HTML you are reminded of just how BIG (potentially wasteful) those images might be, lest one forget. Such things are far more important to a functioning web page than seo nonsense.

[Phlisg]

Thank you all for your answers!

@ronpat

The width and height values within the <img> tag should be actual dimensions of the image. Scaling of those dimensions should be coded in the CSS.

Something that I forgot mentionning: it is impossible to guess the correct image’s ratio as they are all different. I’m working on a CMS where users upload pictures with ratios from 4:3 to 1000:9. So my best option is to put these images as a css background if I want minimum fuss - and inform our database users to upload pictures with a standard ratio. I can query a picture with a set width, I’ll try going this route.

@SamA74

It’s not difficult:- img { height: auto; }

For my case, the image’s height should always be at 100%, all the images are in horizontal format so width is less of a constraint. width: auto did not work - probably some fussy css elsewhere from the main web dev’s css, or some other blocking rule… (60K CSS file ftw)

EDIT:

It works! Just need to be careful about the image I choose from the database. Thank you @SamA74

Also this question rose from the fact I have to adapt myself to the main website’s theme, which is all about big pictures everywhere. I could also use a sort of “mask” (as in photoshop masks) and try to hope that my picture is always going to fill it…

@PaulOB : I’ll keep that in mind for SEO - just plain normal html and nothing fancy! We have a lot of problems with our CMS regarding SEO optimization (custom “single” pages can’t have their meta description manually set for example…) and I can’t do much about changing that.

Thank you for the link to this thread! I’ll give it a try I definitely agree that those “content-dependent” images should be set in the <img> tag…

@PaulOB

rather than hiding images with display:none which if only done for seo purposes is like a red rag to a bull

Thank you for this insight. Content is for users, not for bots. I’ll do my best to keep these rules respected

[SamA74]

@Phlisg

it is impossible to guess the correct image’s ratio as they are all different.

That’s something I do (if required) at the back-end.
For example in php:-

$size = getimagesize($imageFile) ;
$aspect = $size[1] / $size[0];

…will get you the exact aspect ratio. You can then have something like:-

if($aspect < 0.55 ) { $class = 'wide'; }

You may then treat the various classes accordingly with css. Or use the height and width to explicitly set the dimensions of the image in the html attributes, scaled or not as appropriate.

[Phlisg]

@SamA74 Unfortunately I am not able to edit the PHP files on the CMS. As clients, we only have access to the “view” folder where we can create Twig files. The original image sizes are encoded in the Media object though, I could create a Macro which outputs the correct CSS class according to the computed ratio. Will definitely try that.

Thanks for the tip!