Srcset on Dynamik Image in Post Hero Block

Hi there,

Browsers select the appropriate src-set image based on a few criteria. Really simplified that is:

Image CSS Width * DPR ( Device Pixel Ratio )

Lets use a Moto4G device, which is what google uses in its pagespeed simulations, to work out what the optimum size would be.
A Moto4G has a 360px CSS width screen and its DPR is 3.0

When viewed on that device the CSS width of your image is 320px ( device width 360px minus 20px left&right padding )

So the optimum image size will be:

320 x 3 = 960px.

And your src-set contains a 1200px ( original size ), a 600px and a 360px wide image.

To achieve the optimum resolution image it has to use the 1200px image. Whereas for that device size ( to keep Google happy ) you should really have a 960px wide image.

There are some other factors in this that can muddy the waters a little such as the WP sizes attribute being best suited to images that fill the width of the viewport. But at this time ( ignoring some issues with your Preloads ) - if its loading the 1200px image then that is the 'best' size for the job.

Hmm ok i just wondering why it places the 1200img and not the 360px wide image cause its near the 320 screensize.

Sorry if my explanation didn't make sense.
Yes the CSS Image size is 320px. A
nd the device has a Device Pixel Ratio of 3.
So it will want to show an image that is 3 x 320 = 960px.

As there is no 960px image, the browser looks for the nearest largest image which is the 1200px and it loads that.
If the 1200px didn't exist then it would load the 600px as there is no other options.

Hey David

i did also add a Image with this dimension and the same think is showing up.
Just weird now :D

Can you link us to the page where we can see the image?

Hi Ying

sorry for my delay:

https://reisemarkt.com/hamam-ritual/

I'm not seeing a 950px image in the list, but on mobile, it's using 600px image currently:
https://www.screencast.com/t/Um2jv16Sg1