This post will be pretty direct and to the point to give you the most bang for your time, as I like all technical posts to be. But let me just preface this with a few items so you know what this is not necessary for. If you have a particular background image you want to be retina display and it’s for your own site where you can change out the code, you can just do this in CSS, and not worry about the dynamic aspect.
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.box{
background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}
}
However… if you want the user of your WordPress site to have the option to upload a retina image every time for a background:
You can use Advanced Custom Fields, by adding another image to your Post type. And allowing the person using the website to serve up Retina display images every time.
First get it working with two different static images
I think it’s most important to service branding elements, and so in the instance I needed this recently I added the Advanced Custom Field to the Front Page Slider. Using the No-SRC Method, I’m able to set two different possibility to serve up to browsers. Retina displays get the “data-2x” attribute, and regular displays get the “data-src” attribute, but having both of these attributes on the div that you want the retina background on.
<img alt="" data-src="logo.png" data-2x="logo@2x.png" />
<div data-src="background.jpg" data-2x="background@2x.jpg"></div>
With this method you’ll need to add this piece of Javascript to your website:
var elems = document.getElementsByTagName('*');
for(var i=0;i < elems.length;i++){ var attr = (window.devicePixelRatio >= 1.2)? elems[i].getAttribute('data-2x') : elems[i].getAttribute('data-src');
if(attr && elems[i].tagName == 'IMG'){
elems[i].src = attr;
} else if(attr){
elems[i].style.cssText += 'background-image: url('+attr+')';
}
}
Use Advanced Custom fields to make the data-2x and data-src tags dynamic
Now if you’ve never used Advanced Custom Fields in WordPress, it’s a powerful tool that allows you the ability to give a particular type of post or page different ‘custom fields’ where the user in WordPress can have little blocks of text, or images that say exactly what they are or where they’re going to go on the final template, and you can build those into the templates you’re creating.
Here is an example Screen of how you might be using ACF to add the retina image. Make sure to choose “Field Type: Image” and Return Value: “Image URL” to use this method.
So for this project in our template we could use it like this:
<div class="slide" data-src="<?php the_field('regular_image'); ?>" data-2x="<php the_field('retina_image'); ?>"></div>
This is a brief overview of how to use the No-SRC method and Advanced Custom Fields for allowing your WordPress user to upload and then displaying retina display images, if you have any better ways to have a dynamic retina background in WordPress, or other ways to serve retina images, Share in the comments below!
Using Retina.js for non-background Retina Images
For serving up regular retina assets that don’t require background images I highly suggest using Retina.js. It’s very simple you just add the retina.js (enqueue it in WordPress in your functions.php file) and then any image that has a version named with the a @2x.jpg or @2x.png at the end of it will be served up for retina screens instead of the regular image. Example “regular-image-name@2x.png” would show up instead of “regular-image-name.png”.
Just make sure your images are uploaded in the same folder. Because of the way WordPress categorizes image uploads by date, this would mean you’d want to encourage your website users to upload the image at twice the size at the same time as the other one with the @2x convention if they’d like a retina display image to be served.
