使用带有下一代图像（如 .webp）的图片源 srcset 的简单翻转效果

Question

正在更新代码并优化站点速度，因此试图改变这种简单的 html 翻转效果：

<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">

大致如下：

<picture>
<source srcset="img1.webp" type="image/webp" onmouseover="this.src='img2.webp'" onmouseout="this.src='img1.webp'">
<source srcset="img1.jpg" type="image/jpeg"  onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
</picture>

我真的没想到后者会起作用，但对于实现这种基本效果的正确方法，浏览器将访问适当的图像格式，我在精神上受阻。

Answer 1

假设一个人已经在使用 Modernizr js，这是一种可能的解决方案，使用 CSS & HTML:

.webp .rollover{
  background:url("/img3/img1.webp")
  }
  
.webp .rollover:hover{
  background:url("/img3/img2.webp")
  }
  
.no-webp .rollover{
  background:url("/img3/img1.jpg")
  }
  
.no-webp .rollover:hover{
  background:url("/img3/img2.jpg")
  }

<div class="rollover"></div>

我知道还有其他解决方案，但这个对我有用。

此方法的一个缺点是在加载 img2.xxx 时存在延迟 'onHover'。然而，这也意味着 img2 不是明确的 'preloaded'，因此加快了整体页面下载时间。（也可以巧妙地做到这一点）。

使用带有下一代图像（如 .webp）的图片源 srcset 的简单翻转效果

Simple rollover effect using picture source srcset with next-gen images like .webp

html

image

rollover

srcset