I have a web page with a row 1200px wide with some 3/4 columns, each one holding an image, that is each image may be 300/400 px wide. On collapse, below the breakpoint (768), images appear blurred because they are scaled to 768px in width. I wanted to keep things as small as possible, however I think I'll have to use larger images, shrinking them with media queries on large desktop view and 1:1 (almost) on tablets.
Any thought?
You can upload the images to 768px if that is the biggest they get. If you have a lot of images and worry about download time for slow connections or bandwidth from server, consider only load images depending on resolution.
You can read more here: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
You can also google responsive images and see what would fit you best, or build your own solution if you are into that :)