Setting up a new theme, I realize WordPress is outputting only one value in sizes.
<img src="https://site.dev/img-1-324x324.jpg" loading="lazy" srcset="https://site.dev/img1-324x324.jpg 324w, https://site.dev/img1-150x150.jpg 150w, https://site.dev/img1-100x100.jpg 100w" sizes="(max-width: 324px) 100vw, 324px" width="324" height="324">
Not a big deal with these tiny images but in my theme images can take up almost the entire screen and i want them to load the relevant size.
When I use 'full' as in
id get's heavy like:
<img src="https://site.dev/img1.jpg" loading="lazy" srcset="https://site.dev/img1.jpg 789w, https://site.dev/img1-247x300.jpg 247w, https://site.dev/img1-768x934.jpg 768w, https://site.dev/img1-416x506.jpg 416w, https://site.dev/img1-49x60.jpg 49w, https://site.dev/img1-74x90.jpg 74w" sizes="(max-width: 789px) 100vw, 789px" width="789" height="960">
I guess the browser rightfully takes the big image since it is the only one mentioned in sizes attribute.
I tried checking the value for
$attr just after calling
wp_get_attachment_image, and it is an empty array.
How do get the sizes attributes for WordPress to use?