Responsive Images: Use Cases and Documented Code Snippets to Get You Started

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: