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.
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 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?
You can IGNORE a certain image if it’s a special case. That will just remove it from the Issues.
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 🙂
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.
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!