image width 100% or separate images for different screen sizes?

From what I have recently read it is a good idea to have at least two different sized images when shooting for a more responsive layout: one for mobile platforms and one for desktop experiences.

In Mobile First by Luke Wroblewski he discusses this issue and many other that provide a helpful foundation for building from a mobile first perspective.

"Where we still need to do some work, though, is with high-resolution images. Unlike browser-rendered controls, text, and visual elements, image files won’t automatically adjust to higher pixel density screens. They’ll render at the correct size but lack crispness and definition when pixel density is high (fig 7.2). To account for this, you’ll need two sets of images: one large (twice the resolution) and one at standard resolution. You can then tell web browsers (using CSS3 media queries, JavaScript, or a server-side script) to only include the higher resolution graphics on devices with a high-resolution display."

Hopefully this helps!

ps The A Book Apart series is super clean, helpful, and quick to read. Many of them can be found in PDF form if you google search the title and add pdf to the end of your query.