Large images on the site for users with Retina Display - retina.js

The new iPad has already appeared in stores, not to mention the brothers iPhone 4S and iPhone 4, which many have been successfully using for a long time, but there are not so many sites that take into account the display capabilities of these devices in high resolution. But there is a simple option, how to make your website according to the trend “responsive”, or in their manners: responsive .

Somehow, about a year ago, a familiar photographer complained, they say, you have to reduce photos, losing details in which all the salt lies, they say the resolution of the screens is such that the dots are too noticeable. He rejected the iPhone 4 because of “cropping” - despite its decent physical resolution, only part of the photo is placed on this display. Then he switched to cameras with crooked matrices and what happens even when using good lenses, but I was hooked on the part that concerned the display of pictures, namely the lack of an opportunity to display the image from the screen without reducing the size of the image to Lilliput.

And then came the big iPad!

')


But the jokes are jokes, and the new iPad has really allowed digital photos to be shown closer to what we are used to seeing, which is great. But it turned out that there are practically no websites on the Internet where large images are normally used in content and design.

There is a solution, and it will not require reworking sites completely, only minor revision will be required.

First, our foreign colleagues approached the task of reporting highres-images based on the letter of the law, namely the Drawing and Printing Guide for iOS , where there is an automatic support for displaying high-resolution images ( @2x ). It is required only to provide these big pictures and say that they are. Of course, large images will be uploaded only when there is a need for them, users of ordinary and familiar devices with a resolution of about 72dpi will not download weighty images in vain.

Secondly, they solved this problem concisely, and even in two versions.

For javascript

It is proposed to upload retina.js (1.63 Kb) to the server and call it in the footer, close to the closing tag of the completion of the document body. Standard call:

  <script type = "text / javascript" src = "/ scripts / retina.js"> </ script> 

For LESS

The idea is clear without unnecessary syntax explanation:
.at2x(@path, [optional] @width: auto, [optional] @height: auto);

You need to connect (to include in your LESS style sheet) a piece of code contained in the retina.less file from the archive from the site http://retinajs.com/ and after that use all the power of constructions like:

#something
{ .at2x('/images/image.png', 200px, 100px); }


Miraculously transformed into detailed instructions for displaying your options for images for different types of displays:

#something
{ background-image: url('/images/image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#something {
background-image: url('/images/image@2x.png');
background-size: 200px 100px;
}
}

Result

For example, you have an interesting picture on your page:

  <img src = "/ images / boobs.png" /> 

When outputting, the script will check if there is a big image "/images/boobs@2x.png" , and if there is (and you with a screen that supports a large physical resolution), it will display it.