Retina Methods

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.

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.

 

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