如何在 Lightbox 中使用 WebP 图片？答案

【问题标题】：how to use WebP images in Lightbox?如何在 Lightbox 中使用 WebP 图片？
【发布时间】：2020-01-18 17:13:35
【问题描述】：

通过<picture> 标签使用 WebP 图像对于大多数浏览器来说是加快网络速度的好方法。我可以在灯箱内做同样的事情，但只是为了缩略图。

<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 设置的灯箱中）？

【问题讨论】：

标签： html lightbox webp

【解决方案1】：

发现这个帖子说 swipebox 灯箱是 webp 兼容的

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

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

添加webp只是一个简单的改变——只需在lightbox-photoswipe.php的235行添加扩展：

旧：

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'))) {

screenshot

【讨论】：

感谢您的意见。我没有使用 wordpress，即便如此，我认为仍然存在不处理容器或使用 javascript 的问题，这不是我的意图

【解决方案2】：

以下内容与 wordpress 相关 - 我正在使用 WebP Express 插件 - 它提供 webp 图像作为 jpg 的扩展，即“myimage.jpg.webp”我猜灯箱可以通过添加来提供图像“ .webp" 到某处的 js 代码

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

问题仍然是根据浏览器兼容性在lightbook中分别打开.jpg或.webp的方法

【讨论】：