No bug Change multiple images in a bootsrap row

Hello Christopher,

that should work.
When i visit the site I do not see that ochResponsiveImages is enabled on that page, when I goto an article it is.

Can you check that it is enabled on the frontpage?

Hi Christopher,

ochResponsiveImages creates img srcsets: a set of images with widt / heigth as configured in the breakpoint.

The power, but also the 'mistery' of img srcsets is that the visitor his browser decides which image to actually download and use for displaying.
It does this on screen size, but also on css style settings.

modern devices might have a higher dpi for the screen then other devices. That means that where one device would load e.g. the 300px image to show, the device with a dpi of 2 would automatically load the 600px version: it displays the image with the best quality for the screen.

ochResponsiveImages cannot control the decision making process of the browser, all it can do is server srcsets where the browser can pick from.

That said. In your example ochResponsiveimages creates multiple size images but on the image itself you have set a 'hard' css style: width: 1200px height: 675px.
Basically you instruct the browser to take that image.
When viewing on a small screen you see it will load the smaller image (768px on a mobile with dpi 2)

Does this answer your question?

regards,
Ruud.

Hello Christopher,

This is not a bug of ochResponsiveImages, let me explain:

when ochResponsiveImages runs, it finds two images and creates img srcset for them.
The img srcset is correct at the time ochResponsiveImages handled them.

So the webpage is rendered with the correct img srcset in it.

but....

what happens then is that the visitor of your website loads the page and loads the page / template css (in your case bootstrap)
the displaying of the image are now 'changed' client side because of this css: the images are displayed smaller because they must fit in two columns (<div class="col-12 col-md-6">).

Bootstrap doesn't change the img srcset to reflect these change.

when you remove the col-md-6 from the div around the images, then you see that indeed the 1200px choice from the img scrset is the correct one.

Complex stuff

Plau wrote: Hi Ruud,

If I understood correctly, then ochResponsiveImages "only" adjusts the image sizes based on the screen resolution. This is good if you want to display one image per column but not if you want to display multiple images per column. Like in my case.

To be more precise, it creates image sizes you configure as breakpoints: it doesn't do anything with screen sizes as that is client side and that information is not available server side (where ochResponsiveImages (and your Joomla) runs

Somehow it should be checked if the image should fill e.g. one column or half a column and then the image should be provided in a different resolution to speed up the page load. But I think there is no solution for this at the moment or is there?

That is impossible. The sizing of the image can be done anywhere on the page, on the elements or via css files (multiple). The only way to overcome that is to use JavaScript as that runs client side after the page was handled and styled. But that is like putting a bigger motor in your F1 car after the race was done: it would only slow down your site and JavaScript is not always enabled in browsers: it is not enabled in Google crawler > so even if this would work, Google could not see the results.

To add to the complexity described above: on desktop the images are side-by-side, on tablet / mobile the images are full width: so the styling of the image is also dependent on device.

So we can only work with the information we have available server side: sizing of the image on the image element is handled by ochResponsiveImages. Everything that is run client side (like template and css files styling the page) is client side.

So for desktop you currently get rewarded by google for implementing img srcsets (Google knows about the 'short comings') and for using best-practise webp image format. An more important factor for google is mobile view: you are fully okay here

Thank your for having me review the logic

As with every extension, there are so many use cases (templates / css / etc. in this case) that it will always be a compromise on what it can and will do.
I always strive for security, speed, maintainability and best 'compromise' for the most use cases (where the most benefit is). with every additional 'exception' / feature you introduce it will add to the complexity > maintainability > speed > security. So decisions need to made carefully, discussions like these help me a lot!

If you have any other questions or suggestions feel free to open a new topic.
Will be closing this one.

regards,
Ruud.