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.


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.


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!


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.


  • Pingback: Making photos on a Wordpress site crisp on Retina Displays()

  • Can you explain what the new Responsive Images selection is and why we might or might not want to use it?

    • That’s right, it was missing πŸ™‚ I just adding the information. I hope it helps, but it’s a bit difficult to figure out. If your website looks perfect with Responsive Images, keep it, otherwise go for PictureFill.

  • Hi @JordyMeow:disqus I think the “Responsive Image” options will work flawlessly with the themes made by people like ArrayThemes, MyThemeShop as from my own experience I can say that these guys writes the most well coded themes, following all the best coding practises. But for the plugins, well no one can say anything certainly about them. lol πŸ˜€

  • Matthew Taylor

    Hi, our site is and I bought your plugin to help us display our logo better for different screens. I’m not great at coding but managed to get it working using the retina.js (couldn’t get it working at all using picturefill). However the logo displays too big in some browsers like microsoft edge. Is there a way around this? Or is there a reason why picturefill won’t work?

    Also with the current way it works (works well in chrome seemingly), it displays the low-res version then once the page renders fully it then goes to the retina logo. Is that normal? Thanks!

    • Hi! I am not sure why PictureFill doesn’t work, but other plugins can stop it from working, so we would need to debug a lot here. The logo displaying too big is a different problem though, and the size of it should be defined in the CSS (as mentioned in the FAQ:

      With Retina.js, the normal version is loaded first and then replaced by the Retina version, this is the way it works. With PictureFill, that wouldn’t happen. For debugging PictureFill, check this:, especially the point 4. If you find something, please let a comment on that page πŸ™‚

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