Wordpress 投稿画像でpictureを使う方法

タイトルそのままですが、Wordpressの「the content」やカスタムフィールドのwysiwygエディタなどでアップロードした画像の出力結果をカスタマイズしたいと思い、その際にpictureを用いた構成にできればと考えております。

<picture>
  <source data-srcset="image-full.jpg" media="--xl" />
  <source data-srcset="image-large.jpg" media="--lg" />
  <source data-srcset="image-medium.jpg" media="--md" />
  <img data-src="image-mini.jpg" />
</picture>

※mediaの部分は設定したサイズがjsで入るようになってます

こちらの記事などを参考にして
https://wood-roots.com/web/wordpress/1134
フィルターフックなどを活用してできないか検討しましたが実現することができませんでした。

求めている事ができそうなプラグインを見つけましたが、
海外製かつ国内では全く情報が出てこなかったので、解読できずでした。
https://wordpress.org/plugins/just-responsive-images/

pictureを使う事を諦めて、Wordpressデフォルトのsrcsetを使おうとも考えましたが、デフォルトでは意図したサイズ設定になっておらず、以下の記事を参考にカスタマイズを試みたのですが、明記されたソースを試してみると、デフォルトのsrcsetが削除され使う事ができませんでした。
https://koyacode.com/how-to-change-srcset-on-wordpress/

Wordpressの投稿をpictureで表示したいというニーズは多いと思ったのですが、全く参考記事を見つける事ができず、こちらに質問させていただきました。投稿画像をディバイスに無駄なく配置させる良い方法があれば教えていただければ幸いです。

何卒よろしくお願いいたします。

tabuu

2021/09/28 00:24

提示されているソースはJavaScriptでどのように展開されるのでしょうか？また、・Aサイズの場合は山の画像、Bサイズの場合は海の画像・Aサイズの場合はjpg、Bサイズの場合はpng というように画像サイズ以外を出し分ける場合はpictureタグが有効ですがどのような目的でしょうか？

nats

2021/09/29 07:08

メディアの部分には、 {'--xs-max':'(max-width: 575px)','--sm':'(min-width:576px)','--md':'(min-width:762px)','--lg':'(min-width:897px)','--xl':'(min-width:1200px)','--2xl':'(min-width:1366px)','--3xl':'(min-width:1600px)'}; こちらのサイズが適応されます。 pictureで出力したい目的ですが、add_image_sizeに設定した画像を、ブラウザサイズにそって適応したいと考えております。