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
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.
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
New site imminent