Nazrinn

I reported the issue to Elementor. https://github.com/elementor/elementor/issues/28255

Upon further investigation, this seems to happen only when reproducing those step but also when Elementor (free) is installed and activated. I’m going to guess this is from their AI image generation feature somehow conflicting with both of your plugins.

I am also getting console warnings when trying to launch their AI feature from the pink “Generate with Elementor AI” button at the top of the media library.

I guess I should be contacting Elementor and report a bug on their GitHub?

• This reply was modified 4 months ago by Nazrinn.

I’ll message the other dev. Thanks for the reply. =)

Worked. Thanks!

Same here. I obtained this error on a page component where backgrounds images had no explicit DOM or CSS width in a slider.

Edit: Seems like the new version fixed it.

• This reply was modified 6 months, 2 weeks ago by Nazrinn.

Note that I rolled back Optimole to the previous given that the issue first appeared on the live site, but I’d be willing to provide an environment for testing if necessary. Version?3.13.0 was causing this issue.

• This reply was modified 6 months, 2 weeks ago by Nazrinn.

It’s on all the pages (all pages have a hero image). These images are Elementor background images. Here is another website I have made where there is a hero background image (as a fallback for the video).

On this site, I have made a custom code snippet to prefetch the image. The issue is that every time I refresh Optimole’s cache, the code cease to work. It would be great if we could automatically add this code snippet for all images above the fold on all pages.

You’re welcome. =)

Maybe add the animation with placeholder I made?

Also I think we can do away with attribute prefixes now, hehe. They were necessary maybe as far back as 7 years ago at best and I’m being a bit generous.

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

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!

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.

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.

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.

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.