Responsive Images 101, Part 1: Definitions

Written by Jason Grigsby on

Over the last few years, we’ve written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images.

Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution.

Let’s dig in!

What are Responsive Images?

The idea of having the browser resize images has been a key part of responsive web design from the beginning.

However, simply resizing images can mean that users will download images that are far too large. Take this Apple Watch image:

Apple Watch Hero Image

The largest version of that image, used for large, high density displays like the iMac, is 5144×1698 pixels. It weighs in at 398K.

Delivering an image that large to a device like the Blackberry Curve 9310—with its display resolution of 320×240 pixels—doesn’t make any sense. We need a smaller image.

Therefore, when I talk about responsive images, what I’m referring to is:

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.

Often, when people talk about responsive images, they are referring to solutions for inline images. Why? Let’s take a look at our old friend the <img> element:

<img src="giraffe.jpg" alt="Giraffe">

The fact that <img> only provides for a single image source has been the biggest challenge. But responsive images aren’t limited to HTML. We’ll look at CSS techniques later in this series.

Understanding your use case

When you start looking at responsive images solutions, it can be overwhelming to figure out which solution makes the most sense for your image. The key to knowing what solution will work best is to know what use case you’re solving for.

The Responsive Images Community Group (RICG) defined multiple use cases. I encourage you to read through the full list of use cases—there is some good stuff in there—but for our purposes, I’m going to simplify things into two major use cases: resolution switching and art direction.

Resolution Switching

Resolution switching is the most common use case. It refers to any scenario where you all you want to do is provide different sizes of an image and you’re not making any modifications to the content or aspect ratio of the image.

Example of resolution switching using a photo of Michelle Obama

Resolution switching not only encompasses flexible images that change based on the size of the viewport, but also scenarios where you want to provide different image sources based on the display density (a.k.a., retina images).

Art Direction

Whenever you need to make changes to content or aspect ratio of an image based on the size of the image in the page, you’re doing what the RICG refers to as art direction.

Take for example the following photo of President Obama speaking at a Chrysler plant.

Obama speaking at Chrysler plant

When the image is displayed at larger sizes, it makes sense for the image to show the automobile factory in the background. The background helps explain where the event took place and adds to the image. But look what happens when we scale the image down to fit a smaller screen.

Obama speaking at Chrysler plant shrunk to 100 pixels wide. Obama himself is tiny in the picture at this size.

At that size, you can barely recognize Obama. You can’t make out his face. Instead of simply resizing the image, it may make sense to crop the image to get rid of some of the background and focus in on him. The end result is an image that works better at the smaller size:

Obama speaking at Chrysler plant shrunk to 100 pixels wide and cropped so Obama can be seen better.

Art direction isn’t limited to cropping images. For example, on the Nokia site where they showed off the new version of their browser, you can see how the image changes from landscape to portrait based on the size of the screen:

As Stephanie Rieger explained at the Breaking Development conference, the decision was made to change the image so that the browser itself could be seen more easily. If the image shrunk too much, the browser chrome became unreadable which is why the design switches from landscape to portrait.

The most common place I see art direction is for images that contain text. We can see an example at the CB2 site and one of its hero images.

CB2 hero image with text

This image contains three photographs, two logos with type in them, and a stamp and text that both use thin strokes. If we simply resized this image to 320 pixels wide, the text would be too small to be readable.

CB2 hero image with text shrunk to 320 pixels making the text unreadable.

CB2 doesn’t currently have a responsive site, but it does have a mobile web site where we can see how they handle this hero image on small screens.

CB2 mobile hero image

In order to make the image work on small screens, CB2 does the following:

  • Changes from three photographs to two
  • Removes text
  • Modifies the aspect ratio to make the image taller
  • Redesigns the layout of the image

As you can see the changes necessary to make an image work on small screens can be substantial.

Let the games begin

Now that we’ve got the definitions out of the way, we can start looking at how these solutions work. Read more in Part 2: Img Required.

Responsive Images 101 Series

  1. Currently Viewing:Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints
  10. Conclusion

Never miss an article!

Get Weekly Digests


Comments

Hey Jason, great stuff here and I really enjoyed your appearance on The Web Ahead. It's so nice to hear two smart and eloquent people talk about this stuff. For me it's all about repetition. The more I hear about a complicated idea like this, play with it, read about it, hear more about it, the more it really starts to make sense. So thank you for taking the time to really dig in and expose all of the little details an nuances of this responsive images thing.

One quick thing I wanted to point out: you use PNGs to illustrate how huge image files on the web can be, but there are tools that can drastically reduce the size of PNGs while preserving their transparency and fidelity in a way that's virtually indistinguishable from the original. Using TinyPNG (which is basically a web app GUI for pngquant), I was able to reduce the Apple watch image from this post by about 44% with TinyPNG.

It's a minor detail, and your examples still hold of course, but tools like this can be very helpful in reducing image file size, especially when it comes to the giant PNGs. Cheers!

Gabriel Luethje

Replies

Hi Gabriel,

Thanks for the notes and the pointers to the image compression sites. I've also been impressed with Kraken in the past.

FWIW, the image you saved 44% was Apple's original image, not the one I used in the post. That one was saved as a JPEG at 800px. Using TinyPNG only reduces that image by 1.9K (or 7%).

Not a big deal. I just had a moment of panic after reading your comment about 44%. I had to rush off to double check. :-)

Thanks again!

-Jason

Sorry to scare you, and I agree that an appropriately sized JPEG makes a way more sense for that image int he context of your blog post. But if it required some alpha transparency, we'd be wanting the PNG, and that's when one of the compression tools could come in really handy. Kraken uses the same compression engine as TinyPNG (pngquant), BTW.


Let’s discuss your project! Email Us