Retina Images for WordPress

June 25, 2012 - by Gerasimos Tsiamalos | Posted under: Freebies, Plugins

Here’s our latest plugin that lets you generate and serve retina friendly images to your visitors. Let’s see what is all about.

A few days ago Matt wrote on his personal blog about the double-resolution images his visitor will see if they visit his photo galleries using a device equipped with retina display (like the new MacBook Pro). I tried to figure out how he did it and while i am not sure he is using this technique, i found this amazing script that lets you do exactly that. It serves different images based on the device being used by the viewer. It takes like five minutes to set things up so i tried to set it up on a testing WordPress installation. It worked.

Why not make a WordPress plugin out of it?

My next thought was exactly that but i didn’t want to manually create double-resolution images. I wanted to automatically create these images every time i upload an image to WordPress like this:

The script in order to serve a double-resolution image needs an image file with the same filename of the original, plus the “@2x” before the extension of the file. Every time you upload a new image, the plugin will take care of that. Cool eh?

Note: As you can see the plugin will create x2 images for every image size set in Settings > Media including any custom images sizes set in your theme with add_image_size(). If the source image is not big enough though, like WordPress, it will ignore image sizes with higher dimensions than the original one. So if you have set really high resolution image sizes make sure to use high resolution source images as well.

What about my already uploaded files?

Once the plugin is activated, you can regenerate your images using the amazing Regenerate Thumbnails plugin and double-resolution images will be created as well. The note above is valid for this process as well.

Installation

Download the plugin, upload it and activate it. That’s it. Now every time you upload an image, a new double-resolution version will be created and served on Retina displays.

An extra step if .htaccess isn’t writable

If your .htaccess is not writable then there’s one extra step. You need to edit (or create one if there isn’t one already created for you) and paste the following lines:

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^(.*)\.(jpe?g|gif|png)$ /home/user/public_html/wordpressinstallation/wp-content/plugins/ci-retina/retinaimages.php [L} </IfModule>

Make sure to change the long path displayed with your path and if your WordPress is installed in a subdirectory change the second line from

RewriteBase /

RewriteBase /subfolder

Feedback

Your feedback is crucial at this stage. So if you find a bug please do give us a shout.

Requirements

WordPress 3.3+
mod_rewrite

Credits

Big Applaud goes to Jeremy Worboys for his Retina images script.
The rest of the CSSIgniter crew because they can make things work.

PREVIEW DOWNLOAD

17 thoughts on “Retina Images for WordPress”

Alex on June 25, 2012 at 3:22 pm said:

Hello man and thanks for your work and your reactivity, but it visibly don’t work on WordPress 3.4 :/

All my images or not found. And the path in .htaccesse is correct … :/

Reply ↓
- Gerasimos Tsiamalos on June 25, 2012 at 7:08 pm said:
  
  Hi Alex,
  
  Something else is going on. Here’s a demo on WordPress 3.4 http://www.cssigniter.com/retina and it just works.
  Maybe a conflict with a plugin or something?
  
  Reply ↓
  - Alex on June 25, 2012 at 9:38 pm said:
    
    I really don’t understand why, but when I activate your plug-in my .htaccess change from this :
    
    RewriteEngine On RewriteBase /lab/wordpress34 RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]
    
    to this:
    
    RewriteEngine On RewriteBase /lab/wordpress34/ RewriteRule ^(.*)\.(jpe?g|gif|png)$ /homepages/9/d327660227/htdocs/lab/wordpress34/wp-content/plugins/ci-retina/retinaimages.php [L]
    
    The path is okay, @2x are create, Js is on my header but no images on my front AND back office.
    
    I try on WP 3.2, 3.3.1, 3.4, at the roots and in this folder, same problem … :/
    That’s really strange.
    
    Reply ↓
    - Jordy Meow • Totoro Times on June 27, 2012 at 3:00 am said:
      
      Hello! I actually also made a plugin based on the same scripts, but mine also handle the .htaccess automatically, tells you when your images are too small, have a debug mode and alternative methods. Maybe we should try to work together if we want to improve our software. Mine is on WordPress Repository here: http://wordpress.org/extend/plugins/wp-retina-2x/.
      
      Reply ↓
    - Anastis Sourgoutsidis on June 27, 2012 at 10:30 am said:
      
      Can you try editing your .htaccess and confirm that the RewriteBase rule ( RewriteBase /lab/wordpress34/ ) is the same, both on BEGIN WordPress and BEGIN CI_RETINA sections of the file, preferably with a slash at the end of the path.
      Also, keep in mind that depending on you host, changes in .htaccess may not be reflected immediately.
      
      Reply ↓
      - Alex on June 27, 2012 at 11:11 am said:
        
        yes the RewriteBase rule are the same in BEGIN WordPress and BEGIN CI_RETINA, and I’ve got the same problem with the plugin by Jordy Meow.
        Maybe my host ? 1&1 ?
blog note on June 28, 2012 at 10:17 am said:

This is great but we have to publish light size pictures to everyone except Retina displays, we’re on our way to a double speed internet/devices.

Reply ↓
Vitaliy on April 17, 2013 at 4:36 pm said:

Hello,

I was using retinaimages.php and what i learned is that it doesn’t work with multisite.

I had to remove the .htaccess redirect in order for my images in my multisite website to show up…

http://wordpress.org/support/topic/file-path-in-second-multisite-site-incorrect

Reply ↓