A Guide to Responsive Images: Part II

In our last blog post, A Guide to Responsive Images: Part I, we introduced the three responsive image categories and the front-end tools CHIEF uses for implementation. Today, we’re diving in deeper and looking at how many image files you need and at what sizes in order to create a comprehensive responsive image solution.

Exploring Responsive Image Sizes 

Approaching this guideline we knew there were two things to consider. The first is that you could create almost an infinite number of size combinations for various use cases. The second was that many of the sizes might overlap for different resolutions, like the gears on a 24-speed bike. Our goal was to set out to create a list that would be comprehensive but as few sizes as possible that would work for almost all cases.

We started to test how many image sizes we needed based on common screen sizes: 320, 480, 640, 960, 1280, 1440, 1920. We also included 50% width sizes and 150% width sizes to gather a larger data pool for analysis. We use the image below as a test case and made all the derivatives and logged the data.

Test Image:

colorful sunset at mt. hood
©2012 Zach Dischner

A matrix comparison of different sizes 

matrix comparison of different image sizes

Analyzing the data we derived a criteria of limitations to reduce the number of sizes. We chose to limit the max size to 1920 because we felt anything larger would affect performance. Next we decided to limit the results by a minimum file savings of 45% compared with the next largest size. Thinking further we discovered that we needed a min/max file size constraint, since percentages mean that smaller files will have very insignificant changes in size, where larger images could have huge file size changes. So we limited the results further by a minimum file size change of 10kb and a maximum file size change of 50kb compared with the next largest size. Here are our results:

data chart showing file size savings

This brings us down from nine possible sizes to five.

Five image sizes you need for responsive images

These are the image widths that we would recommend making as a minimum solution for any responsive image solution.
Widths: 320, 640, 960, 1440, 1920

Here are examples of four different image proportions and how you would apply the five widths to generate the image derivatives you need to make. We have also included a handy tool below to generate the sizes for you by entering in the target size of the image.

  • Ratio 4:3 Landscape Rectangle 
    • 320 w (240 h)
    • 640 w (480 h)
    • 960 w (720 h)
    • 1440 w (1080 h)
    • 1920 w (1440 h)
  • Ratio 16:9 Landscape Rectangle
    • 320 w (180 h)
    • 640 w (360 h)
    • 960 w (540 h)
    • 1440 w (810 h)
    • 1920 w (1080 h)
  • Ratio 3:4 Portrait Rectangle
    • 320 w (427 h)
    • 640 w (853 h)
    • 960 w (1280 h)
    • 1440 w (1920 h)
    • 1920 w (2559 h)
  • Ratio 1:1 Square
    • 320 w (320 h)
    • 640 w (640 h)
    • 960 w (960 h)
    • 1440 w (1440 h)
    • 1920 w (1920 h)

Convert target image size into 5 responsive image sizes

 
 

What about retina?

Retina displays have a higher pixel density than traditional displays. When you want the highest quality images displayed on your website for Art Direction solutions we recommend you set a 2x value in the srcset attribute. SinceAdaptive Resolution solutions allow the browser to choose the best image, this is already done. Likewise there is no action needed for Vector solutions.

Mobile devices are the perfect paradox of wanting high quality retina images but fast loading speeds. That being said, it would be worth defining your priorities and make the determination of whether you need a retina size for your solution.

Looking forward

As the technology continues to evolve, we at CHIEF are always researching the latest and greatest. Here are some new responsive image tools that are on the horizon in CSS.

Background image-set

Inline images are not the only way we display images on a website. We also use background images in css. This new rule will allow us to set a group of images to use as a background-image in css, effectively giving us the same flexibility as srcset.

/* https://caniuse.com/#feat=css-image-set */
.example {
  background-image: url(photo.png);
  background-image: -webkit-image-set(  
    url(photo-1x.png) 1x,  
    url(photo-2x.png) 2x  
  );  
  background-image: image-set(  
    url(photo-1x.png) 1x,  
    url(photo-2x.png) 2x  
  );
}

Image rendering

Browsers do the best they can at processing scaled image pixels. Most of the time this looks like a subtle blur of the graphic. This new css rule will allow us to retain the crisp edges of scaled images. Note that scaling images larger than original size could lead to unwanted pixelation.

/* http://caniuse.com/#search=image-rendering */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

Did we forget to mention your favorite tool? Share what we missed on Twitter.

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