banner image seo improvements

[djayko]

Idea: SEO Improvements for menu banner option

Goals:

• improve image detection for google
• reduce loading time on different devices
• usage of modern html techniques
• improve LCP (https://web.dev/lcp/)

suggestions to discuss:

1. Use of BS5 img card option instead of background-image
   Benefits:

• img srcset for different screensizes could be used -> faster loading, improved LCP
• ALT text for images could be used -> improves SEO
• aria-label for image is usable and could be connected to banner title text

Sources:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#relative_sized_images

2. use preload of image(s) in head
   example-code:
   <link rel="preload" as="image" ....
   Benefits:

• improved loading of images

url for speed tests:
http://frank.yourweb.de/_test/astroid-test.html

Webvital-Scores:

Code-Pen-Playground:
https://codepen.io/djAyko/pen/XWzMZam

Just as information, why I investigated in this:
My google LCP with joomla4 on a live site (mobile view) is currently at 6.5 due to the fact that there is only one image in background used vor all screen sizes. Obviously the largest one for best image experience on desktops.

So, let's discuss what could be a useful improvement.

Best,
Ayko

[Chacapamac]

Wow, Ayko really interesting post.
There we can see where Astroid shine and can even be improve, this is great suggestions.

[sonvnn]

Thank you Ayko,

I will update this in the 2.5.15.

Best Regards,
Sonny

[djayko]

Thank you Ayko,

I will update this in the 2.5.15.

Best Regards, Sonny

Ok, great.

What exactly?

1. Option
   Change from background to real image implementation based on BS5
   -> Doesn't solve the resizing topics

2. usage of different img sizes

I'm not sure about the Details and how to solve it.
Uploading different images in backend for different sizes?
included compressor within astroid? (I think that's too much).
What about the gradients or opacity ? There is also a div needed which needs to be used between image and text?
Would it be useful as option? (-> upload of one big image and thats it, but you can go deeper and upload different images in different format and sizes for loading improvements.... like using .webp format and so on)

3. Maybe it's more useful using a separate module instead having this within astroid (could also be an option)

That's the reason why I posted it here for discussion. :-)

Best,
Frank

PS: maybe do you have already a good option in mind?