Write in front:
Sprite map is also a small skill that the front end siege lion must master in web page making. Sprite is CSS Sprite, also called CSS Sprite, is a KIND of CSS image merging technology, the method is to merge small ICONS and background images into a picture, and then use the BACKGROUND positioning of CSS to display the required picture part. The main content of this paper includes how to make Sprite image, advantages and disadvantages of Sprite image, which scenes need to use Sprite image.
Implementation principle:
The basic principle of CSS Sprite is to reduce the number of HTTP requests for your site by combining images used on your site into a single image. The image is rendered using CSS background and background-position attributes, which means that your tags are more complex and the image is defined in CSS instead of the IMG tag.
1. Preparation download tool: CSS sprit
Long like this:
See the picture to know how easy to use!
The file is less than 200K, quite light, this is baidu cloud link: pan.baidu.com/s/1nuOZDqT
Also has a MAC version, this is the link: dl.pconline.com.cn/download/42…
2. Usage
Download it, open it. 1. First of all, we need to cut some pictures. If we can’t cut them, we can move to: “Front-end PS cutting method, Graphic details”.
2. Open the Sprite image and select the image.
3. After adding the image, the code will be generated automatically, which needs to arrange the image:
As you can see, the following code refreshes as the images are arranged
Note: when arranging pictures, leave some space between them, otherwise they will cover each other when used.
3. Save the image and Sprite image CSS code
Save the Sprite image
Sprite image generated:
GIF operation:
How to use it in HTML?
Mooc Sprite:
www.imooc.com/code/1511.
www.imooc.com/learn/93
3. Advantages and disadvantages of Sprite
1. Speed up web page loading
For every image on a web page, a request is made to the browser to download the image, and the browser accepts 10 simultaneous requests and can process two at a time.
HTTP requests are initiated with three handshakes, each of which is preceded by a handshake. So reducing the number of HTTP requests is quite important in web page performance optimization! (ORIGINALLY wanted to write a little more, but some knowledge points are not too clear, afraid of misleading people’s children will not repeat.)
When a web page has hundreds or thousands of images it loads like hell! It is also a nightmare to load with unstable network bandwidth, so splice images into one large image to speed up loading and page rendering
2. Simple maintenance
This tool can be used to select images directly for image stitching, of course, you can also move the images inside, layout your Sprite image by yourself, when changing the image, just change the position of the image. Direct generation of code, easy to use
3, CSS Sprites can reduce the image of the byte, has been compared for many times 3 images merged into a picture of the byte is always less than the sum of the three pictures of the byte.
4, to solve the problem of web designers in the picture naming, just a collection of pictures can be named, do not need to name every small element, so as to improve the efficiency of web production.
5, the change of style is convenient, only need to modify the color or style of the picture on one or less pictures, the style of the whole web page can be changed. It’s easier to maintain.
Disadvantages of Sprite:Don’t abuse Sprite
It says a lot, it can be decided according to the use of the scene, you can have a look, after all, I am to teach Sprite picture… Here’s a demo of Sprite.
I have written two related articles before: 1. Front-end PS cutting method, graphic details 2. Ps cutting practical tips, the difference of picture format and related content
Above, April 10, 2017.
Finally, it came to the audience’s favorite part of asking for praise and attention: I hope the friends who finished reading can click like, but also pay attention to me. At present, there are no less than 15 articles in this stage every month (I will share the dry goods when I see them). Code word is not easy, thank you for your support, thank you! Ps: Currently unemployed, coordinate Beijing, looking for a job recommendation. Then hope I write which aspects of the article can be under the comments, or private letter to me, although write bad, but I when this is a way to record their growth. (If I know how to do it, but if I don’t, I’ll write it down for later.) ** Nuggets homepage, Jane book homepage link, CSDN blog homepage link, Github.