The new <picture> element is a great solution for many responsive image needs; here is a great reference for usage.
Andreas Bovens begins by asking four questions:
1. Do my image sizes change depending on my responsive design rules?
2. Do I want to optimize for high-dpi screens?
3. Do I want to serve images with different mime types to browsers that support them?
4. Do I want to serve different art depending on certain contextual factors?
Then he breaks down every permutation and gives code examples for each.
Read more from the source: opera.com