响应式图片，图片元素为多个image/format lazyload

Question

需要 help/correct 方法在图片元素中实现响应式图像和多种文件格式，使用 lazysizes-aFarkas。示例代码如下：

<picture>
 <source data-scrset="example.jpg" type="image/jpeg" media="(max-width: 736px)"/>
 <source data-scrset="example.webp" type="image/webp"/>
 <img class="lazyload" data-src="example.png" type="image/png" alt="fallback"/>
</picture>

感谢任何帮助:)

Answer 1

试试这个：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
</style>
</head>
<body>
<img class="responsive" src="https://via.placeholder.com/600x400.webp" alt="PlaceHolder" onError="this.onerror=null;this.src='https://via.placeholder.com/600x400.png';" />
</body>
</html>

另外 here 是 JSFiddle。测试一下。

响应式图片，图片元素为多个image/format lazyload

Responsive image, picture element for multiple image/format lazyload

html

lazy-loading

responsive-design

image-fallback