Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs


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">
            <source srcset="img/large.jpg"
                    media="(min-width: 1200px)" />
            <source srcset="img/medium.jpg"
                    media="(min-width: 900px)" />
            <source srcset="img/small.jpg" />
            <!-- fallback --...