A Guide to Responsive Images: Part I

Web performance and optimization are the top priorities of development. It drives how and what we code. Images are a large part of the web and are also one of the largest consumers of data. With the majority of internet traffic coming from mobile viewers our goal is to serve a page fast without sacrificing quality. Responsive images help us to meet that goal by allowing us to serve smaller image files using criteria provided by the browser.

Definitions of Responsive Image Categories 

There are three responsive image categories on the web from a developer’s perspective: Raster: Adaptive Resolution, Raster: Art Direction and Vector: SVG. Raster files will typically have a file extension such as png, jpg, gif and require image processing to create derivatives of different sizes to accommodate scaling because scaling a raster based image larger than the original size will degrade the image quality. Vector files typically have an extension of svg and maintain quality at any size. Next, we will define ways to identify each category.

Raster: Adaptive Resolution

The proportion of this image is expected to stay the same no matter the size of the screen. The derivative files all share the same proportion. Examples of this category could be a primary image, or a bio photo. This category requires a set of fixed sized files.

Raster: Art Direction 

Unlike Adaptive Resolution images, the proportion of the image is expected to change based on the size of the screen. The derivative files do not share the same proportion. Examples of this category could be a hero banner, or an inline photo where the image is expected to be landscape oriented on desktop but portrait for mobile. This category also requires a set of fixed sized files.

Vector: SVG (Scalable Vector Graphic)

Unlike raster based files scaling will not degrade the quality of a vector file, so you do not need to supply additional files for different resolutions or widths. Examples of this category could be a logo or a graphic design element that includes text, shapes or crisp edges.

Front-end Tools for Responsive Image Categories

Using the above criteria you should be able to identify the appropriate responsive image category for your use case. Listed below are the appropriate front-end tools you will need to use to implement a solution for each category.

Before continuing we should make sure that we have a global default in our css to ensure that scaling is occurring on our vector and raster files.

svg  {
  max-width: 100%;
  height: auto;

Raster: Adaptive Resolution

In the case of Adaptive Resolution we will need to supply multiple image file sources to the browser that will allow the browser to select the appropriate size to load and cache. For this we will be using the srcset attribute on an img tag in html.

<img src="photo.jpg"
     srcset="photo-100.jpg 100w,
             photo-400.jpg 400w,
             photo-1000.jpg 1000w,
             photo-1800.jpg 1800w" alt="photo">

The srcset attribute allows us to add multiple file sources separated by a comma. Here we are adding four sizes along with the w descriptor to describe the width of the image being referenced. The browser will look at the w descriptor and determine which image to load. For example, at standard resolution and a browser width of 1000px it might choose to load photo-1000.jpg, but for retina resolution and a browser width of 1000 it might choose photo-1800.jpg. It’s worth noting that we still need to supply a src attribute to provide a fallback in case the browser does not support this yet.

By allowing the browser to select the appropriate image, we are positioning ourselves for the future where browsers might also be able to select the appropriate file based on page load and bandwidth.

Note: You must use strict sizing of container widths when displaying responsive imagesusing srcset to make sure images get contained when they should, since images using srcset will assume a scaling of 100% width to fit its container. You may want to constrain the max-width of your image using a container that wraps your element.

Raster: Art Direction

In the case of Art Direction we will need to supply multiple image file sources and provide a media query to tell the browser at what window width with they need to swap. For this we will be using the picture element in html.

  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">

Inside the picture element we have source tags and an img tag. The source tags allow us to pair an image file or set of image files with a media attribute to tell the browser what the criteria to use to determine which file to load.

<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">

In this example the media attribute is communicating to the browser when the width is 800px or larger to use this source. The srcset attribute is informing the browser that we have a standard resolution image: head.jpg and a image twice the size to pick from: head-2x.jpg 2x depending on the display resolution. The img tag is then added last as a fallback for browsers that do not support the picture element.

Art Direction solutions might need to have very specific sizes generated for different breakpoints, otherwise they have the same file requirements as Adaptive Resolution solutions.

Vector: SVG

As we mentioned above svgs scale natively and do not require additional derivatives. The html for your svg might look something like this.

<svg viewBox="0 0 16 16">
  <path d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>

So now you know the basics of identifying responsive image categories and the front-end tools for implementation. You may be thinking, “this is great, but how many image sizes do I need to make for my Raster images?” Stick around for the next blog post, where we’ll dive into a guideline of image sizes to create for responsive images.

Get alerted to new job postings, events, and insights by registering for our monthly newsletter.