A Guide To Retina Graphics For Your WordPress Theme

With the release of the retina screen by Apple it would seem the future is a very high resolution one, with more and more users slowly using a retina or high resolution device to browse the web on it would seem the retina device is the future. With this in mind, its pretty important to understand how to create retina graphics and how to implement them on your WordPress site.

In this article I am focusing on the use of retina graphics within your WordPress website.

This article is broken up into sections that you can navigate to, ‘Retina Images With A WordPress Plugin’ / ‘Retina Images Without A WordPress Plugin’ / ‘Retina Images Using CSS Media Queries’.

How To Create Retina Images

Creating retina graphics is not quite as you would imagine, it is a common misconception that you could simply create a high PPI version of your desired image and use that. It is actually rather simple, you simply create two sets of images, one version for normal screens and the other for retina screens, the second version simply needs to be twice the size of the first version.

As an example, if your logo was 400x300px you would make another version for a retina device to the size of 800x600px, the bigger version is served to retina device but to the same dimensions of the first image. This provides the super smooth, crisp graphics on retina devices.

Creating multiple versions of your graphics can be time consuming, luckily some of the WordPress retina plugins below can handle the creation of multiple images versions.

Retina Images With A WordPress Plugin

As retina monitors and high resolution devices are slowly growing in popularity it would seem that eventually all websites will need to support and serve high resolution images to users. Some WordPress themes are beginning to natively support high resolution graphics, but if your WordPress theme currently does not, you can use one of the WordPress retina plugins below:

WP Retina 2x

WP Retina 2x
This plugin creates the image files required by the Retina (high-DPI) displays and it displays them to your visitors accordingly. Your website will now look beautiful and smooth on every device.

Retinamatic

Retinamatic
Retinamatic is the world’s easiest way to upgrade your WordPress content for retina displays. Once installed, your site will create Retina versions of your images when the original is large enough and serve them to high resolution screens.

Simple WP Retina

Simple WP Retina
Seamlessly replaces images with @2x versions on Retina and other high pixel density screens. Change is performed server side saving requests.

Retina for WP

Retina for WP
This plugin let you add a shortcode with two different image sources one too a normal sized image and one for retina.

HiDPI Gravatars


Enables high resolution Gravatar images on any browser that supports them.

Retina Images For WordPress


A custom plugin from CSSIgniter, the plugin will automatically handle the creation of uploaded retina images on your WordPress site.

Retina Images Without A WordPress Plugin

If you wish to utilise retina images on your WordPress site and you do not want to use a plugin, you can simply use a jQuery plugin to serve retina images on your WordPress site, you can do so in these steps.

Step 1.

Download the Retina.js JS file* and upload it to your WordPress theme folder, typically your theme would have a /js/ or /scripts/ folder, so upload it in keeping with your themes files structure.

Step 2.

Open your functions.php (backup before modifying) folder and register and enqueue the new Retina.js file, the code will look like so:

/*-----------------------------------------------------------------------------------*/  /*	Register and load front end JS  /*-----------------------------------------------------------------------------------*/    if( !function_exists( 'dw_enqueue_scripts' ) ) {      function dw_enqueue_scripts() {  		  		//Use Google jQuery Libary  		wp_deregister_script('jquery');  		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');  		  		//Register the Retina.js file  		wp_register_script('retinajs', get_template_directory_uri() . '/js/retina.js', 'jquery', '1.0', TRUE);  		          // Enqueue our JS scripts      	wp_enqueue_script('jquery');      	wp_enqueue_script('retinajs');        }            add_action('wp_enqueue_scripts', 'dw_enqueue_scripts');  }

Step 3.

Once you have confirmed the Retina.js file has loaded, simply create the images you want to serve a retina version of and prefix the file name with “@2x”. Your full retina image name would look like so my_image@2x.png and the standard resolution image name would look like: my_image.png. When a visitor comes to your site on a retina or high resolution device the script will automatically serve your uploaded retina image with the “@2x” prefix.

*You can use use any jQuery retina plugin you wish, for the above example I simply chose RetinaJS.

Retina Images Using CSS Media Queries

If you do not wish to use a WordPress plugin or an external jQuery library, you can use CSS media queries to serve up retina images. Chris Coyier has written a great article on Retina Display Media Queries. The CSS below is what Chris used, do take the time to read over his article.

@media only screen and (min-width: 320px) {      /* Small screen, non-retina */    }    @media  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (                min-resolution: 192dpi) and (min-width: 320px),  only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {       /* Small screen, retina, stuff to override above media query */    }    @media only screen and (min-width: 700px) {      /* Medium screen, non-retina */    }    @media  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (                min-resolution: 192dpi) and (min-width: 700px),  only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {       /* Medium screen, retina, stuff to override above media query */    }    @media only screen and (min-width: 1300px) {      /* Large screen, non-retina */    }

References

  • http://retinajs.com/
  • http://css-tricks.com/
  • http://wordpress.org/extend/plugins/

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

1 Comment

Comments are now closed.