On the modern web you don't have to choose.
You can now use the srcset specification for responsive images. See this great series from cloudfour for more details, be sure to read the entire series. This allows you to serve different size images to different screen sizes.
You can use srcset today. 64.65%(at the time this was written source caniuse) of global users have browsers that support it.
Using a the picturefill polyfill you get even more support.
The great thing about srcset is, that it still works as before for browsers that don't support it.
<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">
browsers that don't support it will just use cat.jpg, while browsers that support srcset will choose the best fitting image for their viewport from the srcset attribute.
To get you started you can have a look at the new tool responsivebreakpoints to start determining some breakpoints for your website.
Oh and as Evgeniy says in his anwser, don't forget to optimize the images.