WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Retina Image Support

This plugin helps you easily get setup for retina image support on your WordPress powered website.

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 img@2x.png 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 image@2x.jpg

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: 3.9.2
Last Updated: 2014-4-17
Downloads: 682

Ratings

2 stars
2 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.