WP Retina 2x

This plugin creates the image files required by the Retina (or any high-DPI) devices and displays them to your visitors accordingly. Your website will look beautiful and sharp on every device. The retina images will be generated for you automatically (you can also do it manually) and served to the visitors. You will be able to control everything from a nice dashboard.

Retina for WordPress

Showcase

I originally made WP Retina 2x for my own use and, of course, I use it on my two main websites. Do you want to see what it does and how my websites appear on Retina? Visit them :)

  • Totoro Times: Hosted on WP Engine, uses the PictureFill method and WP Engine CDN. Also uses WP Smush (image optimization).
  • Haikyo.org: Hosted on SiteGround, uses the Retina.js method and MaxCDN. It additionally uses CDN Linker (change the JS, CSS, IMG links for CDN use) and EWWW Image Optimizer Cloud (image optimization).

I recommend both WP Engine and SiteGround, they are both really nice hosting services for WordPress. Super fast and awesome support, all we need. If they are too expensive for you, I then recommend you HostGator. They don’t have the best performance but they are super cheap and they have a surprisingly good support.

What does it do?

retina-what-it-does

Methods

It supports 4 different methods to serve the images to your visitors/

The Picturefill method rewrites the HTML on-the-fly in order to use the new srcset. Since it is not supported by the browsers yet, the JS polyfill Picturefill is used to load the images. It is now the recommended method. 
The Retina JS method is a 100% JS solution. The HTML loads the normal images, then if a retina device is detected, the retina images will be loaded. It is fail-safe but not efficient (images are loaded twice). 
The IMG Rewrite method rewrites IMG’s SRC tags on-the-fly with the retina images directly if the device supports them. This method does not work with most caching solutions.
The Retina-Images method uses a server handler: the images will be loaded through the Retina-Images PHP handler. Your .htaccess will be modified automatically.

Pick the one that works best with your hosting and environment. WordPress Multi-site are supported as well. WP Retina 2x also loves WPEngine and strongly recommend it for your hosting. I am trying to keep a tutorial about this plugin up to date and comprehensive here.

Quick Start

  • Set your option (for instance, you probably don’t need retina images for every sizes set-up in your WP).
  • Generate the retina images (required only the first time, then images are generated automatically).
  • Check if it works! – if it doesn’t, read the FAQ, the tutorial, and check the forums.

Issues ? Questions ?

Check the FAQ and the official support forum.

I recommend you to use WPEngine or SiteGround. They are both excellent hosting services and work perfectly with all my plugins.