Thanks for this.
After researching Retina-supported plugins I was under the impression that these plugins serve to detect the type of device used (retina or non-retina) and display according. Meaning there is no need for two copies of the same image?
I realise we are getting a little off track.. but thanks for your insight.
You are correct in that they detect the device and offer up a Retina or non Retina version, but you still have to have both versions. All these plugins do is change the URL of the <img> tag to show Retina or regular versions of the same image.
This is taken from WP Retina 2x:
- HTML Rewrite: The HTML is rewritten at the very end, and the images are replaced by their retina counterparts if available. Very fast, no 404 errors, but HTML caching cannot be used.
- Client-side: This method should work in every case. Normal images are loaded first, then the client-side checks for retina images and download them if available. Works with caching but loads 2 images instead of 1. This method uses the Retina.js script.
- Server-side: Uses a server-handler that decides whether to send the normal image or the retina image. Efficient method, but since the filename is the same either way (as seen from the client-side), it might not play well with services such as Cloudflare or Google PageSpeed.
- Do you have any other idea? Let me know! 🙂
Don’t rely on the plugin for advice though, do more research on Retina. Here is a good article to get you started, but you can also do a Google search for “Coding for Retina Display”:
http://realmacsoftware.com/blog/coding-for-retina-on-the-web
It’s still a widely unknown area as it’s difficult to “detect” devices and also difficult to serve one image over the other. When you “detect” devices, you cross into the realm of browser/device sniffing and that is highly frowned upon.
I see, thanks for your input.
I’m wondering if it’s simpler to just turn off retina for now, save images for non-retina as I was doing until recently. Because to be honest I can’t really see a clear answer at present. So frustrating!
And of course I’ll take a visit to the Mac store.
Thanks again! Really appreciated!
Simpler, yes… but you won’t learn that way :).
The plugins you mentioned will work, if you hosted the images through WordPress. Since you are hosting the images remotely (smart move for bandwidth reasons btw), you’ll need custom code.
There is no easy answer… and as I’ve said it’s still uncharted territory. We haven’t jumped in head first yet either, but we are currently planning on doing some websites with Retina real soon. Do your research and have another go at it after you get a non-retina site up and running. Good luck!
Ha, yes I guess you’re right. After paying for a new machine it would be silly to backtrack now. Just so frustrating using new technology which is adversely affecting my images.
But thank you – I will do my research and start the hunt for a web developer who can hopefully help me.
Looking forward to hearing more about your work with Retina when the time comes.
Thanks!
