Chapter 6. Optimizing Images and Video

Now we have a site that looks great on mobiles and has a much better user experience on them, too. The next thing to turn our attention to is images and other media.

When working with images for mobile devices, we need to consider two things. The first one is how they fit within the responsive layout. This is fairly straightforward to address, and we will explore two methods which use CSS. The second thing is the image files being downloaded and how big they are—we will examine some methods for sending smaller image files to mobiles.

We will also take a look at video for mobile, and work though another two issues. The first one is making any video fit within the small screen layout, which as we will see requires a bit more code that we will need to get our images to fit. And, the second one is ensuring our video is compatible with a range of mobile devices and plays correctly. We'll look at using third-party video streaming services, for example YouTube...