At studio.bio, all of the websites we create support retina displays and have since 2013. With upwards of 75% of mobile browsing done on retina display devices, to not support them would be…erm…shortsighted.
Supporting retina displays is the right thing to do for developers but making it easy for clients to continue support is not always easy or intuitive. Having tried numerous times to get clients in the habit of uploading retina images has, in general, completely failed. They either forget or don’t have the tools available to create the required image sizes.
Over the last 4 years there have been many retina image solutions, each with their own benefits and detractions. Let’s take a look at these both from the developer’s and client’s point of view:
Retina.js
Retina.js. The original and still powerful solution using a small piece of javascript that serves high-resolution to devices that support them. To use retina.js, you create two images, one regular and one double the pixel density (double size) and add “@2x” to the file name which follows the original retina standard developed by Apple. For example, you would create a regular image at 300x300px: myimage.jpg and a double-size image: myimage@2x.jpg. In your code, your image call would look like this: `img src=”https://mydomain.com/images/myimage.jpg”`. The retina.js script looks for an image with the same name in the same directory that has “@2x” appended to it and swaps out the regular image for the double-size image for a retina device. Pretty straightforward but it means you have to create two images (or even 3 to support 5k @3x displays) every time. While apps like Sketch and newer versions of Adobe Illustrator make this easier, this is not always able to be maintained by your clients once you hand off your sites.
WP Retina 2x
We’ve been using the WP Retina 2x plugin for 2+ years on almost every site. What’s great about it is you upload a single image at the largest size you will need and the plugin creates all of the smaller sizes for you, based on the image sizes defined in the `functions.php` file. Using this in combination with Advanced Custom Fields means you can add an ACF image field with instructions for the image size needed so your clients know what size to upload and then WP Retina 2x does the rest. While this avoids having your clients have to create multiple images, there are some drawbacks. For one, the way WP Retina 2x creates images, the @2x and @3x images are *not* listed in the WP database. This is a huge problem if you are using Amazon S3 for static files and WP Offload S3. WP Offload S3 will not know about the retina images at all since they are not in the db so they won’t be uploaded to S3. You’re left with a blurry site that doesn’t load your images correctly. Second, sometimes themes can have upwards of 30 image sizes that WP Retina has to create, most of which you will never need.
Image Processing Queue
Delicious Brains, the devs behind WP Offload S3, have come up with a promising solution called Image Processing Queue (IPQ). IPQ creates only the image sizes you specify and in the background. The images are created properly so WordPress knows about them as will WP Offload S3 so you can dump everything off to your CDN. The only disadvantage right now is you have to explicitly delineate your image sizes for each image call in your theme. This is time consuming and probably more so than just exporting @2x and @3x images. Yet, if this can be improved with a call that calculates the sizes for you, it would be a game changer. You would just have to upload a single image (at @3x size) and then IPQ could create the @2x and regular size images for you, in the background, with a single call. This would be ideal for both devs and their clients.
In Conclusion
There’s still progress to be made with retina images but I think a comprehensive solution that works for both developers and their less tech-savvy clients is just around the corner.
