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
