Image sizing for retina quality

[Andreas]

Hi there!

I’m trying to prepare images for my blog to appear the same size on standard and retina displays.

Bit of a n00b error – I thought that the theme would auto swap out a retina image for a standard display one, but that didn’t work out. I uploaded a 980 × 773 image thinking it might appear at the desired size (490 x 387 – i.e. 50%) on the retina display, somehow thinking it would also appear as 490 x 387 on a standard display too.

So now I have an image of a microphone input menu at twice the desired size.

Do you have any tips on how to upload images of a specific size that also appear the same size and are crisp for retina displays too?

Thanks a lot!

Topic

[Jason Bobich]

Hi Andreas,

Sorry for the confusion on this. — “Retina support” is still one of those topics we’re all still coming up with ways to deal with and understand. I personally wouldn’t put what you’re suggesting in a WordPress theme because I don’t really consider it to be “theme territory” — as you’re talking about the functionality of handling images within your content.

What I do in the theme is take all of the theme’s design layout images included with CSS that make up the skin of your website and provide 2x retina replacement images in the theme’s stylesheets.

However, replacing inline images within your content inserted by WordPress is a whole other ball game. If you checkout over on wordpress.org, there have been some free plugins popping up that handle this kind of thing each in their own creative ways.

http://wordpress.org/plugins/search.php?q=retina

If you play with any of these, please feel free to post any feedback here or tell me if one sticks out as a favorite!

[Andreas]

Hi Jason,

Thanks for your advice, it led me on a quest for the best plugin!

After experimenting with various plugins I found that ‘WP Retina 2x’ was the most reliable and versatile, it also appears to be the most popular. It provides multiple methods of achieving retina support for WordPress content and it’s free.

I now use the default method – which is the Retina.js method. It is described as ‘[a] fail-safe [way] and only uses one JavaScript file. When a Retina Display is detected, requests for every images on the page will be sent to the server and the retina images will be retrieved if available. Requires a lot of bandwidth.’

So, for those of you slightly baffled by preparing content for retina displays… these are the steps required for achieving it simply:

1. Download, install, and activate WP Retina 2X plugin.
2. Create standard and retina sized images…
– The retina image will be twice the size as the standard image.
– The file names of standard and retina images must be the same, however, you need to add @2x to the end of the retina image file name.
e.g. Standard image: Create ‘Aeroplane.jpg’ at 400 x 400 pixels.
Retina image: Create ‘Aeroplane@2x.jpg’ at 800 x 800 pixels.
3. Upload both of these images to your Media Library.
4. In the content of a post, for example… insert the standard sized image. With the help of the plugin, it will detect whether or not you have a standard resolution display or a higher resolution display (retina)… and it will choose to display the appropriate resolution image for the appropriate display. So to conclude, if you upload ‘Aeroplane.jpg’ into a post and publish it… when viewed on a retina display the viewer will see the crisp ‘Aeroplane@2x.jpg’ version.

I know this perhaps has been a long way of describing it, but I know many people who are confused by how the swap out of images is decided. Check out Settings > WP Retina 2x in WordPress if you want to tweak more advanced settings.

One final thought… for now, this method will set you up to prepare images at the exact size for regular and retina displays. In the future when displays are even higher resolution, plugins like this might be updated so they can detect whether you have an even higher resolution display. For this reason, I suggest that it might help to keep the original image at hand for all of your content, so you can create higher resolution copies in the future. In addition, for things like common graphics, maybe it’s an idea to start using vector fonts… which this theme supports nicely with a shortcode (thanks Jason!)

Shortcode for vector icons: [vector_icon icon=”star” size=”20px”]
Link to a bunch of vector icons: http://fortawesome.github.io/Font-Awesome/icons/

Thanks once again for your help Jason, I hope this post can answer some questions people have about retina images on their WordPress sites!

Andreas

[Author]

Replies