Responsive Images — 6 Simple Ways

Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Learn how to serve up specific images depending on device with these techniques.

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.

<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.

Continue Reading

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.