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.

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:

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

Original Image Width:

Original Image Height:

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.

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.

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.

This site uses cookies and other tracking technologies to assist with navigation and your ability to provide feedback, analyze your use of our products and services, assist with our promotional and marketing efforts, and provide content from third parties.