Shulou(Shulou.com)06/02 Report--

What this article shares with you is about how to understand the picture analysis in WEB development. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

First, reduce the size of the picture

When there are a lot of pictures, reducing the picture size is the most direct way to improve the download speed.

1. Use PNG8 instead of GIF (non-animated images) because the image size of PNG8 is smaller than GIF when the effect is the same.

two。 Use fireworks to process PNG images. In our products, many PNG images are exported directly by artists with photoshop.

Later let the artist use fireworks to deal with PNG (the general way is to choose to save as PNG8, delete the background color).

After processing, the size of the 100K picture has been basically reduced by 3max and 4, but the quality of the picture will also be slightly reduced, depending on whether you can accept it.

3. Use Smush.it (http://www.smushit.com/ysmush.it/) to compress pictures. Smush.it is a website where the YUI team makes an online compression of pictures.

The website loses some metadata in the picture without affecting the quality of the original picture, so you can rest assured to use the site for compression.

But this compression ratio is also relatively limited.

Merge pictures and split pictures

1. CSS Sprites merges images to reduce the number of requests to improve performance. But don't merge the pictures too much, too much too big

It will affect the display of this page because of this 1 picture.

two。 Sometimes we need to split a large picture into several small pictures. For example, there are relatively few pictures on the front page of the product, just a large banner picture.

Because browsers can download pictures concurrently, if you don't split them and use only one large picture, the download speed will be slow.

Third, transparent picture processing

IE6 cannot display transparent PNG images, which is a particular headache for many developers. Introduce the advantages and disadvantages of the following ways.

1. Use AlphaImageLoader,IE6 to support filter, and use the following CSS code to make IE6 support PNG

# some-element {background: url (image.png); _ background: none; _ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='crop');}

Pros: easy to use

Disadvantages: the performance loss is very high, AlphaImageLoader will spend a lot of resources on processing transparent images, and the use of memory with AlphaImageLoader,IE will increase rapidly.

And all AlphaImageLoader processing is synchronized in the same thread, so when there is too much AlphaImageLoader, it will block the rendering of the UI.

You can also recognize it with _ filter,IE7. In fact, IE7 can recognize PNG transparent images. If you use the above code under IE7, IE7 will not use pictures directly, but AlphaImageLoader.

Note: personal advice is to avoid using AlphaImageLoader as much as possible.

2. JS processing

Using DD_belatedPNG (http://www.dillerdesign.com/experiment/DD_belatedPNG/),), you can easily handle all the transparent images on the interface in the same way.

Pros: easy to use (simpler than AlphaImageLoader)

Disadvantages: when there are more pictures to be processed on the page, the speed is relatively slow, and the picture can not be changed dynamically.

3. VML

IE6 supports VML,VML to use transparent images. The code is as follows:

Modify the html code header

Html xmlns = "http://www.w3.org/1999/xhtml" xmlns:v > head > style type =" text/css "> v\: * {behavior: url (# default#VML);} span style=" color: rgb (128,0,0); "> style > span style=" color: rgb (128,0,0) "> head > body > v:image src =" image.png "/ > span style=" color: rgb (128,0,0); "> body > span style=" color: rgb (128,0,0); "> html >

Advantages: good performance and high speed

Disadvantages: complex to use, and does not support browsers such as firefox, it is necessary to judge that different browsers output different HTML code.

4. Download pictures from multiple domain names

Since each browser can only send fixed requests for the same domain name at the same time, for example, IE6 seems to be 2, you can open multiple domain names for image resources to make requests.

Like img1.abc.com,img2.abc.com. However, do not open too many domain names, because it takes time to resolve domain names and open new connections. If there are more domain names, it may be slower. Usually 2-4 domain names are enough.

Fifth, cache background images under IE6

Caching IE6 background images is a hassle, and many people know to use the following JS to get IE6 to cache background images

Try {document.execCommand ("BackgroundImageCache", false, true);} catch (e) {}

But the effect is not very good, when the mouse moves to change the background picture, IE6 always sends a picture request (although the background picture has been downloaded)

Although the return result is 304, it still takes a long time. In this case, you can use the following 1 workaround to handle the

Use a DIV element to load the image directly on the page, so that the loaded image can actually be cached and the mouse movement will not send the request.

6. Preload pictures

Use the following code to preload the picture of the next page after the page has been loaded. When you enter the next page, you no longer have to download the picture.

_ window.onload=function () {var img = new Image (); img.src = "images/image.png"; img = null;}; the above is how to understand the image analysis in WEB development. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.