Responsive Images - Why It's a Must and 4 Ways to Have it Done

We need to change our approach to images. Why? Because the Internet has changed. People aren't just browsing at home, any more, they're doing it all over the place, on screens of almost every conceivable size. In fact, there are parts of the world where the only connection people have to the Internet is via smartphones.

Not iPhones, mind you. We're talking cheap phones. What's more, many of them are doing it with limited data plans.

This means that we've got to design our websites to account for this, and this means optimizing images for the mobile web. Raster images, such as .jpeg files, are not suited to responsive designs. Their measurements were designed to be fixed, and the big ones can eat up bandwidth.

If you want to keep costs down for you and your users, while making sure your website always looks its best, you'll need to find a way to make your images responsive. The good news is that people are working on the problem. There are already a few solutions out there. The trick is to know which one will work best for you.

Let's start with the first, and easiest, of your options:

max-width: 100%;

Simply put, you set up that little bit of CSS to apply to all images. Once in place, it will make sure that all of your images stay inside of their parent elements. That way, when people view your website on a smaller screen, the image is guaranteed to shrink down as it should.

Example:

img {

max-width: 100%;

}

Pros

• It's simple, and it works perfectly so long as you don't set any pixel-specific image heights.
• You don't need to change your HTML at all. The regular <img> tag gets the job done.
Universal browser support.

Cons

• Retina screens: Unless you make all images twice as big as the actual pixel dimensions you need, they'll look funky on certain machines, like Macs, and now some Android devices. Blame Apple. I do.
• Using lots of huge images (whether you're dealing with Retina screens or not), can be hard on performance on mobile devices. Worse, they can eat up data on limited data plans. You don't want to do that to your users if you can help it.

This simple technique has its place, but it will not be right for every situation. If your website will be serving lots of images to users on mobile devices, you might want to implement one of the following proposed solutions.

Note: The next two solutions are included in the HTML5 specification. They will become "official" solutions over time, as more browsers begin to support them fully.

srcset

Typically, when you embed an image into a page, you only define one "source", in the form of the src attribute, like so:

< img src="/img_articles/22532/whatever.jpg" alt="whatever">

The srcset attribute allows you to add other versions of the image, set the screen width at which those images are meant to appear, and let the browser make the decisions. This means that the user's device only downloads the right image for their screen size.

You would set it up like so:

< img src="/img_articles/22532/whatever-small.jpg" srcset="whatever-medium.jpg 1000w, whatever-large.jpg 2000w" alt="whatever">

Pros

• You're letting the browser do the math. Picking the right image for the right screen size can be tricky, and if you're using a lot of images, you probably don't want to bother.
• You're saving bandwidth. This means lower hosting costs for you, and lower data costs for mobile users.
• Partial browser support. In fact, this is the second-best-supported option on the list.

Cons

It's only partial browser support. To make it work in older browsers (including some mobile browsers), you'll need to use a bit of JavaScript called a polyfill.

Two such polyfills are srcset-polyfill, and picturefill. Incidentally, picturefill also provides browser support for the <picture> element, which is coming up next.

In the end, using the srcset attribute on a single <img> tag is probably the option that people will use most in the future. It just makes sense, when most of us will simply be using several differently-size versions of the same image, in order to save bandwidth.

<picture>

Where srcset is just an attribute that can be applied to any image, <picture> is a full-fledged element, with its own tag and everything. Its general purpose is the same, though. Tell the browser that there are several different versions of an image, and which screen sizes to display them on.

The difference is in the math. If you only use srcset, the browser will make some calculations based on the screen or windows size of the browser that the site is being viewed on. You can give hints, but the browser itself makes the call.

With <picture>, you are in complete control. If you say that a certain image should be shown at a certain screen width, then that's what will be shown. The cost of this is more code. Therefore, it is generally recommended that srcset be used when dealing with different sizes of the same image. <picture> is to be used when you're doing art direction, and might want a completely different image shown at a specific screen size.

The code looks like this:

< picture>

< source srcset="whatever-smaller.jpg" media="(max-width: 768px)">

< source srcset="whatever-default.jpg">

< img srcset="whatever-default.jpg" alt="whatever">

< /picture>

Pros

• Again, you potentially save bandwidth. That benefit is huge enough that it bears repeating.
• Greater control over which images get shown at specific screen sizes.

Cons

• More code. Don't use this element when you don't have to, and you'll have an easier time of things.
• Currently very little browser support. To be able to use this element at all, you'll need to use the polyfill that was listed above.

Adaptive Images

This concept was developed by Matt Wilcox, and may be, in some ways, one of the most convenient options once you have it set up. It requires PHP, including some extras JavaScript, and adding a custom .htaccess file, but the setup time is worth it.

Basically, once everything is in place, all you have to do is include your images and go. The JavaScript will detect the size of the screen. If the screen is small enough, any too-large images embedded in your page will be sent to the PHP script, scaled down, and served to the browser. The original image will not be loaded, and bandwidth will be saved.

Pros:

• All of the benefits of srcset and <picture> with less code. Just include the image and go. The rest is automatic.
• It can be integrated with just about any CMS, so long as it's on an Apache or nginx server with PHP.
• It can be used with existing sites without changing any page markup (besides including the JS file).

Cons:

There are no real drawbacks, unless you don't know how to set it up, or your users have JavaScript turned off. The first problem can be fixed with research. The second is rare to encounter, though it can happen on older mobile devices.

Conclusion

Making our images adapt to the devices our visitors are using is essential to modernizing the web, and keeping costs down for everyone. Currently, doing that will require some extra fiddling, some JavaScript, and a whole lotta patience, but it can be done.

Wanna learn more about responsive web design? Grab the free eBook on the basics of responsive design below!