srcset-image

Polyfill for srcset feature as Web Components.

Fork me on GitHub

Usage

Load `srcset-image.js` in your HTML.

<script src='srcset-image.js'></script>

Modify your <img> elements such as following (srcset feature specification).

<img is='srcset-image' src='path/to/your/image.jpg' srcset='path/to/your/image-1.5x.jpg 1.5x, path/to/your/image-2x.jpg 2x'>

Fallback

If browser does not support document.registerElement(), Images will be loaded as usual.

Demo

Change devicePixelRatio in DevTools and check the loaded image.

<img is='srcset-image' src='assets/img/1.jpg' srcset='assets/img/2.jpg 1.5x, assets/img/3.jpg 2x'>