For example we have the following sizes: thumbnail (400), medium (768), large (1200).
If we use the_post_thumbnail('medium')
, WordPress generates the following image tag:
<img width="768" height="768" src="https://example.com/wp-content/uploads/2021/12/my-image-768x768.jpg" class="wp-image-318 size-medium" srcset="https://example.com/wp-content/uploads/2021/12/my-image-768x768.jpg 768w, https://example.com/wp-content/uploads/2021/12/my-image-400x400.jpg 400w, https://example.com/wp-content/uploads/2021/12/my-image-1200x1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 768px">
My question is: why provide the 1200w version? sizes
attribute guarantees that it will never be used. I know that srcset
can provide Retina-versions of images, but as far as I know, they should be explicitly listed as image.jpg 2x
. I don’t think that browser will see 1200px version and will automatically try to use it because it’s as close as it can get to 2x. Or am I wrong?