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

By Chris Coyier on July 24, 2014 in Web Design
0

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 to ArticlePermalink


Responsive Images: Use Cases and Documented Code Snippets to Get You Started is a post from CSS-Tricks