In this session we are going to explore the one of the most discussed and debated components of responsive design, fluid images. We’ll look at the original technique and its implementation and then explore some of the problems concerns and solutions.

• The Original Technique
• Demo

Key Concepts

• New units of Measurement
  • Example: Typography
  • Example: Grid
• srcset Attribute
• picture Element

Current Thoughts on Responsive Images

• Responsive Images – The Ultimate Guide
• HTML5 Picture Element
• Responsive Images in Practice

Alternative Approaches

• Adaptive Images – Server-Side PHP/JavaScript
• HiSRC – JavaScript
• picturefill 3.0 – Javascript Polyfill
• rwdimages – JavaScript
• Foresight.js – Bandwidth Testing
• Responsive Enhance – JavaScript
• More on Responsive Image Techniques Here…

Additional Resources

• Responsible Responsive Images