The WP Retina x2 plugin by Jordy Meow is a useful plugin and the best method to ensure images are Retina Ready. Below is a brief overview of the plugin’s interface, as well as a guide on how to upload an image and generate Retina Ready versions. In addition, you can check out the WP Retina 2x website for extra information and FAQ’s.
What Is Retina?
The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Apple devices use this branded concept for Retina devices like iPad’s, iPhones and Laptops having approximately twice the pixel density of a non-retina device. According to the plugin developer, this plugin has also been tested and does work on High-DPI devices.
IMPORTANT NOTE: Before proceeding, please ensure you have installed and activated the WP Retina x2 plugin. You will then see a RETINA option under the WP Media dropdown in the left sidebar.
WP Retina x2 Interface
Bulk Generate Button – Illustrated as A. Auto-generate Retina Ready versions of all your images that fit the size requirement.
Bulk Delete Button – Illustrated as B. Delete all Retina Ready versions that have been generated by the plugin.
Media Sizes Column – Illustrated as C. In this column, you can find the various areas where your image may appear. Just hover your cursor over the various boxes, and wait until the name of the area pops up. These small squares can also be different colors, which represent different statuses; Blue, Red, and Yellow.
Blue means a Retina Ready version of the image is already available.
Yellow means that there is a Retina Ready version available, however, you still need to generate it.
Red means a Retina Ready version cannot be generated from the uploaded image.
Generate Button – Illustrated as D. Generates the Retina Ready version, if available.
Ignore Button – Illustrated as E. Ignore any issues related with the image and remove it from the Issues tab.
Details Button – Illustrated as F. Shows details about the image. Please note that this is available for Pro Versions only.
How To Generate Retina Ready Versions
Step 1 – Upload a new image by going to Media > Add New. To ensure all 16 image sizes are retina ready, you would need to upload an image that is at least 2048×2048. However, if you are only using an image in a specific area, then you can only upload an image for that size and ignore the other sizes. This purely depends on how and where you will use each image.
Step 2 – Go to Media > Retina to access the plugin.
Step 3 – Locate the image you’ve just uploaded in the Thumbnail and Base Image Columns. In the same row, you will see small boxes that represent each 16 Retina Image included with the theme under the Media Sizes column. Make sure all the boxes are Blue. If any are Red, this means your image is not large enough to generate a Retina Image for that area. You can hover over the box to find out which area this is.
Step 4 – If any of the small boxes are Yellow, Press the Generate button to generate the Retina Ready image. Once this is done, the same box should now be Blue, which means a Retina Ready image has been generated.
You can also access more settings for the WP Retina x2 plugin by going to Settings > Retina on your WP Admin sidebar. Once there, you’ll find 3 tabs named Basics, Advanced and Pro. Continue reading below to learn about the settings within each tab.
Disabled Sizes – Illustrated as A. Check the corresponding boxes of the sizes that will not have their retina equivalent generated.
Auto Generate – Illustrated as B. Check this box if you would like to generate retina images automatically when images are uploaded or re-generated. The sizes checked under the ‘Disabled Sizes’ option will be skipped.
Full Size Retina – Illustrated as C. This is only available in the Pro Version. A retina version for the full-size image will be considered required.
Retina Quality – Illustrated as D. This determines the level of compression/quality for the image. Lower the value, greater is compression and lesser is the quality.
Most settings here are recommended for regular image uploads and can be left to the default settings. Some settings are also only available if you’re using the Pro Version of WP Retina x2 plugin. Settings here include the method of how retina images are delivered, the quality of Image Compression, PictureFill, Admin Screen and Mobile settings.
The Pro tab is where you can enter your Pro Version serial number, if you have one. If you would like to get the Pro version of the WP Retina x2 plugin, you can purchase it on the WP Retina 2x website.