https://github.com/abernier/srcset-polyfill

https://github.com/abernier/srcset-polyfill

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/abernier/srcset-polyfill
• Owner: abernier
• Fork: true (borismus/srcset-polyfill)
• Created: 2015-08-16T10:53:05.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-04T01:00:11.000Z (over 7 years ago)
• Last Synced: 2023-03-12T02:40:00.648Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 206 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# A spec-compatible, unit-tested polyfill for ``

See [the specification][spec] for the reference algorithm.

## INSTALL

with NPM:

```sh

npm install https://github.com/abernier/srcset-polyfill/archive/master.tar.gz

```

or with a plain old `` tag:

```html

<script src="https://cdn.rawgit.com/abernier/srcset-polyfill/master/build/srcset.js">

```

NB: minified version here https://cdn.rawgit.com/abernier/srcset-polyfill/master/build/srcset.min.js

## Usage

Use the `data-srcset` attribute of `` elements. For example:

```html



```

or more advanced one:

```html



```

Include `build/srcset.min.js` in your page. Then, you'll have a `srcset` object with the following API :

 - `srcset.update()` -- update all images in the page

 - `srcset.imgs.get().update()` -- update one image

A `'srcchange'` event will also be triggered when the `src` of an image changes :

```javascript

myimg.addEventListener('srcchanged', function (data) {

	console.log("img with previous src %s was changed to %s", data.previous, data.actual)

}, false);

```

## Open questions

- How to reliably check for srcset support in the browser (so as to not

  attempt to polyfill if it's not necessary?)

- Is it safe to use `-webkit-transform` to scale things?

- Is it worth falling back to `-webkit-image-set` if available?

## Using srcset-polyfill to reduce bandwidth for mobile devices

If you are wanting to serve smaller images to mobile devices **to reduce

bandwidth** it is important to set your syntax correctly to [avoid downloading

the mobile optimised image and the original (larger) image][issue11]. The

correct syntax to use is:

> ``

#### Notes

* Include the smallest image in the `src` attribute (in the above example:

`small.jpg`).

* Include the smallest image and its associated **max** viewport width in the

`srcset` attribute (in the above example: `small.jpg 320w`).

* Include any other, wider viewport widths in the `srcset` attribute (in the

above example: `medium.jpg 960w`).

* Include the full size image in the `srcset` attribute, without any viewport

width restriction (in the above example; `large.jpg`).

[spec]: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates

[issue11]: https://github.com/borismus/srcset-polyfill/issues/11