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!
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“.
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-1200×[email protected]“. 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 1600×800 px image, the 2nd and 3rd are retina optimized 2400×1600 px images. Comparing the 1st and the 2nd image, the 2nd is sharper and shows more details (have a look at the trees!).