An increasing number of readers are using high-resolution “Retina” displays: But how to deliver your images for this kind of screen? Our guide explains how to support Retina displays!

WordPress media settings

Check your WordPress settings

Set your standard image sizes in “Media > Settings“. The size is depending on your WordPress theme, layout, website content width etc.. For our site we are using 1200 x 800 px as “large size“.

WP Retina 2x settings

WordPress plugin WP Retina 2x

Install the plugin WP Retina 2x from the WordPress plugin repository. Open “Settings > Retina“, activate “Generate retina images automatically when images are uploaded or re-generated.” and disable all image sizes you do not need (saves disk space on your WordPress server).

The screenshot on the left shows our settings; we disabled the “et-pb-…” sizes, which are used by our WordPress theme.

When writing a new post you must upload your images twice the normal size, e.g. 2400 x 1600 px instead of 1200 x 800 px. WP Retina 2x generates a second image. Example, you uploaded an image named “bavarian-church-oberbuchen.jpg” (2400 x 1600 px), the new retina image is named “bavarian-church-oberbuchen-1200x800@2x.jpg“. On the screen you get an 2400 x 1600 px image shown as a 1200 x 800 px image!

This method has some disadvantages, you need more disk space and the page size is bloated – so the page load time might be affected (But, read our tutorial: Speed up your WordPress photography website).

A complete tutorial to all WP retina 2x settings (and for purchasing the pro version): apps.meow.fr

Guide to retina images in WordPress: Example

All images are saved for web in Photoshop (quality 60%). The first is a standard 1600x800 px image, the 2nd and 3rd are retina optimized 2400x1600 px images. Comparing the 1st and the 2nd image, the 2nd is sharper and shows more details (have a look at the trees!).

Bavarian church after sunset, 1200x800px

Bavarian church after sunset, 2400x1600px for retina display

Eagle, Great Bear Rainforest, 2400x1600px for retina display

Guide to retina images in WordPress – best image quality for your website! was last modified: August 18th, 2016 by Joachim Bardua

Pin It on Pinterest

Share This