Solution 1 :

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

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:


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


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


Solution 2 :

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

Problem :

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">
        <source srcset="some_img.webp" type="image/webp">
        <img src="some_img.jpg"alt="">

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


Comment posted by koubin

thanks for input. I am not using wordpress and even for that I think there is still issue with no dealing with container or using javascript, which is not my intention here