HD Retina Ready

With rapidly increasing technology, modern devices are constantly pushing higher and higher screen resolutions. This provides many benefits to most traditional designers, allowing beautiful layouts with high-fidelity text and imagery that really leaps from the page. But for us web designers, it poses a problem: high-resolution displays necessitate high-resolution imagery, and this means that websites use higher bandwidth, take up more hosting space and take longer to load.

With every millisecond of load time important to a web developer, this is not an easily dismissible concern. Amazon.com tests have shown in the past that an extra 1-second load time for their pages translates to a 7% reduction in sales, 11% fewer page views and a 16% decrease in customer satisfaction. That is a real-time cost to Amazon of about $1.6 billion! More recently, Google has also started to implement page load speed into its algorithms, meaning poorly optimised websites can even have an impaired SEO (Search Engine Optimisation) rating. But there is a solution – SVGs.

SVG stands for Scalable Vector Graphics, and is a format of imagery that has been around since 1999, but seemingly lurking in the shadows. Recently, with the rise of ultra-high resolution displays on tablets and mobiles, there has been a resurgence in interest for SVG images.

SVGs are different from traditional images in that they are vector-based. Traditional image formats, such as JPEGs, GIFs and PNGs, store images by the pixel. This means that the bigger the image gets, the more pixels are needed to be stored and the greater the file size. If too few pixels are stored, the computer will instead use an algorithm to add ‘transitional’ pixels to fill in the missing data.

That sounds good, but really this is just a fancy way of saying that the computer guesses what pixel would likely go in the space, and ultimately means that the images will appear blurry and with many blemishes and off-coloured spots, known as artefacts. This is often not so noticeable with photos and other imagery with many gradients in, but for logos and icons – with their small sizes and sharp edges – the result of a poorly scaled image can be really quite ugly.

SVGs, on the other hand, do not store image data by the pixel – instead they store data as co-ordinates (nodes) with connecting lines (arcs), very much like lines on a graph. Because this information is computated after the image has downloaded, the image will automatically scale to the maximum resolution and keep its sharp definition without any additional file information, making the SVG infinitely scalable whilst retaining its already-small file size.

Since SVG images are stored as text files, SEO data can be stored within an SVG file too, allowing Google and other search engines to better be able to ‘read’ and ‘index’ an image.

Whilst we are currently in a transitional period for many search engines to really utilise its support for SEO in SVG files in their image searches, there is certainly no harm in utilising this method, and it certainly puts you ahead of the pack as support grows.

SVG information is stored similar to graph data, so there are limitations to its use. SVGs are exceptionally good at storing images with solid shapes and only a few, block colours. But imagery with gradients or many different colours will bloat an SVGs size much greater than that of traditional formats, like JPG and PNG; however, as mentioned above, photos and intricate graphics – which tend to be the types of files that use gradients and intricate graphics – scale much better than crisper, simpler images, so by using SVGs for icons and logos; and traditional formats for photos and complex graphics, it is easy to reach a happy medium.

Other concerns with SVG images are that, despite being around for 15 years, some older browsers (namely Internet Explorer 8 and below – looking at you, Microsoft) do not support them. Fortunately, browsers this age tend to almost entirely comprise of older hardware too, and lower screen resolutions. As such, simple checks can be performed by the website to test the capability of a visitor to view SVG images and, in they cannot, the SVG can be replaced with a non-high-resolution ‘fallback’.

By incorporating SVG images, further reducing a reliance on imagery to create background colours, borders and shapes, and by utilising an intelligent and well-balanced approach to our use of image formats, we can develop high-resolution displays that look stunning, whilst simultaneously reducing file size of a web page. It might sound too good to be true - more pixels with less space - but it's not!