Optimize Website Design (30th): optimize CSS Sprites

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see Best practices for speeding up your web site (http://developer.yahoo.com/performance/rules.html), they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects. In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

I will discuss 30th principles in this article: optimize CSS Sprites (optimizing CSS Sprites ).

CSS sprite (it is difficult to translate Chinese characters, so keep English) is a technology like this:

If multiple page elements require different images (for example, as the background), you can customize a CSS for each element, each CSS uses the background-image attribute to set different images. This can implement functions, but one problem may be that you may need to download multiple images. To improve this, CSS designers have considered a new approach: they can combine these images into a large image, and then not only set the background-image attribute in CSS, you can also set the background-position attribute to determine the image area to be displayed. In this way, both the same effect and the number of image downloads are reduced.

I have mentioned this technology in the article "optimizing Website Design (I): reducing the number of requests. However, please note that this technology may cause some extra work or trouble:

1. It is cumbersome to manually merge these images and measure the corresponding pixel position. However, some tools can be used to simplify the work.

• Http://spritegen.website-performance.org/
• Http://csssprites.com/

Additional maintenance work. If an image is modified, not only new images are generated, but many CSS modifications may be involved.

CSS Sprites can only be used in a fixed-size box to block unwanted parts.

Several optimization suggestions mentioned in this article are as follows:

1. Use a horizontal combination image as much as possible, which is usually smaller than a vertical combination image.
2. Try to make the image have a similar color, so that the final combination of images will be smaller.
3. Use smaller images as much as possible, and the gap between images is as small as possible. The goal is to make the final combination of images smaller in size.

[Note] As mentioned in the previous article, I am not very good at pictures, but it also has a benefit. I usually do not know what I do, we will not hesitate to follow the best practices and principles provided by professionals, such as the three suggestions mentioned above.