Web page image making tips: best display of pictures in Web pages

Now the site a lot of use pictures, then these pictures how to optimize it? Here the Web page teaching network lists 15 optimization principles to share with you.

1 at the beginning of the website design, the first to do a good job planning, such as how to use the background picture and so on, do know.

2 when editing a picture, make a cut to show the necessary, important, content-related parts.

3 in the output picture, the picture size should be set properly, the long width pixel is set to the size you need, and do not output large pictures, and then use, in the specified small long width, zoom picture.

4) As far as possible combination of decorative pictures to save the number of HTTP requests, in the specific use of CSS sprite way.

5 The border on the page, the background, as far as possible using CSS to show, rather than using pictures.

6 picture use, can use in PNG format as far as possible, in order to replace the past used GIF and JPEG format. In the case of quality assurance, use the smallest file.

7 explicitly specify the size of the picture in HTML.

8 If you use Photoshop, zooming the picture will usually blur the image and use smart sharpen to make the picture better.

9 Minimize the number of color digits for GIF and PNG file formats.

10 for GIF and PNG files, minimize dithering to make files smaller.

11 If the picture to add text, if possible, do not embed text into the picture, but the use of transparent background pictures, or CSS positioning so that text coverage in the picture, both to achieve the same effect, but also to the picture to a greater degree of compression.

12 in smaller GIF and PNG pictures, you can use lossy compression.

13 if possible, use local compression to ensure a clear prospect based on a larger degree of compression background.

14 picture in the optimization, if you can reduce noise, you can get an additional 20% more compression.

JPG pictures can also blur the background, and then compress the time, you can compress more.

Above is the principle that tells you 15 picture optimization.