Can’t see lazyloaded background placeholder

Hi @nazrinn,

Thank you for contacting us and using Optimole.

Can you please provide more information about the issue? Which sections of the homepage are affected by the background color you added? Also, how does the page appear when Optimole is turned off?

Looking forward to your reply, thank you!

All images on the site are affected. The placeholder simply doesn’t appear when an image is loading.

If Optimole is deactivated, the images seem to lazy load but unceremoniously flash in. Same site with no cache and the Optimole plugin deactivated: https://staging.nocomgroup.com/

Hi Nazrinn,

Just to confirm, those images are used as background images? If so, the placeholder is not applying there, it’s just toggling the visibility of those images.

Is that helping you?

No. They’re <img> tags. Only the very first image in the hero section is a background image, but it’s already excluded from lazy-loading anyway because it is above-the-fold.

Hi @nazrinn,

If I’m checking the lazyloaded images and open the placeholder in a new tab I see it’s using the color #f7f7f778 which looks similar with the one from your screenshot.

Thanks! Does that means I have anything to do? I’d be willing to provide a copy of the website if needed.

In the meantime, I re-enabled optimole on the staging website with a lazyload background that I’m sure would be super visible.

… I think it’s working. Can you confirm on your side?

Also asking. Is it possible to remove the blur effect as the image is loading? I’d rather just have a clean square where the image is supposed to be rather than a weird blurry square that makes me squint.

Hi there,

Yes, it should be fine. To remove the blur, you can add this CSS rule to your site:
img[data-opt-src]:not([data-opt-lazy-loaded]) { opacity: 1!important; -webkit-filter: none!important; -moz-filter: none!important; -o-filter: none!important; -ms-filter: none!important; filter: none!important; transform: none!important; animation: none!important; -webkit-transform: none!important; }

Let me know if this helps.

It would be great if that selector was in the docs. I’ve been looking for them for ages but couldn’t grab them for the site because the images loaded too fast hehehe.

I’ve been experimenting a bit on the staging site, and your CSS has helped, but and I see cannot obtain the effect I desire where the loaded image fades over a placeholder background; instead the scr attribute is changed from an SVG to the loaded image which makes it unceremoniously “flash in” with a white frame in-between.

I’ve modified your CSS a bit so there is no white frame appearing when the src attribute value is changing, but the loaded image still “appears” in a single frame.

Here is what I ended up with:
Optimole settings.

img[data-opt-src] {
background-color: #f7f7f7; /*Placeholder opacity needs to be set to 0 in the Optimole's settings for this to be visible. - This will appear as a grey placeholder*/
}

img[data-opt-src]:not([data-opt-lazy-loaded]) {
-webkit-filter: none !important;
-moz-filter: none !important;
-o-filter: none !important;
-ms-filter: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
-webkit-transform: none !important;
opacity: 1 !important;
}

Do you think there is a way I could get the effect I truly desire?

P.S. 1: I tried to add a fade-in effect as the image loaded (using CSS opacity and @keyframe), but the fade-in occured before the image completely loaded, so I scraped it.

P.S. 2: I think the docs would also benefit from explaining how the placeholder lazy-loading works.

Hi Nazrin,

Here you have something that it might help.

/* PART 1 - Before Lazy Load */
img[data-opt-src]:not([data-opt-lazy-loaded]) {
    filter: none;
    background: red !important;
}

/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
    transition: all 1s ease;
    opacity: 1;
    animation: fade-in;
    background: red !important;
}

@keyframes fade-in {
    0% {
        opacity: 0
    }  
    100% {
        opacity: 1
    }
}

I don’t think the flash is avoidable, as you essentially want to transition the image itself from 0 to 100 opacity, which also makes the background of that image have a 0 opacity at the beginning of the animation. In addition to this,?:before?and?:after?tags don’t work on img, so those aren’t of any help.

HI there,

We dug a bit deeper into this and we have also an alternative but it depends?a lot?on how the images are displayed on your website.

There is a good chance there will be issues where images don’t have a direct parent, or have a margin themselves, so this is more of a hit or miss thing.

I don’t think it’s a very sane solution unless you have full control of the markup, or wants to restrict the selectors more to some more specific tags, but we thought it would still be good to share.

/* PART 1 - Before Lazy Load */
img[data-opt-src]:not([data-opt-lazy-loaded]) {
    /* Remove the blur & make the image transparent */
    filter: none;
    opacity:0;
}

/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
    animation: fade-in 3s ease;
}

/* Set the background on the parent of the images that have the data-opt-src attribute as a direct descendant */
*:has(>[data-opt-src]) {
    background: red;
}

@keyframes fade-in {
    0% {
        opacity: 0
    }  
    100% {
        opacity: 1
    }
}

Hi team,
Thank you so much for your replies!

Replying to your very last message:
Unfortunately a good chunk of my <img> don’t have a wrapper, but I’d love to see Optimole generate one in the future; perhaps using Web Component shennaigans, where the background placeholder and images could be replaced with shadow DOM.

I really like how you selected the parent by the way. I’m stealing that selector!

Replying to two messages ago:
I actually tested something similar earlier which gave me some unflattering flash with an animation, so I commented it in my code and didn’t share it here. This was my code:

/* PART 0 - Setting up */
img[data-opt-src] {
  background-color: #f7f7f7; /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
  will-change: opacity;
}

/* PART 1 - Before Lazy Load */
img[data-opt-src]:not([data-opt-lazy-loaded]) { 
  filter: none !important;  
  transform: none !important;  
  animation: none !important; 
  opacity: 1 !important;
  background-color: #f7f7f7;
}


/* PART 2 - Upon Lazy Load */
img[data-opt-src][data-opt-lazy-loaded][src^=http] {
  animation-name: fade-in;
  animation-direction: normal;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Both your code and mine for the animation technically worked, but the animation triggered depending of the user’s internet speed, which sometimes made the fade-in @keyframes trigger before the image loaded. So all you would see was a flashing placeholder, then the image just popping in with no transition.

Realistically, I think there is a solution where you could dynamically add a wrapper to every Optimole lazy-loaded images on the site. But I think it’s safe to say that neither of us are assed to write the PHP/JS for it and testing it.

FINAL CONCLUSION

Fade-in with no placeholder
Behaviour note: on lower internet speeds, the fade-in animation will trigger before the bigger image loads, which will make the background colour fade-in, then the image appear will appear without animation.
This animation will fade-in the image smoothly on higher internet speeds.

<style>
/* PART 0 - Setting Up */
img[data-opt-src] {
  transition: all .25s ease;
  background-color: #f7f7f7; /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
  will-change: opacity; /*helps with render speed*/
}
	
/* PART 1 - Before Lazy Load */	
img[data-opt-src]:not([data-opt-lazy-loaded]) { 
  filter: none !important;  
  opacity: 0 !important;
}

/* PART 2 - Upon Lazy Load */
img/*[data-opt-src]*/[data-opt-lazy-loaded]/*[src^=http]*/ {
  opacity: 1 !important;
}
</style>

Fade-in with placeholder
Behaviour note: on lower internet speeds, the fade-in animation will trigger before the bigger image loads, which will make the background colour flash, then the image appear will appear without animation.
This animation will fade-in the image smoothly on higher internet speeds.

<style>
/* PART 0 - Setting Up */
img[data-opt-src] {
  background-color: #f7f7f7; /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
  will-change: opacity;
}
	
/* PART 1 - Before Lazy Load */	
img[data-opt-src]:not([data-opt-lazy-loaded]) {
  filter: none !important;
  opacity: 1 !important;
}

/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
  animation-name: fade-in;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

	
@keyframes fade-in {
  0% {
    opacity: 0;
  }
	
  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>

The choice will depends on the effect the website admin prefers!

Perhaps one good thing to learn about this is that the placeholder SVG should be always transparent, and that the image placeholder colour should be rendered in CSS instead.

Let me know what you think!

Hey Nazrinn,

Thanks a lot for sharing your progress, happy to hear that was helpful. Adding a wrapper might bring up some other layout issues with various websites so that’s we havent took this approach until now.

Would be good to have something in the docs for this at least, just like LiteSpeed Cache does. Thank you for your help. =)

Hi Nazrinn, we have this doc already https://docs.optimole.com/article/1910-lazy-loading-animations-for-images. Would you see something else being added there?

Thank you!