Retina display ready for wordpress

If you’re a big Apple fan as I am , you were probably excited to hear about the latest announcement from WWDC bringing the retina display to the MacBook Pro. Vid, our fearless founder and Apple fanboy, even picked up a retina capable MBP the day after the announcement. Nothing like seeing beautiful designs on a now crisp display. What you quickly realize, though, is much like watching VHS movies on a HD TV, sites that weren’t designed to be on retina look like crap when displayed on retina. In the same way the entertainment industry had to change their standards to shoot movies in HD (which I know nothing about), site owners and front-end developers around the world need to change their processes to make retina display ready for wordpress.

For those that don’t know, “retina” is the term used by Apple to identify the sharpest, highest resolution screens in their line. Retina displays are already in use by iPhone 4S, the New iPad (a.k.a iPad 3), and now the MacBook Pro. Essentially, they figured out a way to pack more pixels into a screen. That means the images on your site/app/blog need to have more pixels to look pretty in that environment. When you first read this, it sounds like we just need to upload larger images to make things work. The problem is, not all displays are capable of viewing images in that way so you can’t make sweeping changes without taking those displays into consideration.

If you’re fortunate enough to browse ZippyKid on a retina display, you’ll see that we’re already converted. Almost every image is crisp and more beautiful than before. Zippy, our mascot, even had to put on a layer of makeup to hide the wrinkles regular screens didn’t show before. (*rimshot*)

As you can see, the differences between unprepared sites and retina-ready sites is pretty astounding on the new MacBook Pro.

A not so great option

There are a couple of ways you can obtain retina-ness (if that’s not a word, it should be) with probably many more options to come. If all of your images are being served as background images through CSS, you could simply upload images that are double size and set a maximum size. For example, if you want to show your site’s logo at a width of 300px then just upload your logo at a size of 600px then set the max-width to 300px. In my experiments, here’s what I tried and it seemed to work.

[css].logo {
background: url("../images/logo.png") no-repeat;
max-width: 300px;
}[/css]

The problem with this method alone are the sizes of the files. Since the images are twice the size needed for a ‘normal’ display, they’ll slow your load time unnecessarily. This could be an option for those looking for a quick fix and don’t care about how fast your site loads. Since you’re reading this on ZippyKid, I’m going to assume you REALLY care about load time and won’t want to go with this option. This could also be the easiest way to add images to normal blog posts.

I also ran across a GitHub repo that looked promising, https://github.com/Retina-Images/Retina-Images/, but I didn’t put in the time to implement it. Feel free to take a stab with it and let us know how it works.

What we went with

We ended up going with a combo of media queries in CSS and display detection using jQuery, using an adaptation of stuff I found on http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/. Basically, we’re telling the browser to only show the larger images only if a retina display (a display with 2x the amount of pixels) is viewing the page.

Double Sized Images

First, you need to re-create the images you want to be retina ready, only double the size. So if you’re logo is 300x100px, you’ll need to upload another version with the size of 600x200px. When you save the file, put it in the same folder as the original image (i.e. /images) and append some text to the end of the file name to signify it’s to be used as the retina image. We decided to go with “-2x”. You want to make sure this distinction is the same for all images you want to show on retina. This is important as you’ll see in the jQuery to follow.

As you can imagine, this is the most tedious part of the process. Once you’re done, the rest is smooth sailing.

Background Images

For all background images, you’ll need to create media queries in your stylesheet. If you’re unfamiliar with media queries, these tell the browser to pull different styles depending on what is viewing the page. Media queries are mainly used to create responsive sites, allowing users to see content in an optimal form whether it’s on a desktop browser, a tablet, or a phone. In this situation, we’re going to tell the browser to serve the larger images if the person is looking at the page from a retina display.

So let’s assume your site’s logo is a background image. Your CSS for that class could look something like this:

[css].logo {
background: url("../images/logo.png") no-repeat;
width: 300px;
height: 100px;
}
[/css]

This is telling the browser to show the original image at the specifed size (the size of the image.) Next, you want to add a media query. Where you put the media query is your call. If you follow the SMACSSguidelines laid out by Jonathan Snook (@snookca), you’ll place the media query directly after the original class so that you can keep things better organized. I love that idea, but haven’t been able to re-organize our files like this just yet. I went ahead and added our query below all of our other queries used to make the site responsive. Wherever you put it, it should look something like this:

[css] @media only screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background: url("../images/logo-2x.png") no-repeat;
background-size: 300px 100px;
}
}[/css]

What we’re saying here is, when someone is using a retina display show them the larger file we uploaded set to a size of 300x100px. Just doing that alone will make all background images look pretty on retina devices.

Replacing all other images

If you’re like ZippyKid, you have a bunch of other images coded directly onto the page. This is where jQuery comes in. This process is a little more complicated, but it’s basically doing the same thing as the CSS method.

Since you’ve already uploaded all of the double sized images, you just need to tell the browser which images to replace and when to show them. To do this:

1. add the class “retina” to any img files you want to be hires. For example, if you have

[html] <img src="/images/name.png">[/html]

You want to add a class like so:

[html]   <img class="retina" src="/images/name.png">[/html]

2. download retina.js and place it in your theme folder. We put it in /library/js/.

3. call the js file in your theme. You can do this by adding the <script> line to your header.php, like:

[php]   &lt;script type="text/javascript" src="&lt;!–?php echo get_template_directory_uri(); ?–&gt;/library/js/retina.js"&gt;[/php]

Or you can paste the followig code into your function.php file:

[php] add_action(‘wp_enqueue_scripts’, ‘zk_retina_ness’);/**
*add the retina.js file to all pages
*/
function zk_retina_ness()
{
wp_register_script( ‘retina’, get_template_directory_uri() . ‘/library/js/retina.js’);
wp_enqueue_script( ‘retina’ );
}
[/php]

That should be it, you’re ready to be pretty on retina.

A quick explanation of how this works. Here is the code in the js file:

[js] $(document).ready(function() {

if (window.devicePixelRatio == 2) {

var images = $("img.retina");

// loop through the images and make them hi-res
for(var i = 0; i &lt; images.length; i++) {

// create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length – 4);
imageName += "-2x" + imageType;

//rename image
images[i].src = imageName;
}
}
});
[/js]

You only need to understand three parts of this function. First, we’re looking for retina displays. When a retina display is looking at the site, then we’re looking for images with the class “retina”. When it finds those, it will append “-2x” to the file name (which is why you added this to all of your larger images earlier.)

Now… Go forth and be sharp.

Source  – zippykid