Tutorial

The plugin consists of two parts. The first is to create the retina images and the second is to send them to the retina devices.

Generate the Retina Images

First install it and go check the plugin’s Basics settings (Settings > Retina). In my case (see the screenshot below), I decided to have the retina images created for all my sizes except the thumbnail and the pageheader. If you don’t know what is the concept behind those media sizes, check WordPress tutorials (like this one) and your theme tutorial or documentation. There are core image sizes but themes usually add their own as well in the system. They are all handled by the plugin.

The retina images are created from the base image that you upload at first. This base image is known as Full Size in WordPress.

The biggest size I have set-up for Retina here is large. The resolution in my case is 900×600 for the normal image. For retina, it is doubled: 1800×1200. Therefore, If I upload a base image of at least 1800×1200, I can be sure that all my retina sizes will be created successfully.

Make sure Auto Generate is checked: this will automatically create the retina images on every image upload (or if you use an image re-generation plugin). You can also do this manually in the Retina dashboard.

retina-basics

The Retina dashboard is available in Media > Retina. From there, you can easily know what is happening with your images. Start by clicking on Refresh. This button basically calculates the number of issues. You can then click on Issues and you should have them all.

retina-dashboard

Most of the functions here are self-explanatory. Don’t be afraid to use the Bulk Generate (the first time) and the Bulk Delete (which only delete retina files). If you are curious, you can check your uploads directory to see what is happening!

The retina status is indicated in the Media Sizes Retina-ized. This is probably the most important column here. Each square represents a media size. For me, the first is the medium size and the second is the large size. Now, what is happening for each of those sizes?

  • Blue. The retina file exists, it’s all good.
  • Yellow. Everything seems fine but there is no retina yet, try the GENERATE button and that should turn into blue.
  • Red. The retina file doesn’t exist and something is missing for the plugin to be able to create it. If the resolution on the left appears in red too that means the Full Size image is too small. If not, it might be that the base file for this media size has not been created by WordPress.

You can IGNORE a certain image if it’s a special case. That will just remove it from the Issues.

The most important and interesting part now is to upload bigger images for those. The text at the top of the dashboard tells that I need to upload Full Size images of a minimum of 1800×1200. By doing this, all the red squares will turn into blue. I can upload those images very easily by drag & dropping them in the Full-Size Replace column.
Of course all the sizes mentioned above in this tutorial are for my specific install of WordPress.

Wait, I actually use Full-Size images directly!

In some case, like the logo or specific (and usually small) images, you don’t use a specific image size when using them, you just use the original – Full-Size – file that you uploaded. Some people also ONLY use Full-Size everywhere, and they don’t use the image sizes at all. Of course, the plugin can’t generate a beautiful crispy retina image from thin air. What to do?

If you are a non-pro user, you will need to upload this Retina image by yourself, probably by FTP, using the @2x convention for naming files.

If you are a Pro user, then you can use the Retina Dashboard to upload this file. You don’t need to name it or size it, you just need to make sure the image is big enough for the Retina (or the dashboard will tell you that it is too small, try it) and drag & drop it in the Full-Size Retina Upload.

You can also check the Full Size Retina in the Basic settings for the plugin to make it mandatory for all images (if you only use Full Size).

Now, let’s get those images delivered to our visitors 🙂

Deliver Retina Images to the Retina Devices

The Advanced settings let you choose a method to deliver those images. Depending on your server and setting, you might have a favorite method. You can also try them one by one to see which one fits best. I personally suggest you to go with the PictureFill method.

retina-methods

Then you can try to tick Debug Mode. With that, the retina images will always been delivered and a log file will also be created (the link to this log is available from the dashboard or from the screen above). This is very useful to test your website even if you don’t have a retina device.

The icons, logo or images of your theme cannot usually be managed by the plugin automatically. You might have to upload manually a retina file for them or write some CSS. Serious themes already have support for this usually, if they don’t, contact them. 

Voilà, that should all work now 🙂 You might have more questions so I suggest you to read the FAQ first then go to the forum about this plugin on the WordPress website. Thank you for reading this tutorial!

I recommend you to use WPEngine or SiteGround. They are both excellent hosting services and work perfectly with all my plugins.