[Resolved] Types image field not outputting srcset attribute

[Author]

Posts

[Shawn]

I am using a Types image field to output a hero image in a template. The image tag that is being generated by Types does not include the srcset attribute like normal WordPress image tags. Is this normal behavior, and is there a fix if not? I found a couple other threads related to this but they are old and one referenced this being fixed in v3.2, but it's not working for me if it was.

This is the field:
[types field='hero_image' alt='%%ALT%%' size='hero-full' resize='proportional'][/types]

This is what is getting output on the front end:
<img width="1600" height="660" src="hidden link" class="attachment-hero-full" alt="" title="" style="">

This is obviously bad for mobile performance as the browser is downloading a much larger image than needed.

Any way to fix?

[Waqar]

Hi Shawn,

Thank you for contacting us and I'd be happy to assist.

During testing on my website, I've noticed that the "srcset" attribute is included in the images with registered sizes and not the resized ones.

Can you please try this without the resize='proportional' attribute:

 [types field='hero_image' alt='%%ALT%%' size='hero-full'][/types]

regards,
Waqar

[Shawn]

Yeah, I tried that and it made no difference.

I can send you login info if you want to take a look.

[Waqar]

Thanks for the update and that is strange.

Can you please share the temporary admin login details, along with the page where this field's output can be seen?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing the admin access.

During some further testing and research, I've discovered that "srcset" attribute is included in the image field's markup, only for the sizes which are registered by WordPress itself.
( i.e. large, medium and thumbnail )

[types field='hero_image' alt='%%ALT%%' size='large'][/types]

[types field='hero_image' alt='%%ALT%%' size='medium'][/types]

[types field='hero_image' alt='%%ALT%%' size='thumbnail'][/types]

This decision was made, because adding "srcset" attribute for all image sizes would need lot of processing and system would need to create a new srcset for each different size and ratio (if crop is used), for every uploaded image.

[Shawn]

Understood. That's disappointing but I understand. Thanks for your time and help in figuring this out!