Responsive Images — 6 Simple Ways

Like with most things in the development arena, there’s more than one way to skin a cat. In the case of CSS responsive images, the story is no different. In this post, we’ll go over the top techniques for making responsive images.

1. srcset & sizes attribute

Problem: You want to display identical images, just larger or smaller depending on the device.

<img src="image-800w.jpg" alt="Description of image /">

Solution: The srcset & sizes attributes can be used on the <img /> element to specify several additional images along with hints to help the browser pick the right one. Each value contains a comma-separated list, and each part of the lists is made up of three sub-parts

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Description of image" />

Confused? Don’t worry, it’s not as complicated as it looks — and easier when you format these responsive images as shown above, with a different part of the attribute value on each line. Let’s break it down below:

• srcset defines the set of images we will allow the browser to choose between, and what size each image is. It’s a comma-separated list and each part of the lists is made up of three sub-parts:
  1. The default image location (image-320w.jpg)
  2. A space
  3. The image’s inherent width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer (for example on a Mac you can select the image in Finder, and press Cmd + I to bring up the info screen.)
• sizes defines a set of conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true. It’s also a comma-separated list with three sub-parts:
  1. a condition ((max-width:480px)) — a media condition describes a possible state that the screen can be in. In this case, we are saying “when the viewport width is 480 pixels or less“.
  2. A space
  3. The width of the slot the image will fill when the media condition is true (440px). For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition — this is the default that is chosen when none of the media conditions are true.) The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

2. picture element

<picture alt="Description of image">
  <!-- Low-res image -->
  <source src="image.jpg">
  
  <!-- Med-res image -->
  <source src="medium.jpg" media="(min-width: 400px)">
  <!-- high-res image -->
  <source src="large.jpg" media="(min-width: 800px)">
  <!-- Fallback image -->
  <img src="image.jpg" alt="description of image">
</picture>

Advantages

• Mimics other media syntax like <video> and <audio>, which makes sense.
• The fallback makes it backwards-compatible with browsers that don’t support it, which is extremely important.
• Gives you the control to show exactly what you want under situations you specify.

Disadvantages

• More complicated than <img>. Harder to teach, learn, more code to write — easy to screw up.
• Muddies the water of CSS and HTML a bit, by bringing the media query syntax into HTML.
• Similar issues to why inline styles are bad. Makes future updates more difficult. Not a reusable abstraction.

3. A simple way

img {
  height: auto;
  width: 100%;
}

4. CSS3 object-fill

img {
  height: 180px;
  object-fit: cover;
  width: 320px;
}

Warning: IE doesn’t support this property, but then again, who wants to support IE anyways.

5.CSS3 background-size

img {
  background-image: url('image.png');
  background-size: cover;
}

6. Intrinsic Ratio Technique

.image-wrapper {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}
.image-wrapper img {
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

These are all great techniques when making images responsive, but if already using a framework like Bootstrap or Foundation you have built-in options. Continue on to the next page to learn how to use responsive images in these frameworks.

Responsive Images using Bootstrap

If you’re using the Bootstrap framework in your project, you can use the .img-fluid class so that it scales with the parent element.

<img src="..." class="img-fluid" alt="Responsive image">

For more about responsive images in Bootstrap, see https://getbootstrap.com/docs/4.1/content/images/#responsive-images.

Responsive Images using Foundation

Using Foundation? You’re already on your way to success! Unlike Bootstrap, Foundation provides support for truly responsive images. It uses the Interchange library to dynamically load responsive content that’s appropriate for the user’s device.

<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

In the example above, we have three different sizes of image: one for small screens, one for medium, and one for large. Use the below format to set up a responsive image. The image will change automatically as the browser resizes. Learn more about Interchange here: https://foundation.zurb.com/sites/docs/interchange.html

Continued Reading

• Use Cases and Requirements for Standardizing Responsive Images by the W3C Working Group
• Responsive Images by Google — a free course provided by Udacity
• Applying srcset: choosing the right sizes for responsive images at different breakpoints by Paolo Mioni
• Building a responsive image by Nils Binder