Wordpress LScache Plugin: Transparent Responsive Placeholder
Is it possible to have a responsive placeholder thats transparent? Website themes nowadays do come with a dark mode switcher. It makes it difficult to use a responsive placeholder that can only blend well with one mode. For example, you can change the color of the responsive placeholder to lets say white to work with the light mode. But once the visitor switches the theme to dark mode, the responsive placeholders will keep flashing in white before the images load. This can cause eye strain. And if you set it to black, it will be weird to use the website in light mode when placeholders are black. Most cache plugins have responsive placeholders that are transparent. Its only Litespeed Cache plugin that doesnt have this. Can we get a fix for this? this will make it transparent Im specific about the Responsive Placeholder. The method you suggest only works if the Responsive Placeholder is set OFF. The basic placeholder is not responsive and results to cumulative layer shift (CLS) that hurts Page Speed Insights performance. But I have managed to find a workaround for the responsive placeholder. So I will paste it here because I can see theres a good number of threads of people asking for it. But youve told most of them that you see no importance for a transparent placeholder, which is sad to be honest. So I hope this helps someone out there Method 1 using CSS: Where 0% is fully transparent and increasing the percentage adds some opaque effect up to 100% when its no longer transparent. / Give Random Name Here / img[data-lazyloaded] opacity: 5% Method 2 Modifying the Transparent Placeholder The original SVG placeholder on LiteSpeed Cache has the following code: Towards the end youll notice that theres the line fill-opacity:0.1 To get to transparent, you simply change the value 0.1 to just 0. Or you can use percentage just like the in the case of method one above. Thank you @essaund, this works for me. I also find LQIP is too ugly and in my website it only shows 0.5ms which seems to be uneccessary. Transparent Responsive Placeholder is the best solution so far. @wtvxy Youre welcome. Im glad it helped. @essaund thank you. It works perfectly! @senator94 Youre welcome. Im glad it works.