This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.


Forum Replies Created

Viewing 1 replies (of 1 total)
  • Author
  • in reply to: Image sizing for retina quality #13019

    Hi Jason,

    Thanks for your advice, it led me on a quest for the best plugin!

    After experimenting with various plugins I found that ‘WP Retina 2x’ was the most reliable and versatile, it also appears to be the most popular. It provides multiple methods of achieving retina support for WordPress content and it’s free.

    I now use the default method – which is the Retina.js method. It is described as ‘[a] fail-safe [way] and only uses one JavaScript file. When a Retina Display is detected, requests for every images on the page will be sent to the server and the retina images will be retrieved if available. Requires a lot of bandwidth.’

    So, for those of you slightly baffled by preparing content for retina displays… these are the steps required for achieving it simply:

    1. Download, install, and activate WP Retina 2X plugin.
    2. Create standard and retina sized images…
    – The retina image will be twice the size as the standard image.
    – The file names of standard and retina images must be the same, however, you need to add @2x to the end of the retina image file name.
    e.g. Standard image: Create ‘Aeroplane.jpg’ at 400 x 400 pixels.
    Retina image: Create ‘Aeroplane@2x.jpg’ at 800 x 800 pixels.
    3. Upload both of these images to your Media Library.
    4. In the content of a post, for example… insert the standard sized image. With the help of the plugin, it will detect whether or not you have a standard resolution display or a higher resolution display (retina)… and it will choose to display the appropriate resolution image for the appropriate display. So to conclude, if you upload ‘Aeroplane.jpg’ into a post and publish it… when viewed on a retina display the viewer will see the crisp ‘Aeroplane@2x.jpg’ version.

    I know this perhaps has been a long way of describing it, but I know many people who are confused by how the swap out of images is decided. Check out Settings > WP Retina 2x in WordPress if you want to tweak more advanced settings.

    One final thought… for now, this method will set you up to prepare images at the exact size for regular and retina displays. In the future when displays are even higher resolution, plugins like this might be updated so they can detect whether you have an even higher resolution display. For this reason, I suggest that it might help to keep the original image at hand for all of your content, so you can create higher resolution copies in the future. In addition, for things like common graphics, maybe it’s an idea to start using vector fonts… which this theme supports nicely with a shortcode (thanks Jason!)

    Shortcode for vector icons: [vector_icon icon=”star” size=”20px”]
    Link to a bunch of vector icons:

    Thanks once again for your help Jason, I hope this post can answer some questions people have about retina images on their WordPress sites!


Viewing 1 replies (of 1 total)