Home > Features > Dev Depot: Ramping Up for Retina — Retinajs.com • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Ramping Up for Retina — Retinajs.com

Dev Depot: Ramping Up for Retina — Retinajs.com

August 12, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" The JavaScript solution is simple and easy to add to just about any site via a helper script that automatically replaces the images on a web page with high-resolution variants (if they exist). "

2013 could be considered the year of the tablet as an increasing number of consumers are turning to the powerful but portable form factor as their computing platform of choice — combining clear, sharp graphics with impressive multimedia capabilities to become a preferred viewing portal for everything from web pages to first-run movies.

While this power is a boon to users, the clarity of these high resolution displays — which can operate at 384ppi (compared to a standard ‘desktop’ display or TV at 72ppi), can leave legacy graphics looking lackluster and of a lower quality than they really are — a situation that is driving designers to seek out cross-platform image delivery techniques.

According to its publisher, Imulus, retina.js (www.retinajs.com) is an open source script that makes it easy to serve high resolution images to devices that employ Retina displays, such as Apple’s iPad, providing a path for bringing these images to your site.

It is a simple enough concept, Imulus explains: When your users load a page, retina.js checks each image on the page to see if there is a highresolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Of course, retina.js assumes that Apple’s specified high-resolution modifier (@2x) is being used to denote high-resolution image variants on your server. For example, source code to call an image to a web page might looks like this: <img src=”image.png”>, with the retina.js script then checking the server for an alternative graphic, “image@2x.png,” existing in the same directory.

Using retina.js is easy, with implementations for JavaScript and LESS.

The JavaScript solution is simple and easy to add to just about any site via a helper script that automatically replaces the images on a web page with high-resolution variants (if they exist). Simply download the retina.js script and place it on your server, including a call to it at the bottom of your page template, before the closingtag, such as: <script src=?/scripts/retina.js?></script>.

The LESS process involves a bit more, however, with the LESS CSS mixin acting as a helper for applying high-resolution background images to the stylesheet. Provide it with an image path and the dimensions of the original-resolution image and then the mixin will automatically create a media query specifically for Retina displays — changing the background image for the selector elements to use the high-resolution (@2x) variant and applying a background-size of the original image in order to maintain proper dimensions — an important step to avoid double-sized images. Implementation involves downloading the .at2x() mixin as part of retina.less and then importing or including it into the LESS stylesheet, applying it to elements of your choice by calling the .at2x() mixin anywhere instead of using the backgroundimage CSS; using the syntax .at2x(@path, [optional] @width: auto, [optional] @height: auto); within CSS.

Users of Ruby on Rails or any other framework embedding hash values in asset URLs based on its content, such as “/images/image-{hash1}.jpg,” encounter problems with the different hash value that high-resolution versions would have, thus automatic detection methods fail because there is no way for the retina.js script to know beforehand what the high-resolution image’s hash value would be, without server side help. Fortunately, www.github.com/imulus/retinajs offers Ruby workaround examples.

Altogether, retina.js is an intriguing option for solving the problems of serving both high resolution and standard resolution images seamlessly and side by side.


Randazza: Trump Victory, Big Prop 60 Win

On Tuesday afternoon, I boarded a transatlantic flight. Given all of the negativity in the 2016 presidential race, I was delighted that I would be absent for the results. I found both Donald Trump and... More »

Dissecting an $11.9M Affiliate Marketing Judgment

The Federal Trade Commission scored another major win in early October when the 2nd U.S. Circuit Court of Appeals upheld a lower court ruling, requiring LeadClick Media LLC to pay an $11.9 million award. The... More »

Legal Protection for Amateur Shoots

Any adult industry professional who creates video content with actual first-time amateurs will come to an early knowledge that later performer regret is commonplace. Recognized performers who regularly... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


Everything To Do With Sex Show

Jan 20 - Jan 22
Montreal, Quebec

Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!