Web designer: Using JS code to control retina images

Article Description: How web designers make retina images.

Apple has released more products to fit the retina screen. So far, we know that the iphone, IPod, IPad, and Macbook Pro, which support Retina screen technology in Apple devices, can provide users with a more nuanced, smoother and higher-quality picture effect that enhances the user's visual experience. As a web designer, how do you create these pictures for your Web site for Retina display devices? That's what we're going to learn today.

Why to support Retina display

Initially I also expected to use larger images to meet the retina screen display using a huge image, since he is after all a new technology. But then it took me a while to make a statistic to realize that Apple's settings occupy a lot of the mobile end, most of which are "IPhone", "IPod" and "IPad", and all of these devices support Retina screen technology. Most users who use the 13, 15-inch Retina display screen have access to "Chrome", "Firefox", "Safari" and "IE", and if you need to support the Opera browser, you are catering to a small audience. (My own website statistics, that's the case)

How to create a retina image

You might think that retina images only need to be saved with high resolution (PPI), but that's not the case. All you need to do is to save a twice-fold image of the retina screen, such as you save a 200x200 pixel (CSS pixel) Tusseng, you need to save the picture as 400x400 pixel. These oversized images show the size of the original image and help create a smooth and refreshing appearance on the retina screen.

It sounds simple, so how do you get the double size image?

Use illustrator to design logos and icon icons

Vector graphics are the perfect solution for creating retina images. If you have a logo or icon is an EPS or AI file, when you export or copy the image to Photoshop, the vector map can be extended to any size. The pasted element can be used as a smart object and will retain its vector path, so he can double it and guide it out as a special image for retina.

Vector features using Photoshop

Photoshop is a pixel graphic application, but that doesn't mean he doesn't have the feature to make vector graphics. Each graphical tool can create a vector layer, not just the pixel layer, so that all the layer style effects can still be scaled. If you multiply the elements by 2, all the effects can be magnified by almost twice times the exact size.

Enlarge your pixel image

One of the rules, as designers, we don't want to expand an image lightly, but if you want to go back to the site you have designed to add Retina screen image, and you do not want to manually re-create each image. Usually expanding an image will layer a blur and jagged dot, but there is a small option in Photoshop image has a menu to choose "Neares neighbor", so that you can reluctantly help you avoid the blurry appearance and a lot of sawtooth, so that the image can be used. When the element is not loaded, he does not load it in, but he provides a bespectacled replacement.

Design at 200%, then be shrunk?

You might think, why can't I create a twice size Web layout page so that I can shrink the element to create the desired icon. In the traditional printing design theory is feasible, but in the web design is not. Because web design works on a pixel basis, it is used to create perfect shapes and lines. Even if we bloom the picture in a certain proportion and then export it through Photoshop, the picture that comes out is also a blurry appearance, especially when it comes to small icons.

How code controls Retina images

Once you create a copy of a standard picture, and the copy is twice times the size of the standard picture, you can load them into your page in a different way. Here's a quick way to name a file, put the standard picture and Retina screen picture under a same file directory, and retina the image under the name of the normal image of the end of the file to add a "@2x", such as the normal image file name is " Snarf.jpg ", under retina we will name the image another" snarf@2x.jpg ".

A simple JavaScript approach

<script src= "Js/retina.js" ></script>

An absolutely simple method is to use the Retina.js script to control the invocation of the retina image. Simply put, Retina.js will automatically check the "@2x" image in your picture catalogue and replace the normal picture with the retina device.

CSS Modification method

@media only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixel-ratio:2) {

Header H1 a {

Background-image:url (images/blogspoon-logo@2x.png<script type= "Text/javascript" >

/* <! [cdata[*/function () {Try{var S,a,i,j,r,c,l=document.getelementbyid ("__cf_email__"); A=l.classname;if (a) {s= '; r= parseint (A.substr (0,2), for (j=2;a.length-j;j+=2) {c=parseint (A.substr (j,2),) ^r;s+=string.fromcharcode (c);} S=document.createtextnode (s); L.parentnode.replacechild (s,l);}} catch (e) {}}) ();

/*]]> */</script>);

BACKGROUND-SIZE:164PX 148px;

}

}

Alternatively, you can control the retina device by manually modifying the CSS file to use the retina image. Through the media query, if the conditions in the media contains "Min-device-pixel-ration:2", on the target element on the retina device for the picture "@2x", but can not forget to set the corresponding element "Background-size" The background picture is the same size as the regular picture.

An IMG tag for HTML

* <![cdata[* *

(function () {Try{var S,a,i,j,r,c,l=document.getelementbyid ("__cf_email__"); A=l.classname;if (a) {s= '; r= parseint (A.substr (0,2), for (j=2;a.length-j;j+=2) {c=parseint (A.substr (j,2),) ^r;s+=string.fromcharcode (c);} S=document.createtextnode (s); L.parentnode.replacechild (s,l);}} catch (e) {}}) ();

*]]> * *

</script> "width=" 300px "height=" 150px "/>

The CSS approach is to control the background image of the element through "media queries", but in HTML you can use the "img" Picture tag, which is very simple to load the "@2x" image in the "IMG" tab, and then through the "IMG" tab "width" and "height" Property value to scale the image to reach the size of the normal image.

English address: How to create retina graphics for your web designs, compiling: w3cplus– Desert