Retina Images for WordPress
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.
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:
RewriteRule ^(.*)\.(jpe?g|gif|png)$ /home/user/public_html/wordpressinstallation/wp-content/plugins/ci-retina/retinaimages.php [L}
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
Your feedback is crucial at this stage. So if you find a bug please do give us a shout.
- WordPress 3.3+
- Big Applaud goes to Jeremy Worboys for his Retina images script.
- The rest of the CSSIgniter crew because they can make things work.