Athena Maliora wrote: Hello!
For example, on my home page i ve a slideshow full width & height. Those images are not optimized.
The slide show is no image (technically) but a div which is styled as an image. ochResponsiveImages replaces img elements, not div elements with styling.
The challenge here is that styling of an DIV can be done in multiple ways: like you have it on the site with what is called inline style (so the style is part of the DIV element), but it can also be done via CSS files (this is the intended way for doing this).
One of the challenges here is that if you want to replace the DIV with another image, you need to iterate through all elements on the page and query each one of them if it has a style = background-image set as inline style. This has impact on performance. If we could target these DIV by e.g. the classname set on it, then that would be doable.
I need to think if this is something that can be build in in ochResponsiveImages as this is functionality not about responsive (different sizes per image) but only about converting the image to another format (WebP). Although it will probably not solve the PageSpeed score as explaied below (not responsive only converted)
Also, this is what my client sees:
gtmetrix.com/reports/newsite.avatonresort.gr/Gonh6Era
The low performance on the slider is because the image size is 2100 x 1301 pixels and is displayed e.g. on mobile on a smaller size, so Google tells you that the image is way to large.
When not using a div, but an IMG this would enable you to replace it (via ochResponsiveImages) with a srcset so that on small devices a small image is used and on large displays a large image.
The slider component you are using is (IMO) build on how it looks first and not on how it performs: converting the image to WebP format will not solve this (only partially) because the image resolution will still be to big...
What I would have done with the slider is not set the image fixed as inline style, but set it in a css file: in the css file you can have different images for different device sizes.
difficult... maybee this is something the dev of the slider can work with?