PC page optimization practice — picture resource optimization

The first page optimization strategy is to reduce the number of requests. In our actual development, it is not the code files that consume a lot of network transmission resources, but the images. If you optimize the images, you can see the obvious results immediately. So the focus of this article is to optimize the image resources

Optimize the image resources

  • Use the correct image size, we still strongly recommend using 1x image on PC, for example, if you need 100 * 100 image, don’t use 2x image 200 * 200 which we usually use on mobile. This is because the compressed size ratio of 1x and 2x plots is usually about 1:4. When the quantity reaches a certain level, there will be a significant difference in the loading time between the two.

    type The size of the Transmission time
    1 times the figure 300KB 200ms
    Figure 2 times 1.2 M 2S

    So, when you need to use large images, have a lot of large images on the server, try to fix the image size.

  • Use CSS Sprite when necessary. When there are many small ICONS on the page, such as the company logo of a partner, the logo of some solutions, etc., it is recommended to use Sprite to put these small ICONS together into a large image. Here is a recommended tool for automatically generating Sprite images: CSS Sprite.

    Sprite graph can effectively reduce the number of HTTP requests.

Sprite images are used in responsive pages

Since most modern pages are responsive pages, Sprite images work by using different background-position values in a large image. Without some special processing, our images are likely to be wrong.

I’ll leave it to Background to sort things out.

In traditional pages, large images are fixed in size, and each small image is fixed in position within the larger image, so we can use px units for positioning

// Public class for each small image
.img {
    width: 48px; 
    height: 48px;
    display: inline-block;
}

// small picture 1
.one-img {
    background: url('css_sprites.png') - 10px - 10px;
}

// small picture 2
.two-img {
    background: url('css_sprites.png') - 10px - 68.px;
}

Copy the code

In reactive pages, where I’m using a plugin to convert PX to REM, this is a problem. Why? Since the large image is now fixed in size (using PX to calculate the size), but the position of each small image in the large image is not fixed (using REM to calculate the position), we now need to add something to the.img public class. The size of the large image is also left unfixed (that is, rem is used to describe the size of the large image).

// Public class for each small image
.img {
   width: 48px; 
   height: 48px;
   display: inline-block;
   background-size: 68px 600px ! important;// Defines the size of the large image, and all are converted to REM

}

// small picture 1
.one-img {
   background: url('css_sprites.png') - 10px - 10px;
}

// small picture 2
.two-img {
   background: url('css_sprites.png') - 10px - 68.px;
}

Copy the code

End

This is just a small step in page optimization, and we will continue to explore… (unfinished ing