Wrong srcset loaded

Also on https://autentical.nl/hoe-krijg-je-kaartjes-voor-de-caminito-del-rey/ we get

https://autentical.nl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/sites/42/2014/04/caminito-del-rey-main-bridge_red-1-770x500.jpg.webp

and Page Speed Insights also mentions it on mobile check but says it is not properly sized

611 x 397 px whereas the image is 770 by 500 px and size could be optimized . But perhaps the resizing is due to Carousel Caroufredsel:

<div class="caroufredsel_wrapper" style="text-align: start; float: none; position: relative; inset: auto; z-index: auto; width: 611px; height: 396.75px; margin: 0px; overflow: hidden;"><div class="slider" style="text-align: left; float: none; position: absolute; inset: 0px auto auto 0px; margin: 0px; width: 1833px; height: 396.75px;">
<div class="item" style="width: 611px;"><img width="770" height="500" src="https://autentical.nl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/sites/42/2014/04/caminito-del-rey-main-bridge_red-1-770x500.jpg.webp" class="attachment-base_hotel_img_slideshow size-base_hotel_img_slideshow wp-post-image" alt="caminito-del-rey" decoding="async" fetchpriority="high"></div>
</div></div>

But.. that seems because we have

<div class="item"><?php the_post_thumbnail( 'base_hotel_img_slideshow' ); ?></div>

enforcing a a size single.php so guess we need to work on that.

• This reply was modified 2 months, 3 weeks ago by Rhand.

Hi, I am not the developer of the plugin, but I thought to share my thoughts about your issue.

In the first two cases 603×900 and 201×300 it seems is is just an artifact of the image ratio.
If the image is not square WP will generate the various sizes using only one of the sides as reference.
In this case give than the ratio is the same your image looks like being 0.67×1, instead of 1×1.
This is the expected result for images with ratio different than the expected one and this is also confirmed by the img sizes width="201" height="300"
Webp-express only translate what it finds, meaning that those sizes are those generated by WP for the 900×900 and 300×300 image sizes.
If you look in your upload folder you should see that those are the sizes as for the original jpeg/png image generated by WordPress.

As for the srcset, my understanding is that all the available variations are added to srcset, regardless of the media and the browser will pick the most appropriate based on the viewport.
Potentially, the optimisation to be made here is to ensure that on the mobile view the image with the right size is used in that context.

I hope it helps.

@kimu thanks for the feedback.

In the first two cases 603×900 and 201×300 it seems is is just an artifact of the image ratio.?
If the image is not square WP will generate the various sizes using only one of the sides as reference.?

Did not know about this. Thanks for the explanation.

As for the srcset, my understanding is that all the available variations are added to srcset, regardless of the media and the browser will pick the most appropriate based on the viewport.
Potentially, the optimisation to be made here is to ensure that on the mobile view the image with the right size is used in that context.

Yeah, we have done some optimization now. That is, we have fixed a lot of posts with hard coded content so the srcset is loaded properly again. Next we will be adding missing jpgs using the webP images that are available . This so fallbacks are available . Will be using this script https://github.com/imagewize/webp-to-jpg-conversion-w-gd .

Once that is done we will look into potentially adding some missing sizes to have the proper aspect ratio for mobile or a better one.