CSS Sprites, use or not?

Source: Internet
Author: User

I read an article on the front-end observation (http://www.qianduan.net/to-sprite-or-not-to-sprite.html), I am here a small induction.
First, we will introduce CSS spirits. The basic principle of CSS Sprite is to integrate some images used on your website into a single image, thus reducing the number of HTTP requests for your website. This image is rendered using the CSS background and background-position attributes (it is worth mentioning that this means that your tag becomes more complicated and the image is defined in CSS, rather than the label ).
The benefit of CSS spirits is to increase the page loading speed.
However, if we do not process the image, it will be counterproductive. At present, many browsers have the full page scaling function, so the browser needs to do some extra work to correct the behavior of these image edges-basically, to avoid image exposure in Sprite ". In addition, if the integrated images have a large area of white space or are integrated with images of different heights, it will only cause the burden on the browser and cause a waste of memory. The following are some shortcomings of CSS sprite mentioned in this article: Images called by CSS sprite cannot be printed unless the print statement is added to @ media -- by richb; if you want to modify an image in Sprite, You need to modify the entire image, which will undoubtedly increase the workload-by Tom B.
I personally thinkIt is quite effective to integrate images of similar sizes, such as small icons in the navigation bar. CSS spirits is useful as long as it is handled properly.
In addition, in the message of this article, we also raised the following question: cannot repeat and no-repeat images be put together? The answer is that it is normal to put no-repeat and repeat-X together. However, you must be careful when placing the repeat-X and repeat-y images together.

I will post another article about CSS spirits, CSS Sprites: shark fin or three deer. The author advocates that CSS should not be abused!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.