css sprite css sprite generation tool_html/css_WEB-ITnose

What is css sprite

CSS sprite is called css sprite by many people in China. It is a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. .

Why use this tool

1. Speed ​​up web page loading

The number of simultaneous requests accepted by the browser is 10. If there are too many pictures, it will affect the overall visual effect, and for unstable The network bandwidth is even more of a nightmare to load, so the images are spliced ​​into one large image to speed up the loading speed and page rendering

2. Post-maintenance is simple

This tool can be directly selected by Pictures are used for splicing pictures. Of course, you can also move the pictures inside, lay out your sprite pictures yourself, and directly generate the code. It is simple and easy to use

3. Open source

This program is already available in Open source on github, address: https://github.com/iwangx/sprite

csdn download address

http://download.csdn.net/detail/wx247919365/8641795

Baidu cloud disk download

http://pan.baidu.com/s/1hqJ6aC8

How to use

1. Use ps or dw to cut out the required pictures

2. Open CssSprite .exe

Open the CssSprite.exe file, I will put the download address below

3. Open the image

Click the button in the upper left corner to open the image

Select multiple pictures and click the open button

4. Arrange the pictures

You can choose the default arrangement of the top button today horizontally and vertically , you can also select the dragging position of the image with the mouse. After the drag is completed, the program will generate a sprite image with the smallest area according to the position of the internal image. Of course, it will also change the corresponding image position

5. Code generation

You can generate sass code and css code in the program. You can choose according to your needs. When you select "Whether it is a mobile version", all sizes will be divided by 2, because the design drawings of the mobile version are often larger. Therefore, to zoom, it is recommended to copy the generated code after generating the image

6. Save the sprite image

Click the "Generate Sprite Image" button, and the program will select you to open it in step 3 by default. The address of the image, and then click OK to generate the sprite image.