August 27, 2013 As Mat Marquis recently summarized on SmashingMag, the srcset attribute allows developers to specify a list of sources for an image that are delivered depending on the pixel density of a user's screen. An example of how srcset may be used is as follows, where we define three different image sources for the resolutions we wish to target: <img alt="My photo" src="photo.jpg" srcset="p
![Generate multi-resolution images for srcset with Grunt](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a3a431cc7ed9760ec4328ae8200bdee2aae26fd/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fddxwdqwkr%2Fimage%2Fupload%2Fw_1600%2Ch_836%2Cq_100%2Fl_text%3AKarla_72_bold%3AGenerate%2520multi-resolution%2520images%2520for%2520srcset%2520with%2520Grunt%2Cco_rgb%3Affe4e6%2Cc_fit%2Cw_1400%2Ch_240%2Ffl_layer_apply%2Cg_south_west%2Cx_100%2Cy_180%2Fl_text%3AKarla_48%3Aaddyosmani.com%252520%2525C2%2525B7%252520August%25202013%2Cco_rgb%3Affe4e680%2Cc_fit%2Cw_1400%2Ffl_layer_apply%2Cg_south_west%2Cx_100%2Cy_100%2Fl_twitter_name%3Aaddyosmani%2Fc_thumb%2Cg_face%2Cr_max%2Cw_380%2Ch_380%2Cq_100%2Ffl_layer_apply%2Cw_140%2Cg_north_west%2Cx_100%2Cy_100%2Fv1681336739%2Faddy%2Fgrain-gradient.png)