Chapter 1. Working with Responsive Images
"A picture tells a thousand words…"
These words used in an advert dating from 1913 for the Piqua Auto Supply House of Piqua, Ohio, still ring true over a hundred years later. The only difference is the advent of technology—with the increasing use of mobile phones, tablets, and portable devices comes a need to display content on smaller devices. While text might be easy to display, images are less so, but are still just as important. Throughout this chapter, we're going to look at some of the tips and tricks you need to learn in order to display images of the right size and quality on a variety of different devices.
Creating responsive images can be as easy or complex as needed. In this chapter, we will cover a host of topics, which include:
- Working with fluid images, icons, and sprites
- Catering to vendor prefixes, image formats, and different platforms
- Catering to HD/Retina images and using the
<picture>tags - Determining an available viewport for use
- Working out media queries using CSS, JavaScript, or data tags
- Building a responsive carousel and creating responsive maps
Curious? Let's get started!
