Responsive Images

  • Images, Tips & Tricks

What is a Responsive Image?

Responsive design, the concept of creating one website that works on all devices, has presented several challenges for web developers, designers and content managers. One such major challenge has been images.

Why worry about Responsive Images?

Imagine a situation where you’re trying to look at a website on your phone using a 3G network and it’s taking FOREVER for the site to load. Why is that? Part of it could be because the images aren’t properly compressed. Large file sizes combined with a limited network bandwidth, result in an extended download time, which hinders client content access.

How long will a user wait for a page load? Jakob Nielsen claims that the average user will wait no longer than 10 seconds and will start to get annoyed around 6 seconds.

How to choose an image size

Mura has two primary ways to add images. The first is with the associated image tool, found just below the title input for each page. Associated images are managed automatically, so there is no need to worry about responsive sizing for them. The second method is adding images in content image in a lose-leaf fashion, using the image tools and browse server selector. These images are managed by you and can be optimized to make your site load fast for a better user experience.

Let’s say we want to add a responsive optimized lose-leaf image to a webpage. For the purpose of this article, we’ll want this image to span across the entire width of the main content section on all screen sizes.

To get started, find the width of the main content section for each responsive size. There are many tools out there that can help you find the widths. I suggest right clicking on the page section and using your browser inspect function and simply narrowing the browser window until all responsive sizes have been viewed. As you adjsut the screen width, take note of the main content section width at each display size. In this case, the final image width will be the largest screen measurement that you collect.

Example

Our webpage is using the Layout Template two-col_SL-col-3, meaning on a large screen, this page will be displayed in two columns. I measured the main content section, ignoring the left column and discovered that this area is 848 pixels in width in the largest responsive view.

Because our website is responsive, I also need to measure what my main content section is on smaller screen window sizes. To do that, I shrink my browser window until my two column layout collapses into one and then measure my main content. In this responsive view, my main content measures 720px wide.

Comparing the two widths, I know that in order for my image to span across the entire column, it needs to be 848 pixels wide. The image will adapt or respond to the smaller devices automatically, but 848 pixeles is the minimum width that the image must be to remain sharp in all responsive views.

Advance Responsive Images

To take responsive images a step further, I’d recommend focusing on the smaller device screens first. Instead of creating an image that would span across the widest responsive screen size, in the same two column layout, first try creating an image that spans across the largest one column layout. For larger screen sizes, add additional size css classes to the image that keep the width at or below the original image size. This method will reduce the file size, dimension and weight of the image for all device, making your webpage load faster.

So instead of creating an image that spans 848 pixels on a desktop, create an image that is 720 pixels, spanning a one column layout and have that image adapt to the two column version. Smaller file size, faster download.

How to save images for web

When saving an image a lot of additional information is saved within. This information is usually useless for internet users and also increases the file size. One way to reduce the amount of information and file size is to use the Save for Web option in most graphical programs, such as Photoshop

Within this option, pick the file type and change the quality of the image that is being saved. I try to keep the quality rating around 60 for JPG images because it retains a good quality, while cutting down file size.

In addition, there are many online image compressors, such as Compressnow to further reduce file size.