Search code examples
htmlresponsive-designlazy-loadingimage-fallback

Responsive image, picture element for multiple image/format lazyload

Need help/correct way to implementing responsive image and multiple file formats in picture element, using lazysizes-aFarkas. The sample code as follow:

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

Appreciate any help :)

Solution

  • Try this :

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

    Also here is JSFiddle. to test it.