How Seo reduces the size of web pages

This article introduces the basic knowledge of optimizing images.
Generally, the search engine only cares about the HTML size of the webpage, while the user is concerned about the overall size of the webpage, because it is related to the open speed of the webpage. As mentioned in the previous article, if your webpage cannot be displayed in front of the user within 8 seconds, the user may experience a sense of delay, and may close the window or tag and discard your webpage. Some browsers can display the page opening time in the status bar, such as TT. After installing the yslow plug-in Firefox, you can see the specific page opening time, accurate to 0.001 s! If you are interested, download and try it. Now, let's start by introducing the common image formats on the web page!

I. common image formats
Common image formats that can be displayed on webpages include GIF, JPG, JPEG, PNG, and BMP.

1. GIF: Graphic Interchange Format
GIF images store a single image data or multiple image data (GIF animation) in 8-bit or 256-Color Colors. GIF images are in lossless compression format and support for transparency, compression, crossover, and animation. The common QQ animated expression is GIF. GIF format is suitable for storing images with less colors, such as logo, which can achieve the best optimization effect and perfectly present your images with the smallest image size.

2. jpg or JPEG: Joint photography expert group
Jpg or JPEG images store a single grating image in 24-bit color. They are platform-independent generic image formats and support the highest level of compression, but such compression is lossy. Generally, landscape photos and character photos are suitable to be saved in JPG format. when optimizing JPG images, you can make a trade-off between the image effect and the image size, we strive to minimize the image volume while ensuring the image effect.

3. PNG: Portable Network Graphics
PNG images store a single grating image in any color depth. PNG is called a portable network image because the format is not related to the platform and can be normally displayed on Windows, Linux, and other platforms. PNG images are similar to gif images. They support transparent backgrounds and are staggered, but provide a small amount of compression. Compared with GIF and jpg images, PNG images have a large volume in the same effect, some old browsers do not know the PNG transparent background, but PNG is supported by the latest web browser and is one of the most promising image formats.

4. BMP: Windows bitmap
Windows bitmap can use any color (from black to white to 24-bit color) to store a single grating image. Windows images are compatible with other Microsoft programs. They do not support File compression, which may result in a very large file volume and are generally not applicable to web pages. However, some web designers or editors do not notice this and still use the BMP image format to publish their images on the website. Therefore, BMP images have become common image formats on webpages, however, I declare that the BMP image file is not applicable to webpages. If conditions permit, compress as much data as possible.

Ii. Image Format Selection
Here we will analyze the use cases:

Analysis 1: Selection of logo image formats on this site:
This site logo image effect (GIF format ):

 
Http://www.hbsem.cn logo

The logo image color structure is very simple: there are only two colors, which belong to a few colors. If JPG format is used:

 
Http://www.hbsem.cn logo-JPG

When the image width and height remain unchanged, select 80% quality, the image size is 7 kb (you can right-click an image to view its attributes, including the image name, type, address, size, and dimension ), if you carefully compare the two images, you can see that the JPG format is slightly inferior to the GIF format above. Therefore, it is very appropriate to select the GIF format for images with less colors. Commonly used pictures with fewer colors include hand painting and engineering drawings.

Analysis 2: select the character image format
Here, we will analyze how to select the character image format: compare the effects of different JPG, GIF, and PNG formats when the size of the image is limited.

Baidu searches for "beauty". The following figure shows the beauty of the photo, so you cannot take the photo of the beauty to experiment!

In JPG format, 26 KB

 
Beauty JPG 26 K

In GIF format, 26 KB

 
Beauty GIF 26 K

PNG format, 26 K

 
Beauty PNG 26 K

Have you thought about it? JPG format is ideal for landscape photos and character photos.

3. Notes for inserting images to webpages
1. Use real thumbnails
This is a common mistake of many websites! I found this problem on almost all customer websites I have served. It looks like a small image. When you look at its image files, you will find a small thumbnail and hide a huge secret-a clear source image, some of which are even photos copied directly from a digital camera, the volume can reach several megabytes. If there are ten or eight such thumbnails on the webpage, I think it may take thunder to download them.
To reduce the size of a webpage, you need to use the thumbnail to use the real image. It is very important to use the image processing software to reduce the size of the image! This is an issue that you must pay attention.

2. Use of the image staggered Function
Image interleaved means loading part of the image content before loading the webpage, so that you can see a poor effect first, however, after the image is fully loaded, the image will be perfectly displayed. The use of the image staggered function can increase the webpage loading speed. For large images, do not want to compress too much to avoid affecting the effect. You can use the staggered function to ensure the effect without affecting the speed. Currently, the main supported formats include GIF images and PNG images.

Summary: This article describes common image formats, methods for selecting image formats, and precautions for inserting images to webpages, I believe you have an eye on how to optimize images to reduce the size of webpages. The next step is to practice more. We recommend using fireworks for webpage image optimization. Whether Baidu understands Chinese better is still to be verified. However, fireworks does understand webpages better (my personal experience ), however, Photoshop is very good and powerful after all. If you do not have high requirements for optimization, you can use Photoshop to optimize it.