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 (Meow Apps > 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.


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.


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.


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!

  • Pingback: Making photos on a Wordpress site crisp on Retina Displays()

  • Pingback: Tweaking4All.nl - MacOS X - Schermafbeeldingen maken en Annotaties toevoegen()

  • Pingback: Guide to retina images in WordPress | How to deliver()

  • Pingback: Optimizing Photos for a WordPress Website · Steady Sites()

  • Tomasz Rudowicz

    Hey Meow!
    I just bought your WP plugin Retina2x. I’m following your tutorial and I’m stuck on one (important for me) thing. I’ve got images on my WP in full-size. I read on your tut that: “You don’t need to name it or size it..” – by this I understand that I should be able to just upload a retina image – for ex. in size 1800x800px and your plugin should generate for me a file in size 900x400px and display it as 900x400px on non-retina screen, and as 1800×800 on retina screen. Am I right?
    So the question is where can I upload one retina image? In the Media -> Retina I can see a column with Base image and I can upload second image 2x larger to the column Full-Size Retina Upload. Then I’ve got non-retina and retina image, but I don’t want to upload 2 images, I want to upload one retina image and your plugin should generate for me 2x smaller image. Correct me, if i’m not right or if I don’t understand something.

    Thanks for your help, Tom

    • Hi Tom! There are basically two ways:

      1) You upload an image, whatever the size, it becomes full-size for WordPress, alternative sizes are created as well as the Retina versions of them by the plugin. This should be the default, for most of your images. If not all the sizes can be created, you can use the Full-Size Replace column to upload a bigger version of this image.

      2) Now you have special cases, for instance, you are using the full-size directly in your website. That is often the case for logos, as they have specific sizes and ratio width/height. You need a retina for this so you will need to upload a much bigger version a second time in that Full-Size Retina column. It needs to be twice as big (at least) and the plugin will name/resize it accordingly, depending on the original full-size.

      That’s how it works πŸ™‚ Is it more clear?

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