We live in a high definition world. And since most of us spend more than eight hours a day looking at different types of screens, the quality of the images and characters contained in these screens is very important.
Although they've only been available 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 love nice, crisp images?
Learn to create a website compatible with Retina screens is an important asset for any web developer. Unfortunately, there is no ideal, perfect solution to make your website user-friendly with Retina-Ready displays.
So while we wait for someone to find the most complete solution, we've looked at some of the best possible options for getting your website ready. That way, you won't be led astray when the time comes when all devices will have Retina's showing up in one form or another.
But before you start, take the time to take a look at How to install a WordPress theme, How many plugins to install on WordPress.
Then let's get to work!
Creating multiple image files
Let's start with the basics. The easiest way to get Retina Mode support for your website is to create multiple image variations in different resolutions. This means that for each type of resolution (i.e. 1x) you need to create a high resolution version of that clip (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 automatically generate the "@ 2x" versions of each image size or find "@ 2x" images and display the size corresponding to each device.
It is true that creating multiple versions of the same image can be a time consuming process. Unfortunately, there is no quick method that automatically generates these images for you. However, there are several Photoshop plugins that allow you to quickly repair your images.
Plugins like " Retinize It Which is a series of Photoshop actions that let you 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 basically does everything the current Photoshop Generator tool does, but for older versions of Photoshop.
Scalable Vector Graphics (SVG)
The easiest way to go ahead with Retina mode is to use Scalable Vector Graphics (SVG) on your website. SVG is an XML-based vector image format. As the name suggests, an SVG image is scalable, meaning that images can be stretched as far (or as little) as needed, while still being crisp and clear. It can be a quick and easy way for you to implement Retina Mode without much effort.
Read also: How to provide WebP images instead of traditional PNG & JPG
However, there are two downsides to using SVG on WordPress. The first is that since it is a vector format, SVG is not suitable for all images. So you can use SVG for logos and icons, but not for files like photos (which is a little painful if you like to use high resolution images for your website). But if you want to use simple icons, animations or illustrations, SVG files can certainly be an option for a Retina-compatible website.
The second downside to using SVG on WordPress is that it is not an officially compatible format with WordPress due to security concerns. Since an SVG file is essentially an XML file, this opens it to all known vulnerabilities associated with the XML file format, such as coercive analysis, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) attacks, etc.
However, there is a way to enable SVG support for your website which will make your SVG files secure.
How to enable SVG safely on WordPress
Safe SVG is a plugin that allows you to securely enable SVG file support on your website. This plugin ensures that your SVG files are disinfected to prevent any potential XML vulnerabilities affecting your website.
Stay away from plugins that allow MIME type to allow uploading from SVG to WordPress media library as these are dangerous and potentially harmful for your website. So, if you are really tempted to use the SVG format on WordPress, make sure you do it safely and don't download the first SVG plugin you see.
Drive more conversions to your blog by reading our 15 content types that generate more visitors to your blog
Some plugins to integrate Retina compatibility on WordPress
There are several scripts and plugins for Retina compatibility that can make your life much easier when trying to set up a Retina Mode compatible website. However, as mentioned earlier, most of the plugins and scripts available, replace your images with high resolution images only for high resolution displays. They don't stretch like an SVG: you still need to create multiple images of different resolutions.
1 - retina.js
retina.js is one of the most used scripts to serve high resolution images. This is an open source script that makes it easy to serve high resolution images to devices with Retina displays.
The script checks each 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 images for Retina displays on your website.
See also: GIF, Emojis or Memes: a good idea for WordPress websites?
2 - Dense
Similar to retina.js, Dense is a jQuery plugin that offers an easy way to serve images in pixel-ratio format. The script calls the $ .fn.dense () method of the initialization, which targets "img" tags that will serve as Retina mode compatible images as needed.
So, it replaces all the images with the respective high resolution version, just like the retina.js script.
3 - WP Retina 2x
The latter can be likened to a magical Retina image generator.
WP Retina 2x is a plugin that creates image files required by High-DPI devices and displays them to your visitors accordingly. Unlike the previous two scripts, it generates different resolution images from an initial image. So if you are not too happy with manually creating different images with different resolutions, this option is for you.
That's all for this tutorial, I hope it will allow you to convert your images to Retina Ready image.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. A Fancy WordPress Author List
As the name suggests, the plugin Fancy WordPress Author List displays the list of authors for your website in a widget. It has a simple user interface that allows display the information of any author in the sidebar. All you have to do is drag the author widget to the sidebar and the plugin will do the work.
Its main features are among others: the possibility to display the blog authors in a fun way to attract new visitors, the ability to display an author list in the sidebar or on the page, the ability to start a competition between the authors of your blog, a responsive layout, support for shortcodes and much more.
Download | Demo | Web hosting
2. Easy Table of Contents
Ce WordPress Plugin user-friendly allows you to insert a table of contents in your posts, pages and custom post types. It has many features, the main ones being:
automatic management of a table of contents, support for the tag , Rankin Math plugin support, compatibility with several page editors such as Gutenberg, Divi, Elementor, Page Builder Pagers and others, the possibility of choosing on which pages your publications you wish to display it, the automatic insertion of the table of contents on certain pages, and many others.
It’s a WordPress Plugin freeware that has everything you'll need to display your table of contents, so feel free to choose it as your first choice.
Download | Demo | Web hosting
3. WooCommerce Advanced Bulk Edit
Do you regularly edit your product catalog? Whether you have 100 products or 10.000, this WordPress Plugin premium is in my humble opinion “A must have”: (That's the first word that comes to mind).
For a few dollars only, the plugin WooCommerce Advanced bulk Edit will make life easier and save you monstrous time. There is no hesitation it's a bomb.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- 5 sources of traffic you probably know
- Case Study: Content Marketing, How to Learn from Mistakes
- Why freelancers need a daily schedule
- 7 aspects that will allow you to create a successful blog
Conclusion
Here ! That's it for this tutorial, I hope it will allow you to create Retina-Ready images for your website. Do not hesitate to share with your friends on your favorite social networks.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
