Render a post thumbnail, having the browser pick the smallest possible
source that fits the image size
You need to provide a sizes attribute that describes what size the image will be rendered at across various breakpoints.
The final display size of an image is affected by the stylesheet but the browser wants to start loading the image before the stylesheet has been loaded. This means that it doesn’t actually know which size from the srcset to use. Therefore you need to provide this information using the sizes attribute.
When using the_post_thumbnail() you can set the sizes attribute like so:
the_post_thumbnail(
'post-thumbnail',
array(
'sizes' => '(max-width: 960px) 50vw, 430px', // Just an example.
),
);
For images that are inserted into the editor, the srcset and sizes attributes are applied to images using the the_content filter when the content is rendered. To set a more appropriate sizes you need to use the wp_calculate_image_sizes filter.
add_filter(
'wp_calculate_image_sizes',
function( $sizes ) {
$sizes="(max-width: 960px) 50vw, 430px"; // Also just an example.
return $sizes;
}
);
It’s not possible for me to tell you exactly what value you want for sizes, since it depends on what your site looks like across screen sizes, which I don’t know. It’s also not specific to WordPress, so it’s not really on topic here. The MDN article on responsive images is a good overview of how these attributes are supposed to be used.
Also render
srcsetso the browser can choose a higher resolution image
on high-resolution displays
As I mentioned above, WordPress will automatically add the srcset attribute to images in post content. It will also add it to the_post_thumbnail() (or wp_get_attachment_image()) if you don’t specify it yourself.
When you upload an image WordPress will automatically create ‘thumbnail’, ‘medium’, ‘medium-large’, ‘large’ and 2560px-wide versions of the image. Images will also be created for any custom sizes created with add_image_size() or set_post_thumbnail_size(). WordPress uses these versions to populate the srcset attribute.
The important thing to note is that images in the srcset attribute need to be the same aspect ratio (use the <picture> element for having different image dimensions at different sizes). This means that any hard-cropped sizes like the square thumbnails will not have any alternative sizes for the srcset attribute unless the original source image happened to be the same aspect ratio, or additional custom sizes were registered with the same aspect ratio.