Retina graphics for Web Designs
Retina Display is a brand name used by Apple for liquid crystal displays which they have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.Now a days Retina graphics used for phones, tablets and laptops.
Resourses for Retina Graphics
Retina.js is a JavaScript script that checks your server to see if you have high resolution pictures available on your website. For example, if you originally have picture.jpg available, to make it retina ready, they will look for that picture that you uploaded that’s twice the size, and should be named accordingly. This takes care of much of the issue with high-res pictures.
formore ditails vist retinajs.com
Basic steps to follow for retina graphics
1. Download the script
Go to http://retinajs.com and click the “Download Zip” link. Open the zip file and copy the ‘retina.js’ file to where you keep your website’s javascript file.
2. Install the script
Add the script to your website by adding a <script> tag for retina.js to the bottom of the page, right before your closing </body> tag.
Ex: <script src=”/path/to/retina.js”></script
3.Add high-resolution images to your website
RetinaJS looks for images on your server that use the “@2x” naming convention. To start using high-resolution graphics on your website, simply upload images that follow this naming pattern.
<div id=”logo”>
<img src=”/images/logo.png”>
</div>
RetinaJS will automatically look for a corresponding image located at “/images/logo@2x.png”. If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your logo’s markup to look like this:
<div id=”logo”>
<img src=”/images/logo@2x.png”>
</div>
About the project
Retina.js is an open source script, created by the Boulder-based digital agency Imulus. You can help them in their project on Github.
