https://github.com/tableflip/responsible
Dealing with images responsibly
https://github.com/tableflip/responsible
Last synced: 12 months ago
JSON representation
Dealing with images responsibly
- Host: GitHub
- URL: https://github.com/tableflip/responsible
- Owner: tableflip
- Created: 2015-06-30T22:25:39.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-06T10:30:22.000Z (almost 11 years ago)
- Last Synced: 2025-02-15T12:46:46.360Z (over 1 year ago)
- Language: JavaScript
- Size: 113 KB
- Stars: 1
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsible - dealing with images responsibly
Find the breakpoints used on a website.
Check the rendered width of the images on a page at each breakpoint.
Recommend images sizes for `srcsets` and `sizes` attributes.
Create images optimising script that consumes the output, finds the images and resizes.
```sh
npm install
casperjs sizes.js https://tableflip.io
5 images found:
/img/logo-stroke.svg 100 581
/img/icon-info.svg 19 99
/img/icon-briefcase.svg 24 48
/img/icon-blog.svg 20 100
/img/icon-phone.svg 20 80
2 breakpoints found
(min-width: 940px)
(min-width: 720px)
2 widths found
940px
720px
```
## Notes
README, is good: http://ericportis.com/posts/2014/srcset-sizes/
Can we WebP? http://caniuse.com/#search=webp%20image
Probably not.