Image-set implementation of Retina screen image display [reprint]

Recently, I have been studying the treatment of Retina screen tablets, and I know the new term of retina from the web age of retina (retina), and know what he is, and continue to explore the knowledge points of retina, and then in the mobile web-- CSS for Retian screen replacement pictures and "use CSS sprites to optimize your site in the Retina screen display" in learning how to set up the retina screen, or skills, the next "how web designers make retina images" Learn the image-making techniques under the retina screen. It can be said that these articles can let me know how to deal with the image under the Retina screen tips and details. Because these articles from the concept to the production of retina shielding pictures, as well as coding implementation, can be said to be a dragon. These are all self-righteous things, why? In addition to these methods, there are actually more advanced methods, which is what I want to say next.

Just yesterday, right, last night, at the end of the dissected to share the "use CSS sprites to optimize your site display under the Retina screen" article, @ Rat sister told me Qq.com used a new technique to display the retina screen image, and specifically intercepted a piece of code for me:

. Soso. logo. Qqlogo{Display block; width: 134PX; height: 44PX; background-image: url ( Http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png);  background-image:-webkit-image-set (URL (http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x,url (http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x);         background-repeat: No-repeat;                /span>  

This code surprised me, really admire the ability of the front-end developers of large companies, worship AH. Flattery is not much to say, let's take a look at the way qq.com used it.

Open the Qq.com page and use Firebug to view its source code in its logo (which we all know):

This time in the source code can see the logo is used in this way:

This time directly let me worship, I do not know what he means? Don't know how to use this principle? It is the first time to see, only worship of the part, nothing else, do not know if you think so. Worship is worship, we still have to figure out what this image-set is? Here, let's leave it for a moment. What is Image-set? We use the tool first to understand the source of the image related information:

Use the same method to open the "Qqlogo_1x.png" and "Qqlogo_2x.png" two logo images in the browser:

From the surface we only know the size of the two pictures are different, the file name is different, we do not know, in order to understand the more detailed, we use the tool to view information about the picture:

At this time, the detailed information is panoramic:

1, qqlogo_1x.pgn detailed information:

2, QQLOGO_2X.PGN detailed information:

Wordy so much, just to illustrate a point, the picture source information is completely different. Novice can learn the use of web development-related tools through this step, the students can directly ignore, continue the following content.

Image-set to me, I am also very unfamiliar, so with the help of G dad and degrees Niang huge search image-set, just know WebKit kernel "safari6" and "Chrome21" Support for CSS4 's draft background-image new specification Image-set. Through the WebKit kernel's browser private property "-webkit", Image-set provides a way for web front-end people to solve high-resolution images, to solve the Apple Company's proposed Retian screen display picture of the technical problems. In short: This property is used to support Web front-end people to solve different resolution slices of the display, special (Retina screen).

Qq.com is the use of this method, the logo image processing, in the normal resolution, will invoke the "qqlogo_1x.png" image, and under the retina screen (such as Iphone4s,iphone5,new ipad and other iOS devices) will be called " Qqlogo_2x.png "image, which avoids the problem that the logo is not clearly displayed under the Retina screen. If this is not enough for you to understand, you can also see Jason Grigsby wrote a "test page" under "Safari6" and "CHROME21" using the private properties of the Webkite kernel browser.

HTML structure

<id="Test" ></div>   

CSS Code

#test{Background-image: URL (assets/no-image-set.png);Background-image:-webkit-image-Set (URL (assets/test.png)1x,URL (assets/test-hires.png)2x);Background-image:-moz-image-Set (URL (assets/test.png)1x,url (assets/test-hires.png) 2x); background-image:-o-image- set (URL (assets/test.png) 1x,url (assets/ test-hires.png) 2x); background-image:-ms-image- set (URL (assets/test.png) 1x,url (assets/ test-hires.png) 2x); width:200px; height:75px;}  

Remember that in "HTML5 need an adaptive image mechanism" in the discussion, Bruce Lawson in the "HTML5 adaptive images:end of round one" article in the HTML of the image adaptive to do a detailed introduction, and Matt Wilcox in Responsive Images:what's "The problem, and how do we fix it?" article discusses the use of images in responsive design. Then the discussion came to a halt. If you don't know why we need such a mechanism, you can read Matt "Grrr" Wilcox's responsive Images:what's the problem, and how do we fix it?

This time we need a mechanism like this, WebKit implements a non-standard function:-webkit-image-set, this attribute, as mentioned earlier, he is a new method of Background-image attribute definition in CSS4, Image-set, let's take a look at the Image-set syntax:

The syntax of Image-set

{  background-image:background: image-1x,2x) center;}     

Similar to different text, the image will also be displayed in different ways:

1. Image-set is not supported: in browsers that do not support image-set, he will support background-image images, which means that image-set browsers are not supported. They parse the background image in the background-image;
2. Support Image-set: If your browser supports Image-sete, and it is a normal display screen, then the browser will select the @1x background image in Image-set;
3. Image-set under the retina screen: If your browser supports Image-set and is under the retina screen, the browser chooses the @2x background image in Image-set.

The above is a brief introduction to "Image-set".

Why use Image-set without using media Queries?

If you read an article about retina, you'll know that there are many ways to display images on the retina screen, such as the "IMG" tag method, JavaScript and methods, and the "Media Queries" method, especially the media Queries "Method (if you don't know these methods, you can click this and this). Since there are so many ways to visualize the images under the Retina screen, why use the "Image-set" method. That's a very good question to ask. Jason Grigsby the "Media CSS3" to use "Image-set" instead of Queries in "Safari 6 and Chrome add Image-set to support retina images" A two-point description of the Retina screen image method.

Unlike media Queries,image-set does not need to tell the browser what image to use, but directly provides the image to let the browser choose. In the future, I would like someone to use the retina device to browse the Web, but when the internet is slow, tell the device to use a low-resolution image. Even better, he can select the desired image according to the Internet speed Smart.

The problem with "Media Queries" is that he has no choice under the high-resolution display. In other words, the browser must load the specified image when the browser resolution is equal to 1 or 2, or otherwise.

The advantage of Image-set is that browsers that support Image-set will match the desired image at high resolution without any additional functionality. But I believe that for browsers to provide different image choices, this browser selects the correct image under different resolution.

Image-set allows images of different resolution to be displayed in the same place in the CSS. When you use media queries to display different images, you may be able to separate many lines of code, which makes it difficult to find the corresponding image.

Jason Grigsby | August 14, 2012

Image-set really strong, unfortunately, he only supports the Background-image attribute, but not in the "

As mentioned earlier, Image-set can only use the private properties of WebKit browser "-webkit" under "Safari6" and "Chrome21" to run. Support is now available in iOS 6. Unfortunately, the current other browsers still do not support Image-set, now he is only a draft of CSS4, hope that in the future can be written in the standard for the benefit of the front-end staff.

Image-set Although the current is a new attribute, not a few browser support, but this is a new technology, we need to use, only with more people, in the future have the opportunity to write standard norms, is so-called "there is no road in the world, walk more people, the road will come out." But then again, this technique is a great way to solve the image display under the retina screen, and if you're in a meeting with a project that's image-set to the retina device, don't use it as bold as the qq.com.

East a hammer West a good say finished image-set, if you do not know how he is the same thing, it doesn't matter, you just need to know that this use can help you solve the problem is OK, because there are too many why we are not able to solve now, but with the accumulation of time, we will one day understand his principle. Finally hope this article can help everyone, if you have a better way, remember to share with us.

If you need to reprint, please indicate the source: http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html

Image-set implementation of Retina screen display [reprint]