Issues & FAQ

Please follow this process to find out where the issue occurs. It starts with 1. I am trying to make a perfect debugging process for all the users, this will improve over time. Thank you 🙂

Issues

1. Have the retina images been created?

You can check that on the Retina dashboard or in the Retina column in your Media Library (the colorful squares). Here, I have my Medium and Large images created but not the Thumbnail. Since it is orange, it means it can be created by clicking on Generate. If it is red, continue to read.

You should also check directly URL of that image. How to get it? You can click on the image (on your website) or you can right click on it and pick Inspect Element (with Chrome). You should be able to see your image mentioned in the HTML.

Go to the URL of that image. For example, mine is https://[…]/hashima-560×374.jpg.

To check if the retina image exists, you need to add @2x at the end (before the extension) and check that new URL. For me, this is https://[…]/hashima-560×374@2x.jpg. It exists. What about yours?

Your retina image doesn’t exist? Go to 2.
Do you have it? Good. Go to 3.

2. What is the image size of that specific image?

That is something very important that you be able to define. What is the image size of that image? Is it a thumbnail, medium, large, or something else? Themes and plugins create theirs owns (which is handled by the plugin too). And what are the dimensions defined for that image size? Normally, the dimensions of that image are written in its filename directly. By looking at your Retina settings, you can easily guess which is the name of this image size.

In my example in 1, the image had 900×600. By looking at my settings I know that this is the large size image.

If those dimensions are not written, you might be using the full-Size. Go to 6.
If those dimensions are written, it is a specific image sizeGo to 3.

3. Is your full-size image big enough?

Check the resolution of your full-size image (the image you initially uploaded). You can see that information in the Retina Dashboard on the Image Details in your Media Library. What is it? How does it compare with the image you are checking now?

If your image size is, for example, 200×300, the full-size should be of minimum 400×600 (double) for the retina image to be created. The little colorful squares in the dashboard normally show you that information.

If that full-size image is too small, re-upload a bigger version of that image (replace the full-size one). With the Pro version, you can do it directly by drag & drop. With the standard version of the plugin, you might need to re-upload completely a new file in the Media Library and use it instead (or find a plugin that can help you replace your images).

The retina images are created automatically after that, but you can also click on Generate to make sure. Then, go back to 1.

3. In the HTML code to display your image (which you can see by a right-click and pick Inspect Element), is the image inside an <img> tag?

If it is NOT in an <img> tag, it will not work. The plugin cannot do anything for background image through CSS or dynamically loaded image through Javascript. Unfortunately, there are still themes doing this. The best way is to contact the author of your theme (or gallery plugins, generally) to tell you what to do. They can actually use WP Retina 2x API to add Retina support, have a look at this and mention it to the author.

Are you using PictureFill method? Then you should find a src-set in this <img src-set=”…”>. You have no src-set? Go to 4.

Are you using Retina.js method? Go to 5.

4. Your retina image exists. You are using PictureFill method but the src-set is not (properly) written?

It looks like something stops the plugin from modifying your code accordingly. Are you using the SEO plugin by Yoast? Did you try turning off the Rewrite the Titles option? Please also try to turn off all the other plugins to find the problem. Still not working? Enabled the Retina Debug option in the Settings and try again. Check those Retina logs (you can access them directly from the Retina Dashboard). Do you see something odd? You can contact me and share your logs with me.

5. Your retina image exist. You are using Retina.js method but it is not showing?

Open the Chrome Developer Tools and reload your page. Do you see something odd happening in the debug console? By any chance, can you find about your issue in the official GitHub of Retina.js, here?

6. You are using a Full-Size image and you have no retina image for it?

I don’t recommend the usage of full-size image directly. However, if it is a logo or something similar it makes sense. You need to either upload a retina file manually (which is an @2x file you need to put right next to the normal file) or, if you are using the Pro version of the plugin, you can upload a file, whatever dimension it is (it needs to be big though) in the right column of the Retina dashboard for this image. The plugin will automatically make it the right size and filename to be the exact retina version for your full-size image. Then, go back to 1.

FAQ

Common Questions

Did you read the tutorial about this plugin already? If not, I suggest you read it first.

It creates the image files required by the Retina devices. In the case the resolution of the original images are not high enough, you will see a warning in the Media Library where you will be able to re-upload bigger images. The plugin then recognizes different devices and send the images required accordingly.
Have a look at this article.
The new images use the same name as your original files, with an “@2x” string added right before the extension. For example, if you have a Gundam-150×150.jpg file, a new Gundam-150×[email protected] will be created. Its size will be doubled. This naming convention actually comes from Apple.
Yes, check the Retina Dashboard screen (under the Media menu).
Yes, I suggest you strongly to use the YoImages plugin to crop your images.
No, the images are created through the standard WordPress process. If you wish to do this, have a look at my article on how to optimize images in WordPress.
You should have a look at my article about optimizing images in WordPress. Basically, it works with CDNs but with Amazon S3, not really (it depends on the plugin you are using for that).
Yes, if course! 🙂

Common Issues

Most issues are related to the sizes of your media. Make sure you read my article about Debugging Retina.

Maybe you are using a plugin that blocks the modification from being made. If you use a SEO plugin with a feature like Rewrite Post Title that might be it. Check this feature off and it will work.
The plugin can transform the images that go through the WordPress API and the ‘Image Sizes’ properly (which means that they are part of the Media Library). Themes often uses a one-time customized size for the logo, and for that reason the image wouldn’t be taken care of by the plugin. The easiest way to go around this is to create the Retina image by yourself. For example, if you are logo is 200×100 and named ‘logo.png’, upload a 400×200 version of that logo named ‘[email protected]’ next to the other one. It will work immediately.
Let’s say you have a logo which is 200×400. The retina logo would be 400*800, but it should STILL be shown as a 200×400 image relatively to the rest of your website. The workaround is to keep it simple and neat: always set the (normal) width and the height for all your images (in HTML directly or via CSS).
That is, unfortunately, the most infamous issue to expect with this new technology. A lot of developers ignore it still, sometimes don’t code properly, think that what they did is “enough”. You should ask the developer to do something about it, and if he cares, he will do it. You can also do it by yourself, check the next question. You can try to use the Meow Gallery, the slider works with Retina.
This is very tricky. The simple answer would be to ask yourself a developer or ask a good and very geeky friend. This is not a simple matter. If you are using Retina.js method, you can see how to resolve this issue on this Github discussion.
You could try using a re-writing rule in your WP Engine settings (HTML Post Processing). This regex would do the job:

#http://www.yourwebsite.com/(\S*.(?:jpe?g|png|gif|ttf|otf|svg|woff|js|css))# => http://cdn.yourwebsite.com/$1

Sometimes, themes and plugins developers will need to add support for the Retina. Using WP Retina 2x, it should be easy, I created functions, filters and actions for them.

Common Errors

Maybe you don’t have enough memory allocated to PHP or the script takes longer than the maximum execution time limit. You can change those values using the PHP Configuration File (php.ini):

* php_value memory_limit = “128M”;
* max_execution_time = 360;
… or by modifying the WordPress PHP files (wp-settings.php ideally):
* ini_set(‘memory_limit’, ‘512M’);
* ini_set(‘max_execution_time’, 300);

Please note that it doesn’t work with some cheap web hosts, as they don’t want you do to that instead. The real issue can also be tracked in the PHP error logs.
It is a known issue and it is not related to the plugin. You can find the answer on this post: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/
Sometimes, themes and plugins developers will need to add support for the Retina. Using WP Retina 2x, it should be easy, I created functions, filters and actions for them.