We live in a high-definition world. And since most of us spend more than eight hours a day staring at different types of screens, the quality of the images and characters contained within those screens is very important.
Although they’ve only been around for a few years, Retina displays are the way of the future. The high pixel density in Retina displays makes images clear and crisp. And who doesn’t like nice, crisp images?
Learning how to create a Retina-ready website is a very important tool in any web developer’s arsenal. Unfortunately, there is no one-size-fits all, perfect solution to make your website Retina-friendly (yet!). So while we’re waiting for someone to come up with the most comprehensive solution, we’ve researched some of the best available options you have to make your website Retina-ready. That way, you won’t be out of the loop when the time comes and all devices will feature Retina displays in some form or another.
Creating Multiple Image Assets
Let’s start with the basics. The easiest way to ensure Retina support for your website is to actually create multiple image assets in various resolutions. Which means that, for every standard resolution asset (i.e. @1x), you need to create a high-resolution version of that asset (i.e. @2x).
Basically, you can create multiple versions of the same file and use a plugin like WP Retina 2x or a script like retina.js to either automatically generate the @2x versions of every image size or find @2x images and display them for high-resolution devices.
It’s true that creating multiple versions of the same image can be a time-consuming process. And unfortunately, there is no catch-all method that automatically generates these images for you. However, there are several Photoshop plugins that allow you to fix up your images relatively quickly.
Plugins like Retinize It, which is a series of Photoshop actions that allow you to easily optimize your designs for Retina displays. If you’re using an older version of Photoshop (pre-CC), you can use something like Oven, which essentially does everything the current Photoshop Generator tool does, but for earlier versions of Photoshop.
Scalable Vector Graphics (SVG)
The easiest way to get ahead in the Retina-ready game is by using the Scalable Vector Graphics (SVG) format on your website. SVG is an XML-based vector image format. As the name implies, an SVG image is scalable, which means that images can be stretched as far (or as little) as necessary, all while staying crisp and clear. This can be a quick and easy way for you to implement Retina support without too much effort.
However, there are two downsides to using SVG in WordPress. The first one is that, since it’s a vector format, SVG is not suitable for all images. So you can use SVG for logos and icons, but not for raster files like photographs (which is a bit of a pain if you like using high-resolution images for your website). But if you’re into icons, animations, or simple illustrations, then SVG files can definitely be an option for a Retina-ready website.
The second downside to using SVG in WordPress is that it is not an officially WordPress-supported format because of security concerns. Given that an SVG file is essentially an XML file, this opens it up to all the known vulnerabilities associated with the XML file format, such as coercive parsing, XML external entity (XEE) attacks, XML denial-of-service attack (XDoS) attacks, and so on.
However, there is a way you can enable SVG support for your WordPress website that will make your SVG files safe to use.
How to Safely Enable SVG Support in WordPress
Safe SVG is a plugin that allows you to safely enable support for SVG files on your WordPress site. This plugin makes sure your SVG files are sanitized to stop any potential XML vulnerabilities affecting your site.
Stay away from plugins that enable the MIME type to allow uploading of SVGs to the WordPress media library, as these are unsafe and potentially harmful to your website. So if you’re really tempted to use the SVG format in WordPress, make sure you do it safely and do not download the first SVG plugin you see.
A CSS image sprite is a collection of images put into a single image. CSS sprites have been around for a long time, but they’re becoming more and more relevant given the lack of a catch-all solution when it comes to implementing Retina support.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
In order to use sprites as a way to “Retinize” your website, you’d need to create high-resolution images (e.g. 400 px) that are exactly twice as wide and twice as high as the standard resolution images in your sprite (e.g. 200 px).
The CSS for your standard resolution sprite would look something like this:
Since a sprite is a collection of images, your sprite would contain a list of all the icons that you’ve included, like this:
And then you’d have the CSS code to replace the standard images in your sprite with high-resolution images, depending on your visitor’s device:
Of course, if you have multiple icons on your website, creating separate Retina and standard sprites can get annoying pretty quickly. Luckily, there is an easier way to go about this.
CSS Sprite Generators
There are many drag-and-drop CSS sprite generators that allow you to automatically generate Retina and standard sprite images. They even generate the sprite code for you—how neat is that?
Simply drag and drop the images and the generator and it will automatically generate the CSS sprite code for you. Some of them even allow you to generate both standard and Retina images. So if you’re into saving time, CSS sprite generators might be for you.
Retina Support Scripts & Plugins
There are several Retina support scripts and plugins that can make your life a lot easier when trying to implement a Retina-ready website. However, as mentioned before, most available plugins and scripts just replace your images with high-resolution images for high-resolution displays only. So they don’t stretch like an SVG—you still have to create multiple images of various resolutions.
retina.js is one of the most widely used scripts to serve high-resolution images. It is an open source script that makes it easy to serve high-resolution images to devices with Retina displays.
The script verifies every image on the page to see if there is a high-resolution version of that image on the server. If a high-resolution variant exists, the script swaps the standard resolution with the high-resolution image. This is one of the most common ways to serve Retina-ready images for your website.
Similar to retina.js, Dense is a jQuery plugin that offers an easy way to serve device pixel-ratio-aware images. The script calls the
$.fn.dense() initializer method, which targets the
img elements that will serve Retina-ready images when needed.
So it replaces all the images with the respective high-resolution version, just like the retina.js script.
WP Retina 2x
The closest you’ll come to a magical Retina image generator is by using something like WP Retina 2x.
WP Retina 2x is a plugin that creates the image files required by the High-DPI devices and it displays them to your visitors accordingly. Unlike the two previous scripts, it generates different resolution images from an initial image. So if you’re not too chuffed about manually creating different images with different resolutions, then this option is for you.
Lucky for you, we’ve already covered how you can use WP Retina 2x for Retina-ready images in this post.
If you’re worried about your website slowing down because you’ve got too many images or versions of images sitting on your server, you might want to implement a lazy load script. Lazy loading allows you to display the right context at the right time.
There are several plugins that allow you to lazy load images, and you can read more about them here.
Retina support is tricky. Without the One Option to Rule Them All, we’re left with several options to choose from. The most important part, however, is to choose the option that is right for you.