Improve Elementor Gallery widget: use <img> tags instead of CSS background images #32995
mbautista
started this conversation in
Feature Request
Replies: 2 comments 1 reply
-
|
Hi. Yes, this is a duplicate, and a feature request, not related to Editor V4 in any way at the moment. Please, next time read the instructions in the form. They are there to ensure we keep this space organized. Posting duplicates also doesn't help. This causes fragmentation, and makes actually implementing those requests super difficult. Thank you for understanding. |
Beta Was this translation helpful? Give feedback.
1 reply
-
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
Hello,
I'm sorry if this is a duplicate — I couldn’t find an existing discussion about it.
When using the Elementor Gallery Item widget (
e-loop-item), we’ve noticed that the widget generates<div>tags with inlinestyle="background-image(...)".This causes several issues, in my opinion:
A gallery image is not a decorative image — it’s actual content. Therefore, it should use an
<img>tag with an alt attribute so that it can be indexed by search engines and read by screen readers.Background images are among the last assets loaded by browsers, which often results in a blank area for a significant amount of time. This impacts the Largest Contentful Paint (LCP) and leads to poor PageSpeed scores. Since LCP is an important SEO factor, this can seriously affect website performance.
When Elementor computes anchors, it doesn’t account for the gallery item’s height because that height is only known after images are loaded — and background images load after the onload event.
As a result, anchors don’t scroll to the correct position.
Currently, our workaround is to manually set a min-height.
Agreement
Beta Was this translation helpful? Give feedback.
All reactions