Optimole

Sure thing, good point, we will update it.

Thank you for contributing!

Hi there,

Are you talking about those images? https://vertis.d.pr/i/b72RJW

Thank you!

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!

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.

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 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,

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.

Hi,

We changed 2 months ago. For now the 5k limits users are unaffected.

FYI, we have this option which can give you an extra 20k visits if you enable https://docs.optimole.com/article/1940-optimole-badge

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?

Hi,

Optimole is compatible with Cloudflare as best a it could be right now, there is no issue that we are aware of.

Hi there,

Do you have any details regarding the errors reported? Any server errors, browser console errors?

What version of both are you using?

HI there,

Can you share a sample image link that shows the image at the quality which you don’t like?

Can you try to turn on also the retina option to check if this improves?

Hi there,

I’m sorry to hear about the issues you’ve experienced with our plugin. We truly appreciate your feedback and the time you took to bring this to our attention. Let me guide you through the steps to resolve the image issue you’re facing:

1. Visit the Updated Documentation: It appears the link we previously provided may have been outdated. Please visit our new guide on transferring images back to your server here: Transfer Images to Your Server.
2. Export Images: If you prefer to manually download and re-upload the images, you can use our export tool, accessible here: Export Images from Optimole Cloud. This tool will allow you to download all your images in one go.

In both articles, you will find detailed, step-by-step instructions. These should guide you through the process of either transferring or exporting your images smoothly.

If you encounter any difficulties or have questions, please do not hesitate to reach out to our support team. We’re here to help and ensure that your experience with our plugin is as seamless as possible.

We apologize for any inconvenience caused and thank you for your patience as we work to resolve this issue.

Hi there,

The lazyload attribute seems to be added from the builder/block plugin which you used to create that section, not from Optimole.

I would recommend turning off lazyload for that image from the builder or check if they have an option to disable that to avoid any incompatibilities with Optimole.

I hope this helps.

Hi,

You can go to Settings -> Compression and disable the Best Format option.

I hope this helps.