i was just wondering if anyone has come up with or thought about a solution for inline images and the new iPad coming out.

i would love to use a combination of add_image_size and this jQuery Script (https://github.com/mcilvena/jQuery-Retina-Display-Plugin) to pull this off.

basically, we have content contributors in the office that would upload an image at say 900 x 900 pixels, and then the system would keep one large image for the retina display and then generate another image at 50% of that size for normal displays.

just curious if anyone has seen this being done.


  • Often wondered the same. I think it'd take a plugin that extends the media settings page with image sizes for different devices then use one of the techniques for detection that are out there – sanchothefat Mar 14 '12 at 17:59
  • that would be one sweet plugin! – mrButlertron Mar 14 '12 at 20:47
  • Would that I had the time right now! – sanchothefat Mar 14 '12 at 21:30
  • Did you try the WP Retina 2x? Does it resolve your issue? Because it should :) Thanks for your reply. – TigrouMeow Aug 9 '12 at 1:09

I developed a plugin that does that. It creates the new images for you (with @2x), tells you if the original image is not big enough (and give you a 'Reupload' button), then serves it to the clients using two methods (a image handler or a script). Please try it and tell me if I can make it better for you. It is available on Wordpress Repository: http://wordpress.org/extend/plugins/wp-retina-2x.


You should use a combination of PHP and js, so that your not loading a tons of unused images.

Its would be pretty east to just create a ipad add_image_size and check the referrer in your template.

For example:

    if(stristr($_SERVER['HTTP_USER_AGENT'], 'Mozilla/5.0(iPad;')) {
        // probably an iPad
        // the loop args
       echo wp_get_attachment_image( $attachment->ID, 'ipad' );
       // show regular images
       // the loop args
       echo wp_get_attachment_image( $attachment->ID, 'medium' );

Also worth checking out this: http://retina-images.complexcompulsions.com/


WordPress can already generate thumbnails at various sizes when you upload them. You just use Add Image Size to add the sizes you need.

You can set a number of sizes that would suit your needs. You will probably have to alter the script slightly to look for different image names (the re-sized image names should be consistent to be able to do this). I believe in this case, the smaller images have some part of the image size appended to the end of the name so instead of the JavaScript adding -2x to the end of the file names, you would need to have it remove the image size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.