Carly, there really isn't a best practice. You need to look at the entire scope of what you are trying to accomplish as well as the resources that you have and define what your end result needs to be.
For instance, if your layout will accept dynamically resized images on the fly as the layout responds to different screen sizes, as well as "Properly" prepping the image for web (size, pixilation and color) then one image would be the way to go.
On the other hand, if your images are significantly larger (size and loading), then you may want to think about using multiple images depending on size, for different viewports. Remember you will not really achieving smooth scaling this way since you are basically determining viewport, etc. and selecting the correct image. Definitely more work this way. Also, this is considered "Adaptive" not "Responsive". The first example is responsive.
Personally, I prefer responsive whenever possible, this way I have smooth scaling and 1 image.