• Share a link to this article:

Retina Images

As of October 2014, all ThemeFlood RapidWeaver themes have support for retina images. Retina images can either be configured using the older Javascript plugin that exists in some themes (retina.js), or you can use the newer HTML srcset (source set) attribute that all major web browser vendors have adopted.

There are various other methods towards supporting retina optimised images. For example, the Stacks plugin has good support for retina optimised images too.

Back to basics - what are retina optimised images?

Apple and many other technology firms introduced 'retina' displays a couple of years ago in popular products like smartphones and tablets. The idea of a retina display is that the display is of such a high resolution, no discernible pixels are visible to the naked eye. These displays can support a wider range of colours and some are adapted to work with harsher external lighting conditions.

Optimising images for retina displays should be considered if you have photographs or other artwork that you want displayed at their best on retina display optimised hardware. If one or more images is not optimised, retina displays will attempt to up-scale it; and this can result in a degree of blurriness occuring.

All images for the web remain at 72 DPI. A mistake some people make is to save images at 144 dpi and wrongly assume that will be good enough for retina displays. It won't work like that! Instead the image always remains at 72 dpi and you double the width / height dimensions of the image. So a standard image might be 600px square, and the retina version would be 1200px square. A retina display will squash the image down to 600px; and therefore you gain your retina display optimisation.

In theory, making images retina display optimised is a simple process.

Making retina optimised images work

Firstly if you are continuing to use a third-party plugin like Stacks, it is worth noting newer versions handle retina optimised images very well for you. Continue to drag-and-drop images into your page, as you have done before. Stacks will generate standard and retina optimised versions of the same image. Some stacks (like ProGallery and TopBox) will give you the options to supply retina optimised images.

Older ThemeFlood themes include Retina.js. This works by firstly looking to see what device or web browser is viewing your webpage. If the web browser or device is identified as being a 'retina display', then the retina.js script will get to work. Otherwise on normal screens, retina.js will quietly retreat. On identified retina displays, retina.js will look at where each image in the webpage is coming from and will look to see if a retina version of the same image is available. So if for example you were using an image stored at:


retina.js will check the same directory and look for an image named the following:


As you can see, the important bit to get right here is the retina image always has '@2x' sandwiched between the file name and the file extension. If one of these matched retina images is found, then retina.js will swap it on retina displays.

In newer and updated ThemeFlood themes, we have removed support for retina.js. Instead you can now modify your HTML image tags to include the new srsset attribute and link to a retina optimised version of the image:

<img src="https://example.com/images/flags.jpg" srcset="https://example.com/images/flags@2x.jpg 2x" alt="My Image">

This system is faster, because it removes the dependency for a Javascript plugin. It does also enable you to store your retina optimised images at a separate location. There is lots of good information and working examples to be found online, that deal with the srcset method of retina optimisation.