Dynamically set multiple background-image urls without using the HTML style attribute - php

Question

tl;dr
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
My page starts with 13 elements where I set their url(), when you scroll to the footer our lazy-loader will then load 9 (up to 12) more elements that again have their own unique "dynamic" images set.
I think we'll just have to take a hit to our SEO score, as I don't believe a better solution is available.
NOTE: I can create a JS Fiddle if needed, but I think this is described well/generic enough that it's not needed. Please let me know if this is needed for answering.
Purpose
Our company is trying to improve their site SEO score, one of the items identified for us to fix is to move all HTML style attributes into a single CSS file (or <style></style> declaration). I believe the reason this is being called out as an issue is because we have several elements using this to set their article background-image: url();.
Why not just use <img> tag instead?
Our client has alot of different type of images (dimensions, center of focus, etc) they want to use when publishing an article. In order for us to have the most consistent design regardless of screen size is by using CSS background-image styles instead of an <img> HTML tag. We're also working with some WP/XMLRPC publishing constraints, where we're not able to create a custom solution for this.
So we cannot use HTML for this, if we could this would be an easy fix.
Why this is currently set in the style attribute?
This is the best "dynamic" solution we've found so far. Up until now (with this effecting our SEO score), this has never been an issue. In our CSS styles, we have our .class {} specific background image styles that are shared. The only thing that differs for each article is the image URL, so we set that in the style="background-image: url();" attribute dynamically through PHP.
The problem
My page starts with 13 elements where I set their url(). I "could" have inline CSS at the top where I set dynamic classes for these elements that will have their unique background-image: url();'s, this could work even if it sounds painful to setup/do.
BUT we have lazy-loading happening when you scroll to the footer. We load 9 (up to 12) more elements that again have their own unique "dynamic" images set, all via AJAX. I could do the same thing here, creating another inline <style></style> CSS bit... but here's the kicker. One of our other SEO complaints is for us to combine our multiple inline CSS (as well as JS) into a single declaration. If I keep creating more <style></style> declarations to fix this SEO issue, I'll create/worsen another SEO issue.
The Question
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
I think we'll just have to take a hit to our SEO score on this one, as I don't believe a better solution is available.

Answer 1

An idea is to change the background-image inline style with a data attribute that has no effect on the SEO score, then you may add some JS code in order to change them as inline style.
Of course this may have an impact on other script as I don't know excatly how your site is built so you may add this JS code as the first JS code so that all your inline style are changed and you have them ready for any futur script.
$('.box').each(function() {
var url = $(this).data('background');
$(this).css('background-image','url('+url+')');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>
By the way we can generalize this solution to any inline style. So the idea is to have all the style set as a data attribute and then we simply change them to inline style:
$('[data-style]').each(function() {
$(this).attr('style',$(this).data('style'));
/*Not mandatory*/
$(this).removeAttr('data-style');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>
NB: as I commented above, we need to have a balance between the complexity of the site and the score we obtain. If we can easily obtain 80% no need to over complicate the site in order to have 85% or 90% and maybe create some bugs or make the maintenance of webiste site difficult.