One size fits all is certainly not a phrase I would use when it comes to responsive images. If you're loading a website on a smaller device, it just makes sense to use a smaller image. Sure, you could simply scale the image and resize it with the parent container, but why not load a smaller image that will speed up your load time and still look great?

A great little JavaScript plugin that you can use to achieve this is called picturefill.js. Let's look at an example.

The plugin is already included in the source files, so we can just modify the body content to get this working. This is illustrated in the following code:

<div class="container">
    <div class="header">
        <picture>
            <source srcset="img/large.jpg"
                    media="(min-width: 1200px)" />
            <source srcset="img/medium.jpg"
                    media="(min-width: 900px)" />
            <source srcset="img/small.jpg" />
            <!-- fallback --...