This plugin helps you easily get setup for retina image support.
|Author:||Gregg Henry (profile at wordpress.org)|
|WordPress version required:||3.0|
|WordPress version tested:||4.0|
|Added to WordPress repository:||21-06-2013|
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|Total downloads:||2 001|
Click to start download
This plugin will help you get setup to support retina images, making your website look great on retina devices like the iPhone4+, iPad3+ and the MacBook Pro Retina.
What devices does this plugin support?
This plugin is aimed to support retina devices like the iPad, iPhone, iPod Touch and Macbook Pro. Firefox 14.0.1 on a retina MacBook Pro does not load the @2x images because it does not support window.devicePixelRatio and checking min-resolution with window.matchMedia().matches seems wonky. Firefox 14.0.1 will still serve the non-retina image just fine.
Where’s this magic come from?
Shaun Inman has an article titled ‘Automatic Conditional Retina Images’ that is the basis of the plugin.
The main difference from many other Retina plugins or options is that this code doesn’t do DOM crawling or PHP scripts. And if cookies are disabled, we still serve the non-retina image just fine. Win-Win-Win situation.
My Image is too big!
Be sure to set your image width and height for non-retina first. Then the retina image, while being twice as big, will only take up the width and height you specify in the HTML.
i.e.: with an image declaration like this your email@example.com should be 600px wide by 400px tall and fit perfectly in your set image.
How do I do retina background images in CSS?
Be sure to set the width and height of the element you’re styling in your CSS file. You’ll also want to set the background-size correctly for the retina declaration.
i.e.: background-size: 300px 200px;
How can I test it?
For each image you want a retina version to be used, you’ll need to upload the retina version with the same file name with @2x at the end of it. so if you upload image.jpg you’ll also upload a retina image named firstname.lastname@example.org
Then to test it, you’ll just test your site on a retina device (iPad, iPhone or MacBook Pro)
- Updated FAQ and Installation Notes.
- First version.