If you read the last two articles you understand what flexible grids and media queries are, so it's time to look at the final ingredient in RWD: Flexible Media. Why flexible media? Imagine loading a 600 pixel wide image into a 320 pixel wide screen. What would happen?
Here's a practical example; using breakpoints the following image looks fine on a desktop:
Here it is on an iPad:
I added a dotted red border to both containing boxes to illustrate what happens when an image is rendered within a smaller containing element: It bleeds through its borders.
Overflow and Maximum Widths
One solution to this problem is to use:
Although this solution prevents the bleeding image issue, it's not the silver bullet we're looking for. As you can see part of the image is clipped. We need the image to shrink relative to its containing element. Fortunately, there is a simple CSS technique that will accomplish this. Add the following style:
img, embed, object, video
And just like that, in all modern browsers, your image will proportionally shrink to fit in its containing element (and with this technique you've also covered several other media types).
The end result:
Of course to be completely responsive we should address font sizes and the space between the image and the text for this breakpoint.
NOTE: IE 6 does not support max-width, you will need to use
width: 100% and follow the directions in this article – if you're still supporting IE 6!
CSS Background Property
But still, this isn't the silver bullet I'm looking for. One thing you need to consider is that in a smart phone, although the image will resize to its container, it's still larger than necessary and will consume bandwidth. In mobile bandwidth comes at a premium so wherever we can save on bandwidth we improve the user experience.
One possible solution is to serve a completely different lighter image for smaller screens using the CSS background property:
background: image-url("icons/devices-100px.png") 0 0 no-repeat
background: image-url("icons/devices-200px.png") 0 0 no-repeat
background: image-url("icons/devices-350px.png") 0 0 no-repeat
The beauty of this method comes in the bandwidth savings, but the drawback is the need to create multiple images. I personally don't mind doing this.
Better and/or Other Solutions List
This responsive image thing is a rapidly changing practice, so in anticipation of new thoughts and practices, I will add articles to this little section that may be helpful to you as I come across them:
Want to know when the next article is published? Subscribe here. Thanks for reading!