No bug I can't configure it correctly or it doesn't work

Good morning,
I have checked your site and looked at the first image I saw. I can see that this is handled correct by ochResponsiveImages as you can see in the screencapture.

Please note that on first visit of the page, ochResponsiveImages creates the converted responsive images but it will not use them.
on the second visit of the page (F5) you will see that ochresponsiveImages will replace the <img> with the new <img srcset (as you can see in the image).

Also, the setting 'force create cache' will slow you site down because it will on every visit recreate the cached images. This setting you can you if you upload a new image with the same name: it will then recreate the cached files for that image.

What it does is convret an <img> element to an <img srsset> element.

so when your site has the following:
<img src="path/image.jpg">

it will create for each configured break-point cached images, e.g.
image480px.jpg
image786px.jpg
image1200px.jpg
etc.

it will then replace the <img> element with the srcset variant.

This new img element will enable the browser to take the image it seems best fit.

So when browsing from a mobile device, the browser will download and display the small image480px.jpg, when on desktop it will download and use the image1200px.jpg

That is the basic functionality that will give the most gain in page speed (#seo) as Google will applaud you for not serving the generic-one-size-fits-all-image (image.jpg) to browser: wasting bandwidth when the image needs to downloaded in full, but only shown shrinked to e.g. 480px

So the images are replaces as-is. the cached images are exactly the same (crop) as the original image as that is taken as source, only the resolution is different.

When you enabled WebP conversion, the cached images are created in two formats: the original format (.jpg) and the WebP format, so
image480px.jpg and image480px.webp

when the browser supports webp the the webp will be served (which is a lot smaller retaining the same quality), when the browser doesn't support, the jpg image is served

As for your question:
the cutout 9cropping) can be done in two places:
1. on the image itself (you use a cropped image and that image will then be used as the cached images)
2. via css.

ochResponsiveImages works with the HTML elements that are on the page, so it has an image filename to work with. Things that are done to that image client-side via css is 'unknown' and cannot be handled.

When you disable ochResponsiveImages and the open the image, you will see the same image cropping / size / ratio / etc. then when you have enabled ochResponsiveImages.

Does this answer your question?

Hi,
that is the 'beauty' of it, but this can be somewhat confusing.

So the browser decides what image size is best. If you are e.g. on a mobile device with a device width of 480px and a dpi of 2, then the broser on that device will look for an image that is 2 x 480 px wide = 960px

When you look the same page on a high-spec mobile with dpi = 3 then the browser will look for an image size 3 x 480 = 1440px

So this is actually a good thing as the 480px image with the same widt on the screen would look less sharp then the 960px image shown with dpi = 2.

For google the only thing that counts is that you offer different sizes for different 'break-points': google then 'knows' that you are not offering a 2100px image that will be displayed at 960px (because that is a waste of bandwidth)

You are welcome!
If you have any other questions, feel free to ask!