Awesome grunt task! :)
One nit though...
Seems like the example on http://www.andismith.com/grunt-responsive-images/ (as well as the copy) is using the full <picture> syntax, where they actually shouldn't.
Since AFAICT this grunt task does not involve art-direction (e.g. no cropping, proportion change, etc), the examples would be significantly better off showing the <img sizes srcset> syntax, which is the best fit for the use-case tackled by this task.
So the example syntax should be:
<img sizes="(min-width: 820px) 800px, (min-width: 640px) 640px, 320px" srcset="wedding-small.jpg 320w, wedding-medium.jpg 640w, wedding-large.jpg 800w">
Awesome grunt task! :) One nit though... Seems like the example on http://www.andismith.com/grunt-responsive-images/ (as well as the copy) is using the full
<picture>syntax, where they actually shouldn't.Since AFAICT this grunt task does not involve art-direction (e.g. no cropping, proportion change, etc), the examples would be significantly better off showing the
<img sizes srcset>syntax, which is the best fit for the use-case tackled by this task.So the example syntax should be:
<img sizes="(min-width: 820px) 800px, (min-width: 640px) 640px, 320px" srcset="wedding-small.jpg 320w, wedding-medium.jpg 640w, wedding-large.jpg 800w">