Understanding Retina Graphics Compatibility on Your WordPress Site When Viewed on Mac

Many Apple devices have a so-called retina display. This screen contains both on iPhones, iPads and Mac computers. Retina screens showing all extra sharp, and this difference shows especially when reading texts. To give you an idea of ​​how retinal works exactly, you can watch the best look at this video in which Steve Jobs explains it yourself.

The way in which a retina-display all sharper shows thus has to do with the so-called pixel density (density of pixels). This is nice for fonts that can be automatically resized, but your images will have this on a retina display much less sharp look! Especially things like logos on retina display “grainy” in that there are four times as many pixels are on the same surface. Therefore, it is important to upload a retina-specific version for this type of images. In this article we explain how to do it!

Retina graphics on your (WordPress) site

Many premium WordPress themes found in the Theme Options panel an opportunity to upload your logo. Here you will often get the opportunity to upload a retina version. This is pretty easy, because the only thing you have to do is upload a picture that is twice as large. Do you have this possibility, whether you use WordPress you do not? Read a little further…

Do it yourself

For your logo also nice to show off a retina display, you have to go to upload a version that is twice as large as normal. Apple’s retina devices will use this image and show him the same format as the “normal” image.

Suppose you have a logo on your website with the file name “logo.png”, 200 by 50 pixels, then you have to upload a second logo of 400 by 100 pixels (the same aspect ratio). This file can then call logo@2x.png. When your logo as CSS background is loaded, you can use CSS (media queries) arrange that the retinal image is shown on devices with high pixel density:

#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
    #logo {
        background-image: url(logo@2x.png);
    }
}

In this way, devices with device-pixel-ratio above 1.5 will automatically show the bigger picture. This picture is, however, still appears on the size of 200 × 50 pixels.

If your logo is not loaded as a background, but just as a normal picture, then you will have to look for another solution.

Retina.js

If you have images on your website that are simply loaded as an image, as in this example, it is an option to install the retina.js script on your website. This script will check for every image on your website or a retina version available. If you have, you can add this script in an easy way a WordPress website with WP Retina 2x plugin. This plugin can also automatically generate your retina graphics, so you do not actually need to do much itself.

If you do not want to use this plugin, install the retina.js script on your website. This script automatically searches for retinal images. For example referring to /images/logo.png, then searches for the script to a file called /images/logo@2x.png. If he finds it, this (larger) image will be automatically displayed to your visitors with a retina display.

Make It Retina (jQuery plugin for retina display)

https://0.s3.envato.com/files/30878899/website%20example.png

This plugin does all the necessary code to make your site compatible with the retina display. Automatically. No need to restructure the entire website And it is super easy to use.

  1. Make sure you have the jQuery library included in your website;
  2. Include the Make It Retina plugin;
  3. Use this -> $.makeItRetina();
  4. You’ re done!

Works only when it detects the retinal display, so the site does not weight for users with standard screens. Replaces all the images with the respective high-resolution version without having to specify the size or “do things”! It also works with backgrounds!