I have a simple HTML page using the following code to popup jpg images using Magnific Popup JS:

<li class="001">
<a href="images/large-image.jpg" class="002">
<div class="003">
<img src="images/thumbnail-image.jpg" alt="example alt-tag" />
</div>
<div class="004">
<h3 class="005">Photo Title Example</h3>
<p class="006">Longer description example about the photo here</p>
</div>
</a>
</li>

I would like to use WEBP images instead. I know the code to insert simple WEBP images on the page would be :

<picture> 
   <source type="image/webp"  srcset="images/thumbnail-image.webp"
   <img src="images/thumbnail-image.jpg" alt="example alt-tag" />
</picture>

Is there a way to adjust my codes to use WEBP with Magnific Popup JS ?

Have tried below:

<li class="001">
<a href="images/large-image.webp" class="002">
<div class="003">
<img src="images/thumbnail-image.webp" alt="example alt-tag" />
</div>
<div class="004">
<h3 class="005">Photo Title Example</h3>
<p class="006">Longer description example about the photo here</p>
</div>
</a>
</li>