The great Ethan Marcotte gave us a simple instruction when it came to dealing with responsive media. All we had to do was apply two CSS rules to a few elements and everything would work perfectly.

To be fair to Ethan, he was mostly correct.  Adding the following code


img {
    width: 100%;
    max-width: 100%;
}

… and then extending that simple block out to


img, iframe, object, embed, video {
    width: 100%;
    max-width: 100%;
}

…. and you are pretty much done with your flexible responsive images.

Pffft….

Solving part of the problem

Yes you now have flexible media, but unfortunately it leaves us with a series of issues.  

What happens if the user is on a slow connection? Well surely we want to serve them a smaller image. 

What happens if the user has a retina screen? Well surely we want to serve them a 2x or 3x size image.

What happens if both of those scenarios are correct?  Oh no!

There are many techniques you can use to

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.