如何在Lightbox中使用WebP图像？

Question

通过<picture>标签使用WebP图像是加快大多数浏览器网络访问速度的好方法。我可以在Lightbox中执行相同的操作，但仅是缩略图。

<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>

是否有办法使用WebP图像甚至用于单击时显示的图像（在通过锚点href设置的灯箱中？

Answer 1

发现此线程表明swipebox灯箱与webp兼容

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

也许您可以类似地修改现有的灯箱代码：

[添加webp只是一个简单的更改-只需在lightbox-photoswipe.php的第235行中添加扩展名：

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

Answer 2

[以下内容与wordpress有关-我正在使用WebP Express插件-该服务将webp图片作为jpg的扩展，即“ myimage.jpg.webp”，我猜是灯箱可以通过简单地添加即可投放图片。 webp”到某处的js代码

*更新似乎有可能-我可以通过将照片中的自定义网址更改为.webp版本来使灯箱打开webp照片

问题仍然是基于浏览器兼容性，在lightbook中分别找到打开.jpg或.webp的方法