No bug Directory of images problem

Athena Maliora wrote: Hello.
I have installed the plugin on a website that is a hotel and has lots of photos, slideshows and subfolders with photos in joomla directory images.
I see that not all of my images have been optimized.

I have looked at the site below but cannot find any optimized (by ochResponsiveImages) image? Is the plugin enabled, did you clear cache?

I have included only the directory images in the advanced tab of the plugin configuration.

Does this include the subfolders also?

Yes it does, it will look at the full image path and if the text you configured is part of that path, it will be included: so also .../images/subdir/imagename.jpg

Also note that it will only convert and replace img elements, NOT div elements with a image as background (via style="background-image: url(image.jpg);"

wait....
I just rechecked and see the converted images including subdirectories.

So images that are not converted are:
1. excluded
2. style="background-image... images
3. smaller then the minimum configured size

Can you point me to an image on your site that you expect to be converted, i can then tell you why it isn't (via screen shor or description)

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?

Always a struggle for a developer as automation always means standardization, and standardization is not always the best for performance / seo. You want to service as many use cases as you can with the same extension.

I will add this to my list of possible future features and will watch for others who are using DIVs for images: need to get some use cases to make a good calculated decision on if and how to implement this.

Will keep you posted (via newsletter)

Hi, please check here: onlinecommunityhub.nl/forum/ochresponsiv...n-non-image-elements

First tests by other customers are all good, so if you are up for a test this would be helpful.

regards,
Ruud.