WordPress theme "retina" ready

Apple has introduced in many of its devices the concept of visualization called " Retina display ", by which a device will show the double (at least) resolution of another similar, thanks to the high-quality screens they use, for example, the latest iPhone, iPad and MacBook computers .

If you've tried one of these devices with retina display you will have verified that the resolution of the typefaces and the images is really spectacular.

To have a web " retina ready " it is necessary to take into account several aspects , the main ones are these:

  • Images at higher resolution, something easy to add using several methods that we will see later.
  • Icons and buttons using CSS, to be able to show different versions depending on the device.
  • F avicons, the easiest, because you only have to upload a favicon to 32 脳 32 pixels instead of the standard to 16 脳 16

And, of course, in WordPress we can be prepared for to offer a version " retina ready "from our website for which we have several possibilities, some really simple. Let's see some options, some easier than others …

… WordPress Plugins …

WP Retina 2x : This plugin converts our WordPress into " retina ready ", at least as far as that refers to images. It offers two different ways to serve images to your visitors, choosing the one that best suits your accommodation and environment. It also has support for WordPress multisite.

The plugin, once active, creates the necessary image files for devices with Retina display . If the resolution of the original images was not high enough, it shows you a notice in the Multimedia Library to upload images at a higher resolution.

From the first moment, the plugin recognizes the device from which your website is being viewed and will show the version of the images appropriate to it, being the highest resolution in the case of the Retina display.

Simple WP Retina : another great plugin that changes, when your website is viewed from a device with a screen retina, to the version @ 2x of the images.

To do this, the plugin creates versions @ 2x of the images of the entries and also for the thumbnails. There is nothing to configure, but you also have to install the plugin regenerate thumbnails once installed Simple WP Retina and run the regenerated thumbnails, the rest is automatic.

… WordPress Themes …

By course, it will save you time and effort using a theme that is already ready for retina displays, such as Responsive (free) or another stack that you can find (already paid)

… Resized using CSS …

This already exists, you do not have to install or learn anything . The idea is simple: serve images at twice the resolution but resized in half. The device with Retina display will show the image at its top resolution, the only downside is that you always load the image at full resolution, although it is not necessary in devices without Retina display.

Come on, what you have to do is acquire the custom of always uploading the images at twice the resolution of those that you will show them in your theme and resize them, using the attributes " width " and " height ", all of them half the time to insert them.

In short, it would be something like that for a 640 脳 400 resolution image:

… Javascript …

One way to achieve the same as with the previous methods is through the script Retina.js . Once you download it from the official site the process is this:

  1. Upload the file retina.js to your server
  2. Add the necessary script to the file footer. php of your active theme, before the tag :

What the script does is assume that you use the high resolution modifier recommended by Apple (@ 2x) to identify variations of high resolution images on your website and, in this way, if you insert a called image, let's say chunk_of_photo.png then look for a call chunk_of_photo@2x.png that will be the one will show devices with retina display. So you know what it is: always upload the above, or use the LESS CSS trick as explained on the official website of Retina.js.

… Iconized fonts …

One of the things more horrible to the " retinizar " a web are the sources, because the redimensi贸n shows them horribly pixelizadas. To solve this important facet we can use the technique @ font-face very implemented from Twitter bootstrap and quite easy to add to our WordPress using Font awesome ]which allows you to install typographic font icons in the form of vectors that, without greatly loading your web, will show a high quality version that will look great on Retina displays.

Once you download Fong Awesome do the following:

  1. ] Copy the folder " Font Awesome " to your server
  2. Copy the files font-awesome.less or font-awesome.css to the folder your active WordPress theme.
  3. Open the uploaded CSS file and edit the URL of the source so that it points to the folder where you uploaded Font Awesome

Another way to do it is create your own typeface with services as Font builder yl You can implement the new sources on your site by creating CSS classes that use @ font-face .


Well, as you can see there is everything from the simplest to special modes for developers . What seems clear is that the web tends to retinish little by little and we must take into account these techniques if we want our website created with WordPress to be competitive and add value to these devices with Retina display that are being used more and more.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

It may help you too: