Smart Custom Field — как вывести изображение тегом picture?

Использую плагин Smart Custom Fields

Необходимо вывести изображение в двух форматах - webp и png.

Формат png через тег img выводится просто -

<img src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">

А вот формат webp через тег picture видимо застрял где-то...

<div class="become-block__image">
	   <picture>
		  <source srcset="<?php echo wp_get_attachment_image_src($meta['become_image_webp'], 'full')[0]; ?>" type="image/webp">
		  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">
	  </picture>
</div>

Скажите, где ошибка.. возможно необходимо выводить по другому?

Заметки к вопросу:
Kama 1.4 года назад

У тебя похоже плагин lazy load работает. Иначе что это такое:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="...

И видимо он не умеет работать с picture. Сам тег picture ты вроде правильно юзаешь.

sniper 1.4 года назад

Да, это отложенная загрузка на чистом js.
Жаль конечно, если не может 🤷
Спасибо за ответ!

Kama 1.4 года назад

Почитай доку для этого скрипта, там наверняка есть решение твоей задачи, то как правильно нужно указать атрибут для picture, возможно по такой же схеме:

<picture>
	  <source srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="<?php echo wp_get_attachment_image_src($meta['become_image_webp'], 'full')[0]; ?>" type="image/webp">
	  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">
</picture>