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.


Evil Angel Chief Adam Grayson Champions Brand Evolution

Evil Angel is hardcore. More than a quarter-century after John Stagliano revolutionized adult filmmaking with his unique brand of gonzo titles and a lucrative director-as-producer business model, CFO Adam... More »

WIA Profile: Lupe Martinez

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Jose Sanz Weaves a Profitable Tapestry at FreeWebCams

Navigating the complexities of customer service in the camming industry is a varied and oftentimes chaotic task, pulling even the most seasoned professionals in a multitude of directions. Fortunately for... 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 Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


Latin America Adult Business Expo

Jul 10 - Jul 12
Cartagena, Colombia

XBIZ.net Paysite Meetup

Jul 13 - Jul 13
Barcelona, Spain

ANME Founders Show

Jul 16 - Jul 18
Los Angeles Marriott Burbank Airport


Aug 03 - Aug 06
Montreal, Quebec
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!