24 ways: Adaptive Images for Responsive Designs

24 ways: Adaptive Images for Responsive Designs.

So you’ve been building some responsive designs and you’ve been working through your checklist of things to do:

  • You started with the content and designed around it, with mobile in mind first.
  • You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now.
  • You’ve baked in a few media queries to adapt your layout and tweak your design at different window widths.
  • You’ve made your images scale to the container width using the fluid Image technique.
  • You’ve even done the same for your videos using a nifty bit of JavaScript.

You’ve done a good job so pat yourself on the back. But there’s still a problem and it’s as tricky as it is important: image resolutions.

HTML has an <img> problem