{"id":15310455,"url":"https://github.com/abernier/srcset-polyfill","last_synced_at":"2025-10-08T17:32:08.821Z","repository":{"id":36505819,"uuid":"40811504","full_name":"abernier/srcset-polyfill","owner":"abernier","description":null,"archived":false,"fork":true,"pushed_at":"2017-07-04T01:00:11.000Z","size":211,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-12T02:40:00.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"borismus/srcset-polyfill","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abernier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-16T10:53:05.000Z","updated_at":"2017-03-20T16:29:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/abernier/srcset-polyfill","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abernier%2Fsrcset-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abernier%2Fsrcset-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abernier%2Fsrcset-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abernier%2Fsrcset-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abernier","download_url":"https://codeload.github.com/abernier/srcset-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877301,"owners_count":16554910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T08:28:17.297Z","updated_at":"2025-10-08T17:32:08.466Z","avatar_url":"https://github.com/abernier.png","language":"JavaScript","readme":"# A spec-compatible, unit-tested polyfill for `\u003cimg srcset\u003e`\n\nSee [the specification][spec] for the reference algorithm.\n\n## INSTALL\n\nwith NPM:\n\n```sh\nnpm install https://github.com/abernier/srcset-polyfill/archive/master.tar.gz\n```\n\nor with a plain old `\u003cscript\u003e` tag:\n\n```html\n\u003cscript src=\"https://cdn.rawgit.com/abernier/srcset-polyfill/master/build/srcset.js\"\u003e\u003c/script\u003e\n```\n\nNB: minified version here https://cdn.rawgit.com/abernier/srcset-polyfill/master/build/srcset.min.js\n\n## Usage\n\nUse the `data-srcset` attribute of `\u003cimg\u003e` elements. For example:\n\n```html\n\u003cimg alt\n  src=\"foo-mobile.png\"\n  data-srcset=\"foo-mobile.png 1024w, foo-desktop.png 5000w\"\u003e\n```\n\nor more advanced one:\n\n```html\n\u003cimg alt\n  src=\"160x120.png\"\n  data-srcset=\"320x240.png 320w,640x480 320w 2x, 768x576.png 768w,1536x1152.png 768w 2x, 1024x768.png 1024w,2048x1536.png 1024w 2x, 2048x1536.png 5000w\"\u003e\n```\n\nInclude `build/srcset.min.js` in your page. Then, you'll have a `srcset` object with the following API :\n\n - `srcset.update()` -- update all images in the page\n - `srcset.imgs.get(\u003cimg\u003e).update()` -- update one image\n\nA `'srcchange'` event will also be triggered when the `src` of an image changes :\n\n```javascript\nmyimg.addEventListener('srcchanged', function (data) {\n\tconsole.log(\"img with previous src %s was changed to %s\", data.previous, data.actual)\n}, false);\n```\n\n## Open questions\n\n- How to reliably check for srcset support in the browser (so as to not\n  attempt to polyfill if it's not necessary?)\n- Is it safe to use `-webkit-transform` to scale things?\n- Is it worth falling back to `-webkit-image-set` if available?\n\n## Using srcset-polyfill to reduce bandwidth for mobile devices\n\nIf you are wanting to serve smaller images to mobile devices **to reduce\nbandwidth** it is important to set your syntax correctly to [avoid downloading\nthe mobile optimised image and the original (larger) image][issue11]. The\ncorrect syntax to use is:\n\n\u003e `\u003cimg src=\"small.jpg\" srcset=\"small.jpg 320w, medium.jpg 960w, large.jpg\" /\u003e`\n\n#### Notes\n\n* Include the smallest image in the `src` attribute (in the above example:\n`small.jpg`).\n* Include the smallest image and its associated **max** viewport width in the\n`srcset` attribute (in the above example: `small.jpg 320w`).\n* Include any other, wider viewport widths in the `srcset` attribute (in the\nabove example: `medium.jpg 960w`).\n* Include the full size image in the `srcset` attribute, without any viewport\nwidth restriction (in the above example; `large.jpg`).\n\n[spec]: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates\n[issue11]: https://github.com/borismus/srcset-polyfill/issues/11\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabernier%2Fsrcset-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabernier%2Fsrcset-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabernier%2Fsrcset-polyfill/lists"}