Meow Apps

Retina: 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?

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.

Retina for Full-Size for Pro users

If you are a Pro user, you can use the Retina Dashboard to upload the Retina for full-size. 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.

Alternatively, if you would like to optimize your process and only upload one file every time, you can upload your photos directly from the Media Library as Retina for Full-Size! The normal full-size will be automatically generated (that is the Retina divided by two). 

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!