'Retina' images on your website

If you have a business where image quality is vital (eg. a photographer, design agency or image renderer) then a website with double density images could be a competitive advantage. This is because a visitor to your website with a HDPI or 'Retina' quality screen will then see far better image quality. However, double-density images are twice as wide and also twice as high as standard images. This means that they are 4 times as big.

As double density images are so big, they have typically been avoided on high-performance websites because they can be expected to make a website up to 4 times slower to load. For the growing number of people with HDPI/'retina' mobile devices it could be a disaster if your clients have to wait 4 times longer for your website to load on their phones. They might just go to another business with a faster website.

So what can you do?

Special techniques

All our websites are built with double density logos and many double density icons. We are able to do this because the icons and logos are carefully compressed and the icons are built into sprites so that they can be loaded very efficiently without slowing down your website. We also use some special techniques to deliver large double density images where needed.

Massive compression

Anazet is an example of a company that produces photo-realistic images for the real-estate industry, so it is important that their product is displayed in the best quality possible. We take a double-density image and save a massively compressed version of it for anazet.com. When we detect that the visitor has a HDPI screen we send the massively compressed double-density image, while other visitors get the standard image. Using this method, you can optimise the delivery and display quality of the images for both HDPI and non-HPDI devices.

Image compression requires complex mathematics, and it may surprise many that you can massively compress a double-density image, such that its size will only be 40-80% more than the standard image, and yet when correctly displayed on a HDPI device it will appear to be of far higher quality than expected. So, as long as other parts of the website are high-performance, you can have a website serving double-density images and still be very fast.

Find out if you have a HDPI screen

If you click the button in the box below it will tell you what the pixel ratio is for your current screen. If you see a value of 1.5 or above, you have an HDPI screen and it means you will benefit from websites that support HDPI and display double-density images

If your pixel ratio is less than 1.5, then unfortunately your screen cannot show the benefits of double-density but a growing number of your website visitors will be able to see the difference.

What is HDPI?

HDPI (High Dots Per Inch) are screens where the dots (or pixels) are so close together that you can no longer see  them. This makes text and images much more realistic looking. In the best case you can no longer see that the text and images are on a computer screen, they look like high quality printed paper.

So what is 'Retina' and double density?

'Retina' is simply the trade name used by Apple Computer to brand it's devices with HDPI. Apple have been producing HDPI 'Retina' devices for a while now, one of the first was the 2012 iPad 4 which was originaly marketed as iPad with Retina display. Since then, most mobile phones from Sony, Samsung, etc. have HDPI screens and so do an increasing number of PC Notebooks.

Double density is the technique of putting twice as many dots (pixels) in the same width. So a screen that had 1000 pixels in a line will now have 2000 pixels in a line. For websites, this is called the pixel ratio.

Useful snippets

Most modern browsers will tell you their pixel density with this javascript

window.devicePixelRatio;

When a pop-up image is requested, we send this pixel density value as a URL parameter to the webserver so that it can decide if it should respond with a double-density image. In the browser pop-up we then divide the background image dimensions by the pixel-ratio, such that if the pixel ratio was 2 we could send a 2400 x 700px image and present it with the CSS shown below. This CSS will effectively force the website browser to use 4 pixels of detail where it would otherwise have only used 1 pixel.

#myImageContainer{background-size: 1200px 350px;}

Any questions? Contact us, we are happy to help