如何在 Lightbox 中使用 WebP 图片？

Question

Using WebP images through <picture> tag is a great way of speeding up the web for a majority of browsers. I am able to do the same inside the Lightbox, but just for a thumbnails.

<a href="some_img.jpg" data-lightbox="reference">
    <picture>
        <source srcset="some_img.webp" type="image/webp">
        <img src="some_img.jpg"alt="">
    </picture>
</a>

Is there a way to use the WebP images even for the image displayed on click (in Lightbox set through the anchor's href )?

Answer 1

The following relates to wordpress - I'm using the WebP Express plugin - Which serves the webp images as an extention to jpg ie "myimage.jpg.webp" my guess is the lightbox could be served the image simply by adding".webp" to js code somewhere

*Update it seems possible - I can get the lightbox to open the webp photo by changing the custom url in the photo to go to .webp version

The problem remains figuring out a way to open the .jpg or the .webp respectively in the lightbook based on the browser compatibility

Answer 2

Found this thread which says that the swipebox lightbox is webp compatible

https://wordpress.org/support/topic/support-webp-images/

maybe you can modify your existing lightbox code similarly:

Adding webp is just a simple change – just add the extension in line 235 of lightbox-photoswipe.php:

OLD:

if (in_array($type['ext'], array('jpg', 'jpeg', 'jpe', 'gif', 'png', 'bmp', 'tif', 'tiff', 'ico'))) {

NEW:

if (in_array($type['ext'], array('jpg', 'jpeg', 'jpe', 'gif', 'png', 'bmp', 'tif', 'tiff', 'ico', 'webp'))) {

screenshot