This plugin helps you easily get setup for retina image support on your WordPress powered website.
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.
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.
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.
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;
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)
Requires: 3.0 or higher
Compatible up to: 4.0.14
Last Updated: 2 years ago
Active Installs: 200+
Got something to say? Need help?