Projects

WP Retina 2x

This WordPress plugin will make your website look amazing on the Retina displays. The most adequate images will be always delivered to your visitors using the method you prefer.

TUTORIAL

I wrote an extensive explanation on Retina Displays and how works the plugin here: Retina Displays and the WordPress Plugin. This is a must-read for any users of this plugin.

QUICK OVERVIEW & SCREENSHOTS

I will start with the most important piece of advice at this point: DO NOT USE THE WORDPRESS “FULL SIZE” IMAGE DIRECTLY, EVER. First you need to install it, then go check the Basics settings.

WP Retina 2x - Settings 1

The Advanced settings let you choose a method.

WP Retina 2x - Settings 2

The next step is to create all those Retina files for your existing images. Check the new menu in Media where you will find the Retina Dashboard.

WP Retina 2x - Dashboard

Most of the time, of course, you will only be using the Media Library. Please notice that there is a Retina column available now.

WP Retina 2x - WP Media Library

For more information, don’t forget to check the Tutorial.

DOWNLOAD

Check it out on the WordPress Plugins Repository: WP Retina 2x. When this page was written, the version was 2.0. Might be a most recent one now :)

  • bloggerblog

    1- So if I upload hires images, i.e. Retina resolution, will the software create a standard resolution image too for non-Retina users?
    2- Will this work with future non-Apple products that will also use high pixel density displays?

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      1. Yes, of course, you will have the images for both kind of users. 2. Yes, I just used the name “Retina” because it got popular under this name, but actually the real terminology is different.

  • Josh

    Do all images need to be 2048×2048. Say I have an image that should be normally shown at 500×500 and the retina at 1000×1000. Does it support that?

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Why specifically 2048×2048? It depends on your settings (WordPress -> Settings -> Media -> Sizes). If you use images that are shown at 500×500 you’ll need to upload an original image equal or superior at 1000×1000.

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Please now check my introduction to the plugin here: http://www.totorotimes.com/news/retina-display-wordpress-plugin/. It might help

  • http://www.bradhill.net Brad Hill

    Hello, I’ve installed your plugin and I’m trying to trouble shoot an issue I’m running into. The media library is giving me the follow error. 6000px seems like an unreasonably big image. Any suggestions? CURRENT: 946px × 345px (0.33mpx)
    REQUIRED: 6000px × 60000px (360.00mpx)

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Hello! Yeah that’s quite a large image you’ve been asked for Well, what do you have your Settings -> WP Retina 2x -> Basics -> Disabled Sizes? Do you have only 3 sizes or more? Some theme adds special sizes.
      I will update the plugin today: I want to provide a way to see WHY such large images are “required”, and to provide an alternative way.

      • http://www.bradhill.net Brad Hill
        • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

          That’s a lot of sizes registered in your WordPress! Probably created by the theme that you are using. Well, do you need all those sizes to support Retina? With the current version of the plugin, the resolution for each of them is not shown yet on this screen (I am working on it right now) but I am pretty sure one of them is huge (“ttrust_background_image_full” feels suspicious). Can you check “ttrust_background_image_full” then check your Media Library again? The required resolution size will be different, I am pretty sure.

          • http://www.bradhill.net Brad Hill

            Well, it kind of worked. I have a responsive theme. I think that might be the issue. The media says this now: CURRENT: 81px × 81px (0.01mpx)
            REQUIRED: 440px × 19998px (8.80mpx)

          • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

            It’s really weird they registering such huge sizes in WordPress I think the best is that you check everything in the settings except thumbnail, medium, large and post-thumbnail.

          • http://www.bradhill.net Brad Hill

            Okay, thanks for your help. Thumbnail, medium, large and post-thumbanil are the least used elements in my theme. Perhaps I need to find a different solution. Thanks again.

          • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

            I am interested in working on this with you as I want my plugin to cover most cases. Can you contact me directly? I would also like to see your website, to understand why the theme needs huge size like those (if some of them are used for the background and scale-up to fit the screen, no retina images are needed for those).

          • http://www.bradhill.net Brad Hill

            Sure, how would you like to connect? My website is http://bradhill.net

            I agree, background images don’t need to be retina images. However, featured images in my homepage slider should. They are 960×350.

  • http://twitter.com/RobinChung_ Robin Chung

    Hi, I have two problems and it would be really amazing if you can help me with it.

    1. When I activate the plugin it breaks all my images, both backend and site. It fails to display the image or open the URL the image was originally located. Plz help! I tried disabling W3 total cache but to no avail.

    2. My big images are 600×600 (max) so retina enabled would be 1200×1200, but most images i upload only use the 600 width but are only 300-400px tall. The system expects me to upload a 1200×1200 image to be retina enabled. But 1200 (w) x 800 (h), twice the resolution of the original file wouldn’t automatically work. I also can’t change the maximum 600×600 resolution for big images because they have differing dimensions. Is there a way to fix this? (the auto route)

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Hello Robin. Don’t worry, we will find a way to make it work properly
      1. Wow! Are you using the “server-side” method? You should, but it modifies the .htaccess and the way the images are being served. It has nothing to do with the cache unfortunately… What happens if you try to access the image directly? Is there any error displayed? Otherwise please contact me directly so that I can help you (I’ll probably need to check your website or your WordPress).
      2. Did you try to disable the sizes you don’t need for retina in “Settings -> WP Retina 2x -> Basics -> Disabled Sizes”?

    • http://www.facebook.com/wadetregaskis Wade Tregaskis

      This might be the same issue I had, which is that $_SERVER['DOCUMENT_ROOT'] was resolving to (e.g. “/www”), but the actual root is “/www/blog”, since I use a subdomain mapping of blog.foo.com -> /blog. I manually edited the plug-in’s files to insert “/blog” in all the necessary places – anywhere DOCUMENT_ROOT is referenced – but that’s obviously just a stop-gap. I don’t know what the correct solution is.

      • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

        Are you using the very last version Wade? I actually changed my development environment recently and my WordPress is now in a sub-folder. I noticed a very few bugs which I corrected, the version 0.2.4 is supposed to work fine. Please contact me directly if it doesn’t and we will work out a nice fix.

  • RJ

    1. Please rewrite the description with a better explanation of the plugin. If a bunch of people have no idea how it works, then there’s a pretty big problem.

    2. How is it possible that an image can be upscaled by the plugin? Surely it downscales retina sized images (ie. 1000x1000px to 500x500px). Any other way is pure magic.

    3. Is there any way that the plugin could be changed so that we can manually upload a @2x sized image for the plugin to find on the server side? It seems to add an unnecessary level of confusion for the plugin to randomly define the sizes you want. I would rather spend a bit more time uploading and resizing images so that they just work first time.

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      1. I’m currently writing a big article about Retina Displays + a tutorial for the plugin. The current article will be updated today, and a new version of the plugin will be released as well. I agree that the explanations here are far from being enough, really not.

      2. The images will never be upscaled by the plugin. All the images are created from the original image (also known as “Full size” image), and the plugin will create a retina image for each image size you have set up in WordPress. If the original image is not big enough, it will ask you to upload a bigger original image. There will be more information on the article I am writing.

      3. Actually YOU CAN already manually upload the @2x image by yourself. The plugin will handle it automatically. If you have only a very few images on your website and can do those new sizes by yourself, it is much easier. I should then add an option to disable all the screens or columns as you wouldn’t need most of them. I added that to my TODO list, that’s a very good point

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex
  • http://www.facebook.com/jon.hardison Jon Hardison

    Great idea! Good to see someone has already done it. Is this a fork of
    the Retina.js script? (Also great!) We develop site for a pretty
    non-technical space and have been running into a lot of the same type of
    questions you’re getting here. Seems hard for some to swallow.

    Anyways, just wanted to say thanx for building it. I wasn’t looking forward to it.

    Hey! One more question: WP doesn’t currently support SVGs (not that it
    should), but we’ve also been considering a retina solution using them.
    They play nicer with CSS and would completely remove the need for
    multiple files. Of course, this would only work for vector types, but
    it could be worth it. Have you given that option any thought?

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Thanks It is not a fork at all, but the plugin CAN use Retina.js. It can work with two different method, but now the one by default is not using Retina.js. You can change the settings though, and choose to use Retina.js.

      I am finishing up writing an article about how to support the Retina Displays and how the plugin works, it’s currently being revised by someone with a better English than mine. Once it’s done, I will update the current article, and also a new version of the plugin will be released.

      About the SVG, of course, if you have your logos and icons in this format, you should definitely use them! But we will still need to do something with the photos. So basically it’s two different things, and SVG doesn’t need to be supported or whatever, it works already (with modern browsers).

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Please now read my introduction and tutorial here:
      http://www.totorotimes.com/news/retina-display-wordpress-plugin/. Thank a lot

  • Laurent Perroteau

    Be careful, when I delete the plugin the line you add in the .htaccess stay in place, and all the images disappear.
    Thanks

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      I am sorry, it is true, there was a bug with the earlier versions of the plugin. The current version and the new one I’m about to release don’t have this issue anymore. You can uninstall or disable the plugin and that line will disappear from the .htaccess.

  • dp

    Hmm – I am not seeing the Retina Dashboard anywhere. I am on WP 3.4

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Haha, sorry about that, I’ve been updating the current article but I am still working on it ! And I am about to release the new version of the plugin with the Retina Dashboard on one hour or so

      • Guest

        Great, I like this plugin very much. Thanks for your effort.

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          Pay a visit to Totoro Times (http://www.totorotimes.com) when you have some time, that’s the best thanks you can give me

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      It is now released, please check it

      • dp

        Hmm – There is something really wrong here. At first I thought I had a bad installation of WP so I removed all my db’s and rebuilt WP. I have tested before and after the install of this plugin. As soon as I install this plugin and upload new images I get the following errors – Warning: Cannot modify header information – headers already sent by (output started at /home/content/ – Everything works as normal before this plugin gets installed.

        • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

          No way! Wait… which version are you using? You MUST use 0.2.1. There was an issue with 0.2. Basically if there are any warnings or notices in another plugins it would show them. Do you still have the issue with 0.2.1?

        • http://twitter.com/tech4eleven Cory Church

          I am getting this too! I have version .9.2. Ive asked about it here too: http://wordpress.org/support/topic/error-on-upload?replies=1#post-3707474

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            We’ll continue on the WP forums

  • http://www.facebook.com/wadetregaskis Wade Tregaskis

    For some reason it doesn’t generate @2x versions of my “Large” size (max 1024 per side). It does all smaller sizes just fine. The source images are max 2048 per side, so all it really amounts to is using the original. I can work around it by manually duplicating the original and renaming it as the appropriate @2x form, but that’s labour intensive, and a bit awkward – I’d much rather it just transparently refer to the original, full-size version.

    • http://www.totorotimes.com/ Jordy Meow • Japan & Urbex

      Can you please make a screenshot of the Retina Dashboard for me?

  • rvank

    I’m loving this app. Thanks! I have a question though. Sometimes when this app is installed, the images I don’t upload through the media side – images like my site header, social media icons, etc, which I uploaded directly to my server ages ago – don’t show up. I have the most recent version of your app. Is there something I’m doing wrong?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Don’t show-up AT ALL? I understand that they are not “retina” but they should show-up. Can you share your URL?

      • rvank

        http://chasingdelicious.com. I went in and added files with the @2x suffix for my site logo and social media icons (the images I don’t upload through the media center) and that seemed to fixed that problem. I still have rogue blue question marks popping up for random images though.

        • Ricky

          Hey rvank, were you ever able to get these blue question marks to go away? I still have it on at least 1 image 50% of the time i reload.

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            Are you both using the server-side method? If you are using the client-side method do you still have the issues? Rvank, it seems you are using (or tried) the plugin made by retina-images (which is actually like wp-retina-2x without the Retina dashboard, options and the client-method), you have the issue as well with it?

          • Ricky

            Thanks Jordy, I was trying other plugins but they didn’t do the trick either. I tried the client side option on yours as well but it doesn’t load the slides (except for the first) in my homepage slider. Do you have any suggestions that will help load those remaining slides? The other reason I don’t want to use the client side is because my website is responsive and the client side distorts the images.

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            None of the Retina plugins would help for that matter (otherwise you bet! I’d be already working on it), this has to be fixed in the other plugin you are using for your slides. At some point, the plugin and theme developer will have to test their work with Retina displays, and this kind of issue will progressively disappear. For now I suggest you to contact the developer of that plugin and ask him for help. Let’s see what he says and of course I’m willing to help and make my plugin better if I missed something

      • Ricky

        Thanks a lot for this pugin Jordy, however I’m having the same problem as rvank, some images in my header at http://www.indrasahu.com are not showing up sometimes. the problem is intermittent and if you take a look at a couple pages, you’ll see what i mean.

  • kbowman

    Hello, I have an image that is 690×692 so I created a image that was 1380×1384. When I check it out in the media library, it says the image is too small and needs to be 2042×2048. That would be almost 3x the size of the original image. As a test, I deleted the image and uploaded the original size, 690×692. In the media library it says the image is too small and should be 1380×1200, which would even be the correct height if it was doubled. Suggestions?

  • kbowman

    I am confused. I have an image that is 690×692, so I created a retina version of that at 1380×1384. When I upload the image, the WP Retina 2x plugin gives me an error saying that image is “too small” and needs to be 2042×2048? Why is this and why is that almost 3x the original size? If I check the “thumbnail”, “Medium” and “Large” under “Disable” in Basic settings, then I get the Green checkmark for the image. That doesn’t seem right. Suggestions?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      This is actually normal. I am pretty sure your “Large” is something bigger than 690×692 right? If you upload an image smaller that the “Large”, WordPress will not create an image for that size, and therefore, the plugin will not ask you for a Retina image for “Large”. But yes, it might ask you to upload a bigger image to cover the “Medium” one, and then WordPress would be able to create a “Large” image! And of course, at this point, the plugin would ask you for a even bigger image since the “Large image was created”. Now the question is: why didn’t you upload a image big enough for the “Large”? Aren’t you using it? If you don’t, you should disable it (either in WordPress or in the plugin settings). But if it is not the case, then it’s probably a bug and I need to look into this matter with you a bit more

      • http://twitter.com/daylonsoh Daylon Soh

        Facing exactly the same problem. Is it a bug in WP 3.5?

  • KatzinAZ

    Hi.
    Thanks for the article about Retina displays – very informative! A couple of questions on this plug in, if I might:
    Q1: I installed WP Retina 2x today (ver 0.3.2) on WP 3.4.1. I have it set up to automatically generate the retina display file sizes when I upload photos. Unfortunately when I upload them via WP media uploader – Retina 2x does not create the retina display files. I then tried generating them manually using the “Generate All” button – no luck. I also tried individually clicking the Generate button – again no luck.
    Q2: When I see the “Original Too Small” exclamation icon, I assume that means I have to generate a double size image manually, vs asking WP Retina 2x to generate it for me? If yes, then when I do, should I just add the @2x to the end of the file name (before the .jpg)? Note: I am unable to just create a double sized file with the same name, because the sliders in my theme can’t handle the larger size.
    Thanks!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Hello,
      Q1: I will need more details. Can you contact me directly and send me screenshots? (have a look at my FAQ on http://wordpress.org/extend/plugins/wp-retina-2x/faq/).
      Q2: That’s probably your issue in Q1! Your original images are too small. I don’t think you understood exactly how it works. There are many article about Retina these days, but the FAQ and the article on Totoro Times (http://www.totorotimes.com/news/retina-display-wordpress-plugin/) should help you. If it’s not clear enough, come back here, but it should be

  • Pingback: Passer un blog en Retina, c’est facile ! - Pingoo.com

  • oetseli

    An excellent plugin, thank you so much!

    This is how I thought a retina plugin might work, but never had the time or ability to make one myself. This makes the whole thing so easy you just activate the plugin, regenerate old images and never have to think about it again. Inline images Just Work.

    Woo!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Thank you so much for your comment! Yeah, as long as you know exactly what it does and how it should work perfectly. I’m always a bit tired by the amount of messages I get everyday because people don’t know how to use HTML and CSS and just blame the plugin It’s going to be hard to educate all the bloggers ! Thanks, and don’t forget to rate it on
      http://wordpress.org/extend/plugins/wp-retina-2x/ if it’s not done already :p

  • Panic

    It’s really great! However can you please redirect the page to some proper place than show up a blank page? (like this http://d.pr/i/CLM2)

    Thanks!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Hello Panic, am sorry but I didn’t understand the issue. Where do you get a blank page?

  • Pingback: Hallo Welt! – Jonas Reitmann

  • Atlas HD Films

    was wondering, seems the software changed a bit, and there are more DEFINED sizes now. Could you update the image or is there an updated article for settings of the different sizes that must be “checked” off WP Retina 2x settings page?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      The defined sizes depends on your plugins and your theme. The WP Retina 2x plugin just lists them.

      • Atlas HD Films

        hmm.. okay so right now I have them all checked. I don’t want to tax a browser of someone coming to my site, and I don’t want to be penalized for having a “slow browsing experience” with google and the like.. not sure what to do.. any suggestions? Thanks in advance

        • Atlas HD Films

          This is what I am talking about. I am not sure what to select (check) or not??

          • Atlas HD Films

            I would like to give you a different picture, the one below, can you erase the one above please?

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          Sorry, can you repost your screenshot again? Everything is gone Don’t worry, Google will not penalize you since the GoogleBot will never get the Retina images + it has a tendency to give advantage to pages with good big original photos.

          • Atlas HD Films

            Hey Jordy! Thanks man! Yes, and thank you for the prompt reply.. so google is okay with big images now?

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            It seems your theme is already generating the @2x files, at least, it creates the WordPress sizes for it (they all have @2x at the end in the screenshot). If you still want to use my plugin, you can disable those, my plugin takes care of this already. Oh my god, this is so messy the theme does that… When one will change theme one day, it will be such a mess…

          • Atlas HD Films

            that is after installing your plugin.. I don’t see that before installing your app.

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            This is actually impossible, the plugin doesn’t register those sizes in the WordPress system. Might come from your theme (more likely) or another plugin you installed. What’s your theme?

  • Nick

    Cool plugin, it works ! but use ajax load post thumbnail is not retina , how can i fix it ? sorry about my bad english

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      I have no idea what is your “ajax load post thumbnail”. But if it doesn’t work because a specific plugin is loading the images manually in a different way, you might have to contact the author of the other plugin. Otherwise, you can check the forums of “retina.js” (which is used by my plugin for the client-method).

  • http://www.facebook.com/denis.savard Denis Savard

    When I try to upload an HD image, I always receive the following error message :
    Warning: Invalid argument supplied for foreach() in /home/denisssh/julielatour.com/
    wp-content/plugins/wp-retina-2x/wr2x_replace.php on line 57

    Fatal error: Allowed memory size of 94371840 bytes exhausted
    (tried to allocate 8192 bytes) in /home/denisssh/julielatour.com/
    wp-includes/media.php on line 937

    Tried to allow more memory via the .htaccess file. Did not work.

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      I am sorry, I have no idea what it could be, it is the first time I hear about that issue. You maybe need to have a developer working on it…

      • http://www.facebook.com/denis.savard Denis Savard

        Thanks, I’ll see what I can do and post here if I find an answer.

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          Thank you, I hope you can find the cause!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Did you try with another WordPress website?

  • Pingback: Updating For Retina :: Bob Rockefeller

  • Михаил Васин

    Hi Jordy,

    first of all thanks for your great work!

    I think I have encountered a bug. When I crop image icon, the plugin makes retina version of the original icon for it instead of the cropped one. I have recorded screencast for you to see: https://www.dropbox.com/s/gi6sd4g4s6ha197/icon-issue.mov

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Hello,

      Indeed Not sure if I could consider a bug or not, but for sure it is not the result we expect Can you please add your issue on the WP forum? I will try to find a solution to that, definitely. http://wordpress.org/support/view/plugin-reviews/wp-retina-2x

  • Randy

    So, say I have been using the FULL size before I found your plugin, uploading imgages at 800×800, dropping them into posts at full size, then manually editing the dimensions under Advanced to 400×400 (I know, forcing everyone to download FULL size and scale). My Large size is 400, so the file is enough to generate @2x retina as is, but then I need to go into the post, delete the image, re-insert it and choose LARGE (400). This works, and your plugin delivers the retina image, but is there an easier workflow to cleanup my previous posts? I feel like WP used to let you change the image size setting in earlier versions, but now, all I have is the % choices. I want to pick LARGE but don’t see where to do that (hence the need to delete and re-insert). Any suggestions?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      You are right, I don’t think you can do that. Once the image is picked, WordPress doesn’t know what size is it anymore (even though it is actually written in the HTML, as a CSS class). You have to go through all your posts and replace the images. But why would you do that? It works already, maybe you should just let it be, and for the new posts you are always using my plugin. Your website seems to work at this point, and for the previous posts, well, too bad! But I am sure your visitors will not mind that much…

  • Sophie

    Hi there. The plugin is working great, I just can’t get it to work for my logo? My site is http://pettercreative.com … Thanks

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      That’s because you need to create the @2x file for the logo by yourself

      • Sophie

        I have, attached a screenshot of this…

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          It’s probably not at the right place. Check your current logo URL. There are no related @2x, I just checked again.

          • Sophie
          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            I wonder. What is the name of the plugin again? And what is your filename extension?

          • Sophie

            It’s WP Retina 2x and .png. Thank you!

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            It was actually second-degree Fine.
            Try to rename “http://pettercreative.com/wp-content/uploads/2013/04/Logo-150×49@x2.png” into “http://pettercreative.com/wp-content/uploads/2013/04/Logo-150×49@2x.png”.

          • Sophie

            That works but it’s massive! :-S help!
            Thanks

          • http://www.totorotimes.com/ Jordy Meow • Totoro Times

            You should check your CSS. Honestly, if all the users were asking the same basics questions without reading all my documentation and FAQ I would have no time to have a life and to maintain the plugin… Come on, you can do it.

          • Sophie

            Thought I’d check. I’ll investigate some more. Thanks anyway.

          • Sophie

            DONE! So I uploaded the larger file ONLY and then used this code:

            #logo {height: 49px; width: 150px;}
            #logo img {width: 100%;}

            Second line was needed, otherwise it just cropped.

            Thanks for the plugin and fast responses!

          • okonomiyaki3000

            I don’t know what you mean by ‘second-degree’. Is that French for “Whooosh!”?

          • Sophie

            I did wonder… Translated = ‘sarcastic’.

        • okonomiyaki3000

          Sorry to butt in here but I can’t seem to understand the value of this screenshot.

  • http://www.facebook.com/ixrevo Alexandr Sokol

    Hi, Jordy!

    Could you describe how new method “HTML Rewrite” works?

    And could you add option to chose retina postfix (-2x instead of @2x, for instance)? I have done that manually in your code, but I afraid bugs ’cause I’m not a tough WP developer.

    Why? Apple say so: “A common file-naming convention for high-resolution images on the web is to prepend _2x before the file extension; for example,myImage_2x.jpg. Don’t use @2x in the filename, since the @ character in a URL is reserved as the delimiter separating the username and password from the host in authentication URL schemes.”

    http://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html

    Thanx for very powerful and cool plugin!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      I will describe it soon in the description of the plugin since many people asked

      Problem is most people/plugin are using the @2x format. But you are right, Apple uses _2x on theirs websites. I guess I will have to add an option between using the popular @2x format or the recommended _2x format. Thanks a lot for the info!

      • http://ixrevo.ru/ Alexandr Sokol

        Thanx for reply! Could you consider also an option -2x?

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          I guess I can do that

          • http://ixrevo.ru/ Alexandr Sokol

            Thanks a lot, Jordy!

  • okonomiyaki3000

    This plugin is a bunch of BS! I’m switching to the clowncar method! https://github.com/estelle/clowncar

  • http://gold-thiolate.com/ Zhentao Luo

    I’m using the the Retina.js mode. According to the description on http://retinajs.com/ , the retina.js method can cover the background images as well as the tag. Does this plugin support background images?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      If you’re using the Retina.js mode, then it will be exactly the same as what they describe on their website. If I don’t use the last version of Retina.js (or the right one), please send me an email and I will make an update.

  • http://evanvolgas.com/ Evan Volgas

    This is a great plugin. Thanks for creating it!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Thanks a lot Evan!

  • http://kizi-friv.kizi2.com/ Friv

    Thank you for this great information, you write very well which i like very much. I am really impressed by your post.

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Really? Well.. thanks

  • Emi

    I have this error: Warning: phpinfo() has been disabled for security reasons in /home/remi0640/public_html/wp-includes/functions.php on line 3055 … I have wordpress 3.6 installed. What is the problem?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      You should ask your hosting provider.

  • lisa

    How are the retina images created? Is it just doubling the size of my images? Won’t that degrade the image quality?
    Thanks

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      They use the original uploaded image that is required to be bigger than the retina images. Hence no degradation of the image quality.

  • giovencato

    Hello, I have two stupid questions

    #1. Are the images resized automatically by “Retina 2x” or shall I export double sized images and “Retina” will set them right?

    #2. Is it recommended to upload files with a resolution hicher than 72 dpi (150/200/300 dpi)?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      1. Yes, they are automatically generated.
      2. DPI has nothing to do with anything on a computer screen

  • giovencato

    Hi,
    which is the suggested images resolution using Retina x2: 72dpi, 100 or even more?
    Thanks

  • THAT___guy

    Hey, looks like a great plugin though I’m a little confused about how it works.

    Am I right in saying this only lets you use wp defined image sizes? What do I do when my site needs an image of unique dimensions?

    Eg: I have a photo that is exactly 191×220. It’s important for my layout that the image is exactly this size. So my 2x original that I upload is 382×440. But then all the generated images are sizes like 120×138 and 250×287. There’s no option that is the correct size for my layout.

    Am I only able to use pre-defined image sizes?

  • yosuke

    I’m using the resize-at-upload-plus.
    The thing that automatically adjusts to the size you set, the size of the image file to be uploaded.
    http://www.mores.cc/resize-at-upload-plus

    I want to use with the WP Tetina 2x the resize-at-upload-plus.
    In that case, what should be the upper limit of the image size to be set resize-at-upload-plus?

    Thank you for a good plugin!

  • jasonsee

    Plugin seems to have broken with WP 3.7.x – anyone else having trouble?

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      I will update it immediately if it is the case. Can you post here? http://wordpress.org/support/plugin/wp-retina-2x Please also explain the issue a bit more if you can…

      • jasonsee

        Someone already opened a ticket over there 5 days ago, but there wasn’t a response yet, which is why I tried here, too.
        http://wordpress.org/support/topic/possible-37-conflict?replies=1

        Basically, there’s no JS console log errors or php errors, the site just only serves non-retina images. My development stack is still on WP v3.6.1 and production machine is running v3.7.1, which is the only noticeable difference I see on these two sites. After seeing the other post in the support forum, I’m wondering if others are having trouble, too.

  • Marta

    HI there,
    After activating plug in slider images and portfolio images behave strangely, see screenshoots or please check on http://www.whittigroup.com, no cache plug in is in place yet. Please advice, thanks!

  • Kurt Garrison

    Can someone tell me why I’m getting all these errors when using the wp-retina-2x plugin! thank you. Please see attached image.

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      Missing images in WordPress, others are too small… you have a bit of everything. Ask a developer to help you or spend time reading documentation and FAQ. Nothing is abnormal here and I provide support only for bugs.

      • Kurt

        ok thank you.

      • Kurt Garrison

        Hi Jordy, I spoke with a content manager for the project and they said:

        “uploaded several massive images and 1500 pix wide logos and still ran into trouble getting acceptable retina results.”

        not convinced that this is entirely an issue with image size…

        • http://www.totorotimes.com/ Jordy Meow • Totoro Times

          Hire a developer and he will tell you what’s wrong. But from the screenshot I can already tell you that it’s not the plugin fault. You need proper technical understanding of what the plugin does and check your website. The plugin is currently used by thousands of websites. Feel free to hire me for one hour and I will definitely point you to the issues.

          • Kurt Garrison

            They decided to deactivate the plugin and not use it. I read the documentation for the plugin and it is relatively simple and I’m sure they will not pay you to troubleshoot it. The plugin wasn’t installed at the beginning of the project but later on. I may try it again on the next build, from the beginning.. then I can monitor it better.

  • Jonathan Morgan

    Hi there,

    I’ve built this site and have uploaded images that are at least double the size of what I want to display on a regular, non-retina screen:
    http://www.dougalpaterson.com/work

    What I now want to do is downsize the images in order to improve page load speed, but I still want to have WP-Retina replace images with higher res versions when a high res display is in use.

    Can you advise me of what my workflow should be to achieve this?
    If I Force Regenerate thumbnails, will I lose my retina images?

    Thanks in advance!

    • http://www.totorotimes.com/ Jordy Meow • Totoro Times

      You can use Adaptive-Images as well for that purpose, it will work well. I even thought of integrating it to the plugin, it’s very doable. If you use Force Regenerate Thumbnails, the retina should be regenerated at the same time. If they aren’t, you can do it automatically for all of them through the plugin.