Learning Responsive Web Design

Chapter 6. Images

So far you’ve learned how to set up your web page, add some basic styles, and use media queries to adjust the layout depending on viewport width.

But your page is going to look quite boring until you get some images on it.

You’ve probably heard that there’s a lot of complexity around adding images to responsive websites. Images won’t always be displayed at the same size, because they’re flexible, so how do we make sure that we aren’t wasting bandwidth by sending a huge image to a device with a small screen?

And then how do we make sure we’re sending appropriate images to high-density (retina) screens?

This is one of the parts of responsive design that’s still being worked out. There are a few solutions that are in common use, which we’ll talk about here, but each has some drawbacks, and none of them seem like the perfect solution. It’s likely that there will be new ideas coming along in this area in the next couple of years that may change how we handle images on responsive websites.

In the meantime: start with the basics, which we’ll cover in this chapter. Optimize your images for the Web. Don’t use images when stylized text can do the same job, and use other solutions like icon fonts when appropriate. Make sure your images have good alternative (alt) text so they’re accessible to everybody.

When you’re deciding the best way to handle responsive images on your site, look at the different options and figure out what works for you. If you don’t implement a responsive ...