How to Make the Images Retina Ready on Your WordPress Website

How to Make the Images Retina Ready on Your WordPress Website

Stuart Holmes

Nowadays, we all live in an HD world.  With many of us spending more and more time online, the quality of the images on your screen is becoming increasingly important.  While retina displays have been around for a few years, they are definitely the way of the future.  Retina displays benefit from high pixel density which helps make images extremely crisp and clear.  Learning how to create a retina-ready WordPress website is now very important.  Unfortunately for web developers, there is no one-size-fits-all solution to make your site retina-friendly.  So, while we’re waiting for a new solution, we thought it would be useful to talk you through some of the best available options you have to make your WordPress website retina-ready.

Creating Multiple Image Assets

We’ll get started with the basics.  One of the quickest and easiest ways to ensure that your WordPress website is retina-ready is to spend time creating multiple image assets in a number of resolutions.  This means that for every standard resolution asset, you will also need to create an HD version of the same asset.

All that’s required to achieve this is to create multiple versions of the same file and then use WordPress plugins like WP Retina 2x.  This plugin will then generate the @2x versions of different image sizes.  This can be a particularly time-consuming process, but at the moment there is no catch-all method on offer that will automatically generate the different resolution images for you.  However, it’s not all bad news.  There are a number of Photoshop plugins that help speed up this process.

Scalable Vector Graphics

One of the easiest ways to stay one-step-ahead in the retina-ready game is to use the Scalable Vector Graphics (SVG) format on your WordPress website.  SVG is a XML-based vector image format.  As the name suggests, SVG is scalable.  This is good news as the images on your website will remain clear and crisp, regardless of how much you stretch them.

It’s important to remember that as SVG is a vector format, it is not suitable for all image types.  You will be able to use SVG for icons and logos, but not for photographs.  If your WordPress site using a lot of simple illustrations, animations and icons then SVG files would be a good option for you.

CSS Sprites

If you’re unfamiliar with the term ‘CSS Sprites’, it refers to a collection of images put into a single image.  Sprites are quickly becoming a popular solution to retina-ready websites, given the lack of a catch-all solution.  If you’re keen to use sprites to get your WordPress website retina-ready, you will need to create high-resolution images.  These images need to be twice as high and twice as wide as standard resolution images.

There are a number of CSS sprite generators that will automatically generate standard and Retina sprite images.  Also, they will even generate code for you!

How are you going to make sure your WordPress website retina-ready?  Let us know in the comments below.

Stuart Holmes

Author Stuart Holmes

More posts by Stuart Holmes