We are all so different and so are our WordPress installs :) It would be an error to think that everybody could use the same method to deliver Retina images. I always recommend to go for PictureFill (and it is the default) but this is not your only choice at all.

PictureFill

The Picturefill method rewrites the HTML on-the-fly in order to use the new HTML tag calledĀ srcset. Ā Since it is not supported by the browsers yet, the JS polyfill PictureFill is used to load the images.

For SEO purpose, you might want to check theĀ Keep IMG SRC andĀ Use Lazysizes options as well. The first will keep the original image in the src so that it can be seen my search engines (and other services). However, for retina devices, it means the images mightĀ be loaded twice (the normal image then the retina one). The lazysize will kick in and only load the retina files when the visitor actually gets closer to that image.

Responsive Images

This only works with WordPress from 4.4. From this version of WordPress, the src-set is created automatically for the images in the postsĀ and the plugin adds the Retina images in it. Basically the parsing done by PictureFill (above) is skipped, which can increase the performance (but not that much since we are all using caching anyway). This option should be chosen over PictureFill only if your theme is extremely well-made but to be honest I don’t have examples of themes and installs that work nicely out of the box 100% Retina with only this option.

Retina.js

The Retina JS method is the 100% JS solution. The HTML loads the normal images, then if a retina device is detected, the retina images will be loaded.Ā Images will be loaded twice, then will be as many requests as there are images (to check if the retina files exist). It’s not the best for performance but it’s not terrible neither. This method is used by many majorĀ websites on Internet such as Apple.

IMG Rewrite

The IMG Rewrite method rewrites the images’Ā SRCĀ tags on-the-fly when a retina device is detected. However, since the HTML is rewritten, that method doesn’t play well with caching.

If you can negotiate with your hosting serviceĀ or the developer behind your caching plugi) to handle a different cache depending on the retina cookie (devicePixelRatio), then you will get theĀ fastest retina solution!

Retina-Images

This method is very neat as well but you will probably need to be a geeky user. The plugin will modify your .htaccess for this method to handle the requests to load the files. On the visitor side, all the images will look the same, there will be never @2x extension. The file sent by the server will however depend on the device. It’s a neat solution but it’s not for everyone as it might require some testing and sometimes, debugging. It also wouldn’t work with CDN.