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

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

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.

Direct Link →