Top

Retina.js

Home    Fruitful    Retina.js

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:
“/images/example@2x.png”

Consider the pros and cons of using Javascript Retina.js plugin:

+ Pros
+ 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.

– Minuses
– 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.

Spotter – Universal Directory Listing WordPress Theme

spotter.__large_preview

Download

 

Movement – Personal Blog WordPress Theme

movementbanner.__large_preview

Download

 

Zoner – Real Estate WordPress Theme

banner.__large_preview

Download

 

Zoner Lite – Free Real Estate WordPress Theme

screenshot (2)

Download

 

ANAGLYPH – One page / Multi Page WordPress Theme

anaglyph-banner.__large_preview

Download

 

Anaglyph Lite – Free WordPress Theme

screenshot (1)

Download

 

Love.ly – Simple & Elegant WordPress theme

lovelybanner.__large_preview

Download

 

ENDLESS – One page / Multi Page WordPress Theme

endless.__large_preview

Download

 

Suburb – Real Estate HTML Template

suburb-preview.__large_preview

Download

 

Fruitful PRO – WordPress responsive theme

Download

 

Fruitful – Free WordPress responsive theme

Download

View more products by Fruitful Code.

Aleksandra Pavlova

Aleksandra Pavlova

Main Support, HR Manager. She could be a fantasy books writer, but writes the content for our sites. She finds great joy in make-up artistry, chocolate and roller skates.