Hardly anyone will be surprised, if they hear about retina displays and screens with the increased density of pixels. Now there are enough plugins for WordPress sites that ensure the correct display of your content on any screen. Nevertheless, this remains a hot topic for discussions among developers, users, designers.
“Is there a unified ready-made solution for correctly loading and creating images for Retina Display?”
“Do I need to remodel an existing website to provide support for Retina Display settings?”
“How to determine if there is a support for Retina Display in the Theme?”
“What are the features of developing a WordPress theme that is compatible with Retina?”
These and other questions collect thousands of comments on the forums and to this day remain unresolved. Why is this topic so significant?
The visual design of your site is just as important as the functional component. Seems nothing complicated! Choose beautiful pictures, place on the page and that’s it. But it’s worth asking yourself a question – “What image will the end user see on his device? Similar to the one was loaded?” You need to consider the size of the screen, the browser, the brand of the device, the density of pixels.
We offer to consider one of the solutions provided by Imulus – the Retina.js script, which allows to simplify this task.
How does it work?
Automatically replaces images to a higher resolution, if such is present on the server. Thus, any user of Retina Display will see your content in the correct size and quality. To do this, you need to use the so-called Apple’s prescribed high-resolution modifier (@ 2x). An additional version of the image in higher resolution.
For example, if you have an image on your page that looks like this:
<img src=”/images/example.png” />
The script will check your server to see if an alternative image exists at this path:
+ Ease of implementation and management.
+ Control the density of pixels on the site.
+ Skip external images and skip internal, but do not have retina-copies.
+ Can be used on any sites with images in the content.
+ It weighs only 4Kb and adds all the functions that you need to determine if the retina is being used and to load the correct image.
– Retina-devices download both versions of each image.
– Image substitution is noticeable on retina devices.
– Does not work in some popular browsers (IE and Firefox).
To support retina of your website does not require much effort. Using the Retina.js tool, the content will look good on any devices. If you are only in the development phase of the project, it is advisable to choose the Theme that are already adapted for Retina Displays.
You can download one of Fruitful Code’s WordPress Theme built with Retina.js plugin.