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

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!

  • 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?

  • Dmitriy Shin

    Hello Jordy! I just use your plugin. And i have question. I use Avada theme on my site and when I make new page with Fusion builder I add image smaller like a 150X150 or 300X but image can’t see on site… How to do? when I don’t use Fusion builder all ok.

    • Hi! Builders sometimes don’t use WordPress naturally at all, even though they should. In those cases, there is no way for my plugin to hook in unfortunately πŸ™

  • Danny Tijerina

    Avatar
    Danny Tijerina β€’ a few seconds ago
    Hello, I have the plugin installed and everything seems to be working but I cannot get the site to serve the retina image when I test it on my imac. Can someone explain “PictureFill” to me in further detail or provide some insight into how to make sure my WordPress site serve the retina version of the image when appropriate?

      • Danny Tijerina

        Looking at that link I’m starting to think the problem could be because WordPress is sorting uploaded images in a folder that is date specific and since the larger size image was uploaded recently and the original was not they are therefore not in the exact same directory, you think?

  • John Natoli

    I just purchased Pro and I’m not really understanding how this works. I was expecting that I could upload my full size retina-ready image and then all of the smaller sizes would be automatically generated with their retina equivalents. That doesn’t seem to be happening. The dashboard tells me that the full size image is not big enough to generate a retina from. But the full size image that I uploaded IS the retina image. It seems that I’m supposed to upload the full sized non-retina image from the media uploaded, then manually go to the Retina Dashboard and upload my full size retina image there. Is that correct? If so it’s pretty annoying. I’d like to be able to just upload my largest file, the full size retina image, when I’m building my site, and have all the smaller images taken care of automatically from there. Am I just misunderstanding how this works? Thanks!

  • Muharrem KulaksΔ±z

    Fatal error: Class ‘Meow_WR2X_Dashboard’ not found in …wp-contentpluginswp-retina-2xcore.php on line 24

    • Not sure how this could happen but you should make sure you remove the plugin completely and re-install it normally. I think something happened with the current version you are using.

  • Erika Anderson

    Hi, I just bought the wp retina 2x pro version and I don’t know where to upgrade with my product key? The pro version tab is disabled in my dashboard. What do i do? Thanks https://uploads.disquscdn.com/images/e0a4d322cf5dd7666bc8670a822e0b3822b3d7608670ef183b986ca3212bd099.jpg

    • Hello Erika, you need to download the Pro version from the link you received in the welcome email or from store.meowapps.com/downloads πŸ™‚

  • Chris Putnam

    Hi Sorry can I confirm workflow for adding images to a blog. I upload via media an image that is 2500pixels wide to enable retina ability. How do i then add this image in a smaller size into a blog? Of course when im selecting its putting a huge 4mb file in of 2500 pixels.

    Cheers

    • Hi, your question is actually more about WordPress than about using my plugin. When you are in the post, you insert an image, and you can pick the size, by default there are always Thumbnail, Medium and Large available. You should also check with your theme documentation.

      • Chris Putnam

        HI. Yes I actually just worked it out. Thanks though for your response. I defined the post settings under media WordPress menu. Then it did create a smaller version for me. So now happy. WordPress handles the posts and pages and Retina Pro looks like its working for scaling up on retina. Happy times.

  • fysio Viola

    Hi Jordy,
    I’m considering to use / buy this plug in and the one for Lightroom WordPress sync. My website isn’t a photographer website just for my physiotherapy practice, but of course I want the photos posted to be nice πŸ˜ƒ. I’m using divi theme from elegant themes. My question: how big / what is the file size? As I want my website to be loading fast and as I understand if it is too big there might be problems? And most important which file format do you advice to upload to WordPress (jpg, png, dng). Or what are the exportsettings in Lightroom you recommend? I am a beginner regarding creating a website so maybe these are totally weird or ridiculous questions, but I hope you have an answer. As I am disappointed how my photo’s (full width) are showing on my site now. Fortunately, for now just 2 images, but I would like to add more this week. Thanks for your time!

    • Hello! You are talking about WP/LR Sync or Retina? Anyway, I usually recommend 1800px in width, but if you use WP/LR Sync you can always re-upload a bigger size later. Of course JPG. It’s better to keep the full-size image under one meg, but WordPress will resize those photos into smaller ones (image sizes) and with Retina it even double that. The best images in term of size / quality will be always used for your visitors.

  • Wolf

    Hello Jordy,
    I’m thinking about getting the pro-license for the plugin, but I have a question about full-size images.
    I always use full-size in wp and crop the image beforehand. For example I use 300×200 px images on my homepage. What do I need to do if I get your plugin, do I use 600x400px images? How can I still serve 300x200px images to non retina users? Thanks!

    • Hello Wolf! Exactly, you need to use WordPress as you do now, and use my plugin to upload the fill-size which is exactly double the original one. You can also upload a much bigger one and the plugin will just resize to what it needs. Also, in the very near future, the plugin will implement a function that create a 2x version of the image automatically, based on AI πŸ™‚

      • Wolf

        Thanks for the reply!

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