Andreas Bovens put together this epic recipe list for <picture>
/ <img srcset>
. There are four scenarios:
- Do my image sizes change depending on my responsive design rules?
- Do I want to optimize for high-dpi screens?
- Do I want to serve images with different mime types to browsers that support them?
- Do I want to serve different art depending on certain contextual factors?
Then Andreas shares what the code would look like for all of those plus any combination of them.