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://email@example.com 2x" alt="My Image">
Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.
Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.