A staggering fact, but absolutely true: a survey carried out by the mobile developer company Tribilis in April 2014 found that for 155 sites surveyed, only 21 percent loaded in four seconds or less on smartphones. Moreover, those that took longer had an average page weight of 1.7 MB.

Sobering thoughts, but ones that perfectly illustrate the pitfalls of mixing videos and images on pages in responsive design! We need to strike a balance between displaying the right media content that is not too large or too small while keeping our page load times small. This chapter works through some examples and details some of the pitfalls associated with mixing content, which can lead to heavy pages and long download times.

We'll cover a number of topics in this chapter, which will include: