small = file size of 4096 bytes or less 🙂
Thanks for the quick answer!
If I have 11 images from 17 smaller than 4kb, why does Autoptimize not inline them in the CSS if I check that?
Should I uncheck something else?
there’s multiple checks being doing before actually inlining (e.g. is the file readable, is it local, is it smaller then 4KB, …) so hard to say without being able to look at the HTML/ CSS source really 🙂
I ain’t a wp noob but neither an expert…so… should I show you the HTML or CSS? How? Or… you said that just in theory?
Thanks!
a link to your site would suffice 😉
https://succesonline.ro – I am waiting for your answer before I checkmark it again the “Generate data: URIs for images”
well, https://succesonline.ro/wp-content/plugins/revslider/public/assets/css/../assets/loader.gif (originating from wp-content/plugins/revslider/public/assets/css/rs6.css) for example results in a 404, so that one would not be data-uri’ed. off to bed now, but I can check it with setting turned on tomorrow?
I can’t find that bloody source of the request of that loader.gif :)) I’ll turn it on now and have a quick look. Talk tomorrow, much appreciate your time and have a good night!
Nope, nothing’s changed… although I have jpg, png and webp for each one of them, although it’s local and smaller than 4kb, none of the images won’t dare to hop in on the CSS 🙁 …I have 8 icons that load into the header menu, and each one of them means a request and blocking time :(…
ah, but you’re referring to e.g. wp-content/uploads/2020/03/vlog-youtube-succesonline.ro_-50×50.png ? those cannot never be inlined in the CSS, as they are not linked in the CSS as background-image to begin with.
“generate data:uri for images” works on something like this;
HTML;
<div id="mygreatdiv"></div>
CSS (inline or in a file);
.mygreatdiv{background-image:url('pathto/your/image.jpg');}
now the good news; your CSS does contain 43 data-uri inlined images already (see screenshot below), so it is working, just not for the images in the header menu.
Even though I’m not capable (yet) understanding all you said, I much appreciate your response 🙂
Glad I’ve switched back to Autoptimze.
Cheers!
well, the images in your header are added with code like this;
<img src="/wp-content/uploads/2020/03/vlog-youtube-succesonline.ro_-50x50.png" width="50" height="50">
and that type of images AO cannot inline in the CSS (as it is very different from the example code above) 🙂
frank
