I have defined a custom image size using Code Snippets plugin like this:
add_image_size( 'hero_image', 1280, 853, true );
It appears in the list of available thumbnail sizes:
Have a field group with a Single Image-type of custom field attached to Posts.
For a test post, set a 1920 x 1282 px image as the hero image.
In the Template for single posts, have
<?php $image = rwmb_meta( 'single_image_gkaiaq9nbl6' ); printf( '<img srcset="%s" src="%s" alt="%s">', $image['srcset'], $image['full_url'], $image['alt'], ); ?>
On the frontend the HTML output is like this:
<img srcset="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-150x150.jpg 150w, https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-300x300.jpg 300w, https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-100x100.jpg 100w" src="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629.jpg" alt="Jay Bird Ornithology Species Fauna - jggrz / Pixabay">
100x100 thumb is being shown on desktop viewport widths and it is obviously blurry.
I am wondering why my custom image size is not being added to srcset.
Thanks in advance.