Our Blog

Responsive Web Design is more than just ensuring that your website looks good on varying screen sizes and devices; it is also about delivering said content as quickly as possible, even on the slowest of internet connections. One major issue to consider is images, which by default will be loaded before any CSS or JavaScript files. If your website contains high quality, high resolution images and your intended audience is viewing your website from a phone on a 3G connection, it will be a while before they get to the content.

Several solutions already exist to combat this problem, such as serving pre-resized images based on screen size, using either JavaScript or the server directly to resize images on the fly or using a third party solution. However these solutions can interfere with the output of your CMS and add a dependency you don’t have control over if using a third party solution.

A more permanent solution exists however, in the form of a new HTML element - <picture>. This allows you to load certain images to show, based on the user’s screen size or pixel density - meaning you can serve high quality images to large screens on fast connections while serving optimised images to smaller screens on slower mobile connections. This will speed up the loading time of your website… saving your audience time and data allowance.

The <picture> element is fairly simple to construct; for example, the below will serve large.jpg to any screen size of 1024px or above, while smaller screens will be served small.jpg. Older browsers will only see and serve the <img> tag, allowing for some backwards compatibility.

<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<img src=“small.jpg">
</picture>

The only downside to this new element is a lack of cross-browser compatibility - until the last month or so the <picture> tag has only work on the bleeding edge version of certain browsers. However, recent fundraising means that support for the <picture> tag will be coming to Google Chrome/Opera fairly soon, with Firefox and Safari support in the near future and Internet Explorer support under consideration.