Examples of working with front-end development to teach you to cut graphs

Let's talk about transduction this thing.

A: How to cut the picture?

1. Slices:

Let's start with a few basic concepts. Slicing: Graphics software or web authoring software, the image is cut into several parts, a piece of Night pass, This uploads faster. The slicing tool is mainly used to decompose large images into a few small images, this function is used in the Web page more, because the page is now illustrated, but also because of the time required to open a Web page is relatively long, in order not to let people browsing the page and so on too long, so they cut the picture into several small to compose.

Principle of Tangent chart:

A. First the whole, then the partial. That is, the module is divided into small slices of large slices.

A. From the size, if the background map is larger, then try to slice the background map, a slice control within 100KB.

C. From the color, try to put the same color of a piece, so that the picture can be smaller size;

The light is too abstract, just take my recent "Deer Ding Kee" page for example. (You can click on the "Deer Ding kee" link to see the actual effect);

The effect is this (intercept the upper part)

Such a large picture, must be cut. When the "first general, then local", that is, the large layout or module to determine down, and then to the specific module inside to subdivide. Like, I'm going to break this big picture into three parts.

2. Save:

Jpgorpng?

Save the time remember not to choose "Save", but choose "store the format required for the Web", and then go to set the picture parameters and format of the window, you can set the picture to save the "gif/png/jpg", format, many people advocate the PNG format is good, but pay attention to, If your color is very rich that kind of, that save as "JPG" format, the same picture only "PNG" format is a bit large, such as "1/4", and when you save a single picture background is transparent, choose "Save" on the line, is generally saved as "PNG" format.

Two: What should I do when I finish cutting?

In fact, many people have neglected, after cutting the picture can also use "Picture Optimization tool", now many image optimization tools can not affect the quality of the picture, the urgent to remove the relevant information attached to the picture, to reduce the volume of the picture. For example, here is the information about several pictures after cutting the graph.

When I'm done with smush.it optimization, it's

The graphical optimization tool that I use is: smush.it

Reprinted from: http://www.cnblogs.com/lanyueer/archive/2011/07/29/2117854.html

Examples of working with front-end development to teach you to cut graphs