Sizing your website images for mobile

We are currently re-designing the Bluelinemedia website (watch this space!). One of the new changes we are making is to code the site to the HTML 5 standard and with this we want to make the site responsive, so it re-sizes for smartphones and tablets.

One of the issues we came across was what to do about images in a responsive website. We don’t want site users to have to download large images only to have them resized using CSS to fit their screen resolution, especially if they are using a mobile device. There are a lot of different methods to achieve responsive images, each with pros and cons depending on your website. Since there is no current HTML 5 standard for responsive images (according to this article we decided to use the method I have detailed below.

Bigger is not always better

We decided to go with quite a simple solution that proved to work well. In our CMS whenever an image is uploaded we automatically resize it to four sizes. The sizes of these images are what we judged to work best with four different screen resolutions when viewing our website. When a user visits our site initially the HTML just loads up the smallest images. The JavaScript then checks the users screen resolution and amends the image directories accordingly so that the best size image can be served to the user.

This means that the first images to load will be only the small ones which will lead to the page loading a lot quicker for the user. Larger images will only be used if the screen resolution is large enough to accommodate them and this can therefore save the user bandwidth that is very useful when browsing using a mobile device for example. On one of the pages we tested on our site it was initially 2MB. After applying this technique it brought the page down to just 360KB on a mobile device. A huge saving that will dramatically increase the page load especially handy when on a mobile network connection rather than wifi. The images on our site are also set to 100% width of their container meaning that even though the small image is loaded first it will not disrupt the layout of the site.

One point to note when deciding about the image sizes is how the responsive layout of your website changes. For our site we sometimes float images left or right in the content and then once the site reaches a specified size the images are no longer floated and therefore appear below any text. This actually means the non-floated image can initially be larger in size again since it has more width to fill than the floated image. So it might not be as simple as the smaller the site is made the smaller the image needs to be; it all depends on how your responsive site works.

Lookahead Pre-parser

Using these smaller images at the initial page load also helps with the browser ‘lookahead pre-parser’ issue, since that will start downloading the page images before the web page layout has been determined. Since we have set the HTML image code references to point to the smallest images then only those will be downloaded by the pre-parser meaning this process takes a lot shorter time to complete therefore reducing the time in displaying the page to the user. (Some more information on the Lookahead Pre-parser can be found here.

Houston, we have a problem

The main downside with this method is that the small image is loaded first and then overwritten by the JavaScript. Depending on the screen resolution this can lead to the user viewing a slightly pixelated/blurry image before the correct one is loaded, and if they have a slow internet connection then this could be quite noticeable. Another problem is that depending on the screen resolution of the users device, two images may be downloaded rather than just one, even if one is a very small image.

New site imminent

If you use this technique then you need to spend some time working with the various image sizes and the JavaScript size checks on different devices to get the optimum website conditions. We are still doing this for our site but once completed we feel it will be a good solution to the responsive image issue. Check back at our site in the coming weeks when the new design will be launched and you’ll be able to see this responsive image solution in action.