Plugin Directory

WP Retina 2x

Make your website look beautiful and smooth on Retina (high-DPI) displays such as the MacBook Pro Retina and the iPad.

What does this plugin do?

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.

What are those new images?

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-150x150.jpg file, a new Gundam-150x150@2x.jpg will be created. Its size will be doubled. This naming convention actually comes from Apple.

Can I create all the Retina images at once for my whole Media Library?

Yes, check the Retina Dashboard screen (under the Media menu).

I don't have a Retina device, how can I check whether it works or not?

Go to the closest Apple Store and try it out! More seriously, you can check the "Debug" option in the plugin settings. Then your blog will always behave as if the client is using a Retina Display.

Does it work for other High-DPI devices?

I tried it on a few High-DPI mobile devices and it works fine.

It doesn't work, what should I check?

  • Are the images created? Check the Retina Dasboard (under Media).
  • Are you using an "Image Size" in your posts that is NOT "Full Size"? The plugin generates Retina images for all your images except (obviously) the "Full Sizes" and the ones you opted-out in the Settings.
  • Are you using Cloudflare? The Cloudflare cache is too "powerful" at the moment, so please set the plugin to use the Client-side method.

The logo or icons of my theme are not displayed as Retina, why?

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 200x100 and named 'logo.png', upload a 400x200 version of that logo named 'logo@2x.png' next to the other one. It will work immediately.

My logo / images appeared twice bigger on Retina

Let's say you have a logo which is 200x400. The retina logo would be 400*800, but it should STILL be shown as a 200x400 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).

I have issues with images in my slideshows / sliders

That is unfortunately the most infamous issue to expect with this "Retina" technology. A lot of developers ignore it, 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.

I have issues with images loaded on the fly / asynchronously

If you use the Server-side, it might work properly. However, with the Client-side, you will probably have issues. The explanation is that the script cannot apply Retina on the images it is not aware of. The Retina script must be called after those operations. You can see how to resolve this issue on this Github discussion. Basically, it involves adding this code after loading new images:

$('img').each(function(){
  new RetinaImage(this);
});

It's not working with multisite + subdomains + the server-method, what can I do?

Jeremy the creator of "Retina-Images" helped me with this issue. Thanks to him, it nows work perfectly since WP Retina 2x 0.4! Although you will have to do edit the .htaccess file by yourself, and to add the RewriteRule "^files/(.+) wp-content/plugins/wp-retina-2x/wr2x_image.php?ms=true&file=$1 [L]" as the first RewriteRule.

I use a CDN and it doesn't work

The retina files have to be sent to the CDN, then the plugin should work fine (using the client-method). The plugin in charge of sending the files to the CDN is not the WP Retina 2x plugin, and cannot.

The developer of the other plugin has to implement support for the Retina files. It should be very easy! In order to help those developers, I created two WordPress actions (when a retina file is added or removed) and they both send two arguments: the attachment id and the full path to the retina file.

  • wr2x_retina_file_added
  • wr2x_retina_file_removed

WordPress stops responding when [...]

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 still doesn't work!

Create a new support thread here or contact me directly, and always send me a screenshot copy of your "Image Sizes" settings in Settings -> Media, and another screenshot of your Retina Dashboard. I will do my best to help you.

I still don't understand a thing!

Please check my tutorial and introduction to Retina Displays on Totoro Times. You should also have a look at the WordPress forums.

This plugin is great, how can I thank you?

Thanks for asking, since we, developers, get usually 10x more complains than thanks! I don't blame anyone, I persnnally don't say thank you to every single developer of all the software I am using ;) But if you are happy, please write a nice review here. You can also do one of the things I ask in the following question.

Can I contact you?

Yes, sure, you can! But since the plugin got popular, I get many emails everyday which consume almost 10% of my whole lifetime (not kidding! + it's rarely issues coming from the plugin itself). Before contacting me, please do one of the following:

  • Tweet a page of Totoro Times to more than 500 followers, mentioning @TigrouMeow
  • Facebook a page of Totoro Times to more than 600 friends/followers (using a page is fine too)
  • Link a page of Totoro Times from your website/blog
  • Make a donation and buy me some sushi (I live in Tokyo and they are really good here!)

Then please contact me :) Thank you!

I donated, can I get rid of the donation button?

Of course. I don't like to see too many of those buttons neither ;) You can disable the donation buttons from all my plugins by adding this to your wp-config.php:

define('WP_HIDE_DONATION_BUTTONS', true);

Requires: 3.5 or higher
Compatible up to: 3.5.1
Last Updated: 2013-3-12
Downloads: 29,341

Ratings

4 stars
4.9 out of 5 stars

Support

16 of 23 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Works!

5 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,1,1 100,1,1 100,1,1 100,2,2 100,1,1 100,6,6 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,2,2 86,7,6
50,2,1 67,3,2 100,1,1 100,1,1 100,2,2 100,1,1
100,2,2 100,1,1 100,1,1 100,5,5