css3 processes sprite background image compression to solve the problem of blurry icons of H5 web pages in mobile browsers_html/css_WEB-ITnose

Recently, I was responsible for a WeChat H5 App project and encountered a depressing problem. When viewing the webpage through the mobile browser, the icons were blurred and jagged, but the display on the computer browser was normal. I probably knew it was a problem of resolution adaptation, etc. Then I looked up some solutions on the Internet. Most of the solutions were to design a set of icons that were enlarged by 1x and then compressed and displayed.

We all know that the tag can compress large images by fixing the width and height to obtain a high-definition display effect. Icons are generally presented with background images. How to do this? Well, CSS3 has a very cool attribute background-size that can directly set the width and height of the background image, directly solving the former doubts.

Then the problem comes. It is impossible for each icon of our web page to be loaded with a separate image. In that case, each image will be an HTTP request overhead. Our general approach is to put together multiple small images. In a large picture, the problem is solved by the sprite (elf) background-position positioning method. As long as a large picture is loaded, multiple icons can be displayed, reducing http request overhead and improving performance. Therefore, we also hope to put the 1x enlarged high-definition icons into one large picture, position each corresponding icon through background-position, and compress it. I searched many methods online and finally found a reliable solution:

1) First, we need to prepare two pictures lined up (must be lined up, explained below), one is the original size , the other one is enlarged 1x in size

(map-icon.png)

(map-icon@2x.png)

2) The initial writing method is mainly for display on computer browsers. We can use the original image map-icon.png

/*  //网页标签：  <a class="control"><span class="car"></span></a>  <a class="control"><span class="position"></span></a>*//* 装载图标的容器，固定宽高，内距设为0 */.control { display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }/* 图标标签，宽高自动填充 */.car,.position,.zoom-in,.zoom-out {	display: block; 	width: 100%; 	height: 100%; 	background: url(images/map-icon.png) no-repeat;}.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }

3) The question is, how do we know what the background-size attribute value should be set to? Later I found a formula:

高分辨率图像宽度 / 目标图像宽度 = X原始Sprites图像宽度 / x = background-size的宽度值

Well, we won’t expand on the principle of the formula here. Just write it down and try it:

60 / 30 = 2, which is the magnification factor

7 photos The total width of the 60x60 large image is 420

420 / 2 = 210, which is the width of background-size

and the height of background-size, we can set it to auto here, and then replace it with @2x Compress large images

Also, we must declare a Media Queries in the outer layer, which is specifically targeted at Retina screen device displays

/* 移动端媒体查询像素比 */@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) {.car,.position,.zoom-in,.zoom-out {	background: url(images/map-icon@2x.png) no-repeat;        background-size: 210px auto;}/* 注意这里还是按30像素大小的位置来查找 */.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }}

On the contrary, it seems that we can also The value of height is fixed, and the width is auto-adaptive, but I have tried it, but it is not easy to succeed. From now on, we will just use a row of icons to arrange them and assign a width to the background image!

Finally, the before and after effects of using this solution are given:

(before treatment)

(after processing)