As websites develop in sophistication they become more and more vivid in presentation. Take, for example, the way that responsive design enhances the usability of the website without losing any of its functionality.

That vividness will soon take another leap forward as HD screens, such as the ones now gracing some of Apple’s MacBook Pros and iPads (trade name “Retina” screens), will rapidly become the new standard.

With that comes a challenge for all web developers and email marketers – how do you maximise the impact for HD screen users without spoiling the experience for standard screen users? What’s the issue here?

HD screens, in simple terms, have four times as many dots of light as a comparative standard screen. A MacBook Pro has 5.1 million pixels in the Retina version, for instance, against 1.3 million on a standard resolution version. The result of this high resolution is that images that are of a high quality, appear much sharper on the Retina screen. Images that are of the same quality as those normally used will look much the same. Similarly, fonts will be sharper, more easily read and much cleaner – you probably thought they were pretty good already!

To take advantage of that technology and bring HD images to your website a number of things need to happen: the first is that your normal folder of images that serve the pages in your site will be replaced by two folders, or at least two sets of images – one standard resolution and the other high resolution.

Then the code of your website will need to be prepared in a way that enables it to “sense” the nature of the device on which it is being viewed – this is already happening for example on responsive design websites. On the basis of the outcome of that sensing, the website’s code will make a decision about which image to choose – HD or standard – and which configuration of the code will be appropriate to display that correctly. Remember, the HD image is four times bigger, so if it is displayed in error on a standard resolution site, it will break the whole site!

When the correct code and images work together there is no difference in scale between the high resolution version of the site and a standard resolution one … except that the images look cleaner, crisper and altogether more vivid. If you want to understand more about this technology, please contact us for a briefing on how it could work for your web site.