You Are Here: Home » TLC Blog » What is a Retina Image and Why Should You Use One on Your Website?

What is a Retina Image and Why Should You Use One on Your Website?

Retina Display is the registered trademark used by Apple for a HiDPI display technology which they started using in their latest devices such as ipad, iphone, and macbook pro. This technology basically displays more dots per inch than older devices ( around 300 DPI). This means crisper images and smoother font rendering. What this means in simple terms is that more and more people are viewing websites on higher resolution screens, and many websites are serving images that are low resolution for "regular" screens, which means these images look BAD on the a retina display device, like and iPhone or newer Apple computer. So how can you fix this problem!?

The most important thing when you're creating retina-friendly images is the actual dimensions of the image. It is actually fairly easy to add Retina support to your existing WordPress theme ... just upload an image that is twice the size of the image space. In other words, if your image "space" is 700px wide by 300px high, the image you upload should be .... do the math .... 1400px x 600px. Make sense? (still at 72dpi like all your images should be for web use!)

If you do nothing else - make your logo retina quality!

Since I use the Genesis framework, this is how I recommend setting up your website, in Genesis (Sample Theme), to show a higher res logo on retina displays:

Add this to your style.css file, down at the bottom where the other Media Queries are likely set (check to see if the logo.png code is already there - you shouldn't need to add that)

Another option for images that are not the header image/logo is to use this script. All you have to do then, when you are adding a new image to the site, save one file as, for example image.png and another one twice the size as image@2x.png and the script will detect which version to display. This works for any file name, just add @2x after the file name. (Note: I have discovered that if you don't have a version @2x your site will show some 404 errors when this script looks for that version when viewed on a retina display device.)

Finally, some themes will allow you to upload a 2x size version of your logo into the customizer (header image). In this case, you may have to edit the style.css to ensure the logo shows at the correct size (Which would be 1/2 the 2x version of your logo. Have I confused you yet!?)

.header-image .site-title a {
min-height: 164px;
width: 100%;
float: left;
}

Other things to note to make your display consistent is to use icon fonts where possible as these will always display in high resolution.

Leave a Comment