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.


Grand Slam Media CEO Luke Hazlewood Hits It Out of the Park

Grand Slam Media Inc. CEO Luke Hazlewood’s view of the advertising business is one that seems to have solid roots. He says that in an ever-changing marketplace it is a better protocol to lead rather... More »

2017 XBIZ Webstar of the Year Harriet Sugarcookie Dares to Evolve

Start with a heaping helping of charming personality, sprinkle a dash of delightful quirky antics, then lather the final product with a whopping dollop of sensual sweetness… and what do you get?... More »

2017 XBIZ Trans Performer of the Year Reigns Supreme

It’s easy to see Aubrey Kate now — the modelesque, blonde bombshell — and dismiss her recent awards in the erotic arts as inevitable. It’s easy to say that she was simply born with... 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.


XShow 18+ 2017

Jun 01 - Jun 03
Moscow, Russia

Cam Summit

Jun 02 - Jun 04
Lloret de Mar, Spain

AW Summit

Jun 06 - Jun 09
Mamaia, Romania

Gaelic WWW Conference

Jun 19 - Jun 21
Wicklow, Ireland
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!