Link between images and speed in website design

A friend sent me a letter asking me two questions: why does our website use a lot of large images and the speed is still quite fast? He said that he never used a big image for shading. In addition, why is one of my images much larger than his work, and the file is actually smaller?

I often see on the Internet that some friends don't seem to care much about image compression, for example, using Photoshop to store JPEG format, I guess in most cases, the Save as or Save a copy as command is used directly. When the compression ratio is selected, the software provides only ten levels, and the compression effect cannot be seen immediately. In addition, if it is Photoshop4.0 or 5.01, it compresses JPEG, network applications are not ideal. Network image, which is larger than 1024x768. Because the current large display is 17-inch. More, it is about 600 or 700 points. At this time, the image will be blurred if it is compressed into JPEG format. As for the GIF format, the compression method mainly involves the selection of the color number and the color table. People who often use GIF may not have good control over it. The compression methods and effects of GIF images are often different in different software. You should pay attention to them. A netizen used an image on the home page, that is, 1/5 of the page, but the download speed on the home page was quite slow. I saved the image and saw that there were 85 K images. I saved it again, that is, around 24 K. I used Photoshop5.5 to store this image.

Photoshop5.5 has been released for a long time. However, when the Chinese version 5.01 is popular, many people do not care much about the English version 5.5. In fact, this is a big mistake, especially for all netizens. Because the biggest change in Photoshop5.5 is network support. Recently, Adobe has been greatly concerned about the internet. The emergence of Golive, the convenience of ImageStyler for webpage art, and the bundling of ImageReady2.0 and Photoshop5.5 can all illustrate the problem.

In version 5.5, whether it's Photoshop or ImageReady, when you output JPEG or GIF files, you get full control. ImageReady2.0 can easily create animated GIF images. For more information, see "Use ImageReady2.0 for animation". I will not introduce ImageReady2.0 here. Anyway, the two software have almost no interface difference.

As for Photoshop5.5, when you store a File, whether it is JPEG or GIF, we recommend that you use the Save for Web command in File. A new control panel will appear. The large area on the left is the preview effect of the image. Please select the Optimized display mode in the upper left corner. Then, the image you see is the effect of the current compression ratio, the following figure shows the file compression size and transmission time at different transmission rates. On the right is the compression control area. I have cut it down. Please take a closer look. It is not complicated. When outputting JPEG images, you can control the compression ratio from 1% to 100%. You can also choose between them and observe the compression effect. Blur is a Blur selection. When the image is too hard, that is to say, when the intensity is too high, you can add a little blur. It's hard to understand other items. Note that when you output a large image, do not select the Progressive check box. In this way, the image will be displayed part of the download process. If you select Progressive, you have to wait until all the images are downloaded.

For GIF, the situation is similar to JPEG. In this case, you control the number of colors instead of the compression ratio. The GIF compression of Photoshop5.5 is very clever. If your image uses only two colors and the size is large, a smooth curve is drawn on it. In this case, if JPEG is saved, the lines are easily blurred, and large-area equivalent color blocks are also colored. To avoid this problem, you must select the GIF format. Set the number of colors to 2 or 4. The two colors you set will be well preserved, and the file is small. You should be satisfied, and thank Adobe.

Of course, whether it is JPEG or GIF, the degree of image compression, in addition to your control factors, but also related to the specific situation of the image itself. The so-called compression means that the program records the same connection part of each line of pixels with a simple number, while JPEG adds a special algorithm on this basis. For example, if you draw a horizontal line, the compression program will record the color, length, and other content of the line, instead of record each pixel repeatedly. This is the basic principle of compression. Therefore, when the tone of an image changes greatly, even if only part of the entire image is occupied, the multi-tone areas must be recorded at 1.1 points during compression, the file will also be large. This must be taken into account when editing images.

Finally, let's talk about the website speed. My friend said that our website download speed is fast, which is possible, though not always. Our website was officially applied for and paid for it, which can be seen from the domain name. The selected service providers are also relatively new, advanced technologies, and advanced equipment, which undoubtedly play a major role. This is not possible for free sites. If you have great expectations and confidence in your website, advise you to find a solution to apply for a formal domain name. Of course, you should be careful when selecting a service provider.