Transparent Responsive Placeholder

  • Resolved essaund

    (@essaund)


    3 years, 2 months ago

    Is it possible to have a responsive placeholder that’s 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 let’s 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. It’s only Litespeed Cache plugin that doesn’t have this.

    Can we get a fix for this?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support qtwrk

    (@qtwrk)

    this will make it transparent

    Thread Starter essaund

    (@essaund)

    I’m 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 there’s a good number of threads of people asking for it.

    But you’ve 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 it’s 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:

    <svg xmlns="https://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 {width} {height}"><rect width="100%" height="100%" style="fill:{color};fill-opacity: 0.1;"/></svg>

    Towards the end you’ll notice that there’s 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.

    Thread Starter essaund

    (@essaund)

    @wtvxy ~ You’re welcome. I’m glad it helped.

    @essaund thank you. It works perfectly!

    Thread Starter essaund

    (@essaund)

    @senator94 ~ You’re welcome. I’m glad it works.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Transparent Responsive Placeholder’ is closed to new replies.