Allow the generic lazyload placeholder to have a specific color instead of being transparent

[Nazrinn]

What problem does this address?

I find it helpful when scrolling down a website to see exactly where images will appear. With a transparent placeholder, you can only assume where an image will appear due to layout spacing, but sometimes you expect an image where there is actually none and you end up waiting for nothing or thinking the website is broken because no image loaded.

What is your proposed solution?

Add the possibility to pick a color and alpha channel value for the generic lazyload placeholder, similar to how LiteSpeed Cache does it.

This might mean to add an image to the page, depending of the implementation.

Will this feature require documentation? (Optional)

Yes, it requires documentation.

---

Figma

[selul]

@Nazrinn Thank you for the feature suggestion; it's definitely a great idea; we will consider this for the upcoming releases.

[abaicus]

@Codeinwp/design-team, we need some control for the color of the image lazyload placeholder in the Optimole settings.

[mghenciu]

https://github.com/orgs/Codeinwp/teams/design-team, we need some control for the color of the image lazyload placeholder in the Optimole settings.

I tried something in Figma.

From what I understood, this feature is related to Enable generic lazyload placeholder, but let me know if it should live inside another Panel.

[abaicus]

@mghenciu Yes, that is right. It's tied to the generic placeholder. I think we should display it conditionally based on the status of the generic placeholder setting 👍🏻

[mghenciu]

Thank you Andrei for the quick response.
So I assume that option is ok to live inside the Enable generic lazyload placeholder panel, and visible only when enabled.

I'll just wait to see what @JohnPixle, thinks about it UI.

Also, I adjusted the text a bit, so it mentions the color and for a better writing. Ideally it should stay on 2 lines; if not - I'll try to make it a bit shorter.

[Nazrinn]

@mghenciu please keep in mind that you could use a link to Optimole's documentation to keep the text shorter like I proposed in #621!

[JohnPixle]

@mghenciu looking good! It's a Tailwind component, right?

Switching the status to Ready for Dev. Thanks!

[abaicus]

@mghenciu @JohnPixle, I agree that we should add a doc link instead of expanding the text. Here's how it will look:

[mghenciu]

Looks good!
I think we can improve the text later, depending also on how we change the details in the docs.

Or we can go for something like this: Enabling this will replace the low-quality image with a generic transparent placeholder, reducing the number of requests and page weight. However, this might affect the user experience in some cases. More details here

basically explaining the feature.

---

@mghenciu looking good! It's a Tailwind component, right?

It's not in Tailwind, but we can use the Core one I think.

[pirate-bot]

🎉 This issue has been resolved in version 3.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀