By

How to make your WordPress Theme Retina Ready

We are currently adding Retina support for our WordPress Themes, so I thought I’d share how we did it so you can too.

About High Resolution Displays

Retina and high resolution displays in general are like HD TV, pretty soon everyone will have one. Your website will look really bad on a high-res display if you don’t change a few things. How bad? Zoom in to 200% on your website logo or one of your images, that’s exactly what it looks like on a Retina display (but worse because everything else like text is super crisp in comparison).

How to Retinize Your Theme (without a bunch of coding)

A lot of people have already written about how to retinize your theme with a bunch of custom coding. I’m going to take more of a “for dummies” approach here.

Retinizing your theme basically means serving images at double the size (but the same pixel dimensions) for Retina devices. So a 100×200 image would need to be a 200×400 image, squished back down to 100×200 in the browser. (A little confusing, but keep reading and you’ll get it.)

1. Install Retina.js

retinajs

Retina.js is a script that will make your theme about 80% Retina-ready instantly. Here’s what it does in their words:

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

What you have to do: Say you upload your site logo, and it’s called logo.png. Make a copy of the file, but double the size (in Photoshop or a similar program) and call it logo@2x.png. Upload logo@2x.png to the same folder as your logo.png file, then retina.js will automatically swap out the smaller image for the larger one on Retina screens.

About doubling the size: you can either double the amount of pixels, or the dpi, it’s the same thing. So if your logo.png file is 200×100, make the @2x file 400×200, or just double the dpi (from 72 to 144 for example.)

There are plugins that do most of the heavy lifting for you, and create the @2x images automatically. Here is one such plugin: http://wordpress.org/extend/plugins/wp-retina-2x I tested it a little bit, and it seems to work once you get the settings right.

2. CSS Background Images

Retina.js works great for replacing images in <img> tags, but it does not replace CSS background images or sprites. You’ll still need to write some extra CSS to accomplish this, like this example from Smashing Magazine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}
 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

Here you are using media queries to tell Retina displays to display a bigger image. Make sure you don’t forget the background-size attribute!

3. Icons and Buttons

Icons and buttons are extremely important to update so that your site looks crisp on a Retina display. This is most easily achieved by using CSS buttons, like this one:

Click Me

There are tons of articles on CSS buttons, and online button generators, so I’m not going to rehash that here.

Icon Fonts

Icon images are out. They don’t scale, they look terrible on a Retina screen, and they are just lame in general.

Icon fonts are what the hip kids are using these days, get with the times! Icon fonts allow you to serve scalable vector images with very minimal browser load, and very easy implementation.

font-awesome

Font Awesome is one of the most robust font icon libraries, and it has great documentation. It is “The iconic font designed for use with Twitter Bootstrap” and it has over 200 icons included.

Most font icons are installed simply by uploading the provided files, and adding an @font-face declaration. Here’s an example from Font Awesome:

1
2
3
4
5
6
7
8
9
10
/* Font Awesome by Dave Gandy http://fortawesome.github.com/Font-Awesome/
-------------------------------------------------------------- */
 
@font-face {
  font-family: "FontAwesome";
  src: url('api/fonts/fontawesome-webfont.eot');
  src: url('api/fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('api/fonts/fontawesome-webfont.woff') format('woff'), url('api/fonts/fontawesome-webfont.ttf') format('truetype'), url('api/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

Then you can add cool font icons like this Facebook logo, all deliciously scalable and customizable.

4. Favicons

Don’t forget these little guys!

Making a retina compatible favicon is easy. A normal favicon is a 16px by 16px .png file, renamed to favicon.ico. To make your favicon Retina compatible, just recreate your favicon at 32px by 32px.

To do this, just create a Photoshop document at 32×32, add your image, and save as a png24 (with transparency if you need it). Then rename the image to favicon.ico, and upload to your site root folder (or theme images folder for some themes).

That’s all folks

Honestly I wouldn’t worry about making every single image in your theme Retina compatible. It’s great if you do, but the most important things are your logo, buttons, icons, and prominent images.

I’m looking at a theme that does just that on a Retina screen, and I can’t even tell that some images aren’t @2x. Of course, you’ll have to judge this on a case-by-case basis.

If you have any other tips, please leave them in the comments below. Happy themeing!

28 Responses to How to make your WordPress Theme Retina Ready

  1. Bryce says:

    Like icon fonts, SVGs are your friends :)

    • Scott says:

      Hey Bryce, I find SVG to be more trouble than it’s worth. Browser support is lacking, file size can be big, and the implementation is a pain. Icon fonts are way easier, are you using SVG a lot?

  2. Pingback: How to make your WordPress Theme Retina Ready | Press Coders

  3. TerryJ says:

    This is just what I’ve been looking for. Every time I enlarge my site it’s looks terrible, I’ll have to change my site with your code so that it’s Retina ready. Thanks for the article!

  4. wow! I certainly like to make my website ready for retina display now. Thanks

  5. Luke says:

    Hey great information here.

    One thing though that I am still having trouble figuring out, is why some of my text headers in my website, are still blurry and fuzzy when viewing them on an iPad retina display.

    I’ve checked my CSS style sheet on my WordPress template ( it was a ready made template that i bought) but I can’t seem to find any way of changing the fonts for these headers to make them sharper, only the fonts for the main body text, though this main body text shows up fine anyway in sharp resolution.

    Any ideas?

    • Scott says:

      Hi Luke, is your site using Cufon or another type of font replacement? If so it would not work for retina.

      • Derek says:

        Hello Scott, why wouldn’t font replacement work for retina? All fonts are vector based, meaning they should remain crisp no matter what resolution they are viewed on, correct?

  6. Dave Myron says:

    Another (better?) solution would be to use Chrome & Safari’s recently shipped “image sets”. See http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

    • Scott says:

      That’s interesting Dave, thanks for sharing. Did you see the CSS you have to add for that? Wow, that plus media queries for other browsers, that is insanely complex just to show retina images!

  7. luke says:

    Hi guys

    Yes I use Cufon. I actually managed to make it work. Cufon released some coding which updates the fonts so they are retina-proof – all looks great now.

  8. Derek says:

    Just wondering if retina optimizing a site using this method is going to slow page load down a lot or not? I suppose it depends on how many images are effected right? Thanks for any reply.

    • Scott says:

      It shouldn’t slow down the site for most people, because you are only showing the 2x images to retina screens. For retina devices, it will load slower, because you are loading larger images. However, a little slower load time might be better than having your site look like crap on a retina screen!

  9. Pingback: What is a retina ready website? | Holtermann Design LLC

  10. Adam says:

    Would another option be to use 300 dpi rather then 72 when creating images?

    • Scott says:

      Hey Adam, upping the dpi just makes the image bigger, so you still have to scale down the actual pixels using one of the methods above. You could use 144 dpi, then scale the image to half it’s original size using height/width attributes, but it’s better to use the retina.js so that non-retina screens aren’t having to load the larger images.

      • Adam says:

        Hi Scott, thanks for your reply. Great article & blog.

        • Adam says:

          Hi Scott, Please could you remove the website link from my name in both comments above? Thank you for your help. Adam

          • Adam says:

            Hi Scott, I really would appreciate if you could remove the link to my website from my name above. It’s to an unrelated website (dentist) so will be classed as comment spam by Google. If you are unable to, I will have to disavow the link which probably isn’t good for either of us. Cheers.

  11. isran says:

    Great article

  12. Pingback: How to test if a website is retina ready without a mac? | BlogoSfera

  13. Pingback: Retina Ready Website Tutorials « Smart Software

  14. ali says:

    Nice, but the retina not like the HD
    the HD came with deference resolution like 720 p , 1080 p and 2k
    that only came with android phones
    Unlike retina that came to iPhone and ipad

  15. Pingback: Guide & Tools For Building Premium WordPess Themes | Creative Verse

  16. Narendra Singh says:

    Nice post about how to make wordpress themd retina ready. It will be helpful to me when I’ll implement WordPress CMS on Eurosun.net.in website.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>