Meks
AWSM knowledge base
Knowledge base / AWSM / How to make your WordPress website images Retina ready

How to make your WordPress website images Retina ready

No doubt that the high-resolution images are the need these days. If you are running any kind of modern blog or magazine, you are most likely aware that some of your visitors might be using Retina displays. These high DPI devices are capable of showing images in great quality and larger size than the average screens.

In order to help you out with the set up for those high DPI screens, we assembled this quick guide to help you out.

What is a Retina display?

Retina displays is a brand name used by Apple for its series of IPS panel and OLED displays that have a higher pixel density than traditional displays.

These screens can display higher resolution photos and in order to serve images with larger resolution (double sized) just for them.

Install Retina x2 WordPress plugin

The easiest way is to install a plugin that will perform the needed actions. We recommend the WP Retina x2 plugin (https://wordpress.org/plugins/wp-retina-2x/). This plugin will generate the needed double sized images and will also insert the needed markup for the image elements. So, you don’t need to manually create any images, the plugin should do that automatically.

In order to install this plugin, please navigate to WordPress admin -> Plugins -> Add new. Now, just enter the words “Retina x2” and wait for the results. Once the plugin is listed, click install and activate it. See image:

Installation of the WP Retina x2 plugin

Installation of the WP Retina x2 plugin

Once the plugin is installed, you can access its settings inside the WordPress admin -> Settings. Then, you just need to check the desired image sizes that you want to make retina ready. The plugin will generate the double sized images and serve them accordingly.

Choosing the right image sizes

Choosing the right image sizes – WP Retina x2

You also check the official WP Retina x2 plugins tutorial here: https://meowapps.com/wp-retina-2x/tutorial/

Setup Retina display support manually

There is also a way to utilize the javascript to provide the retina images without the usage of a plugin. This method will require that you prepare the images that are double sized manually. You will also need to upload them along with the regular images. Then the script will automatically find the double sized images and just replace the original ones with the Retina-ready images.

Retina.js

The most popular script for making websites support Retina images is definitely the Retina.js

If you plan to use this script, you will need to upload it inside your themes JS folder. Then you will need to alter your theme functions.php file and use wp_enqueue_style to load the script on the front-end of your website.

The script work like this, it will check if the display is Retina ready, then it will search for the Retina image that you have created manually and replace the original one in place.

Dense.js

This is a jQuery plugin for Retina display that is similar to the Retina.js. The script calls the $.fn.dense() initializer method and it targets the img elements. So, it will serve the Retina-ready images per needs as well.

Conclusion

The easiest way to make your WordPress blog or magazine Retina display ready is to install the WP Retina x2 plugin. If you don’t want to use the plugin, you will need more time to prepare the images, especially for the Retina displays. It will also require a small tweak on the theme in order to make it work like that.

Was this article helpfull? Yes No
Need more help?
If you have any further questions, we are here for you.
Meks