Images are one of the most basic types of content available on the Web, and a picture is worth a thousand words. But if you’re not careful, the image size can be tens of megabytes. And the more images there are, the more requests there are, the greater the likelihood of delays. Images are the largest portion of a site’s load resources (see below) :

One. When there are too many pictures

Solution 1: Separate image services from application services (from an architect’s perspective)

For the server, the picture is always the most consumption of system resources, if the picture service and application service on the same server, the application server is easy to crash because of the high I/O load of pictures, so when there is a large number of picture read and write operations, it is recommended to use the picture server. In addition, the browser has a limit on the number of concurrent requests to resources under the same domain name at the same time. Generally, the number of requests exceeding the limit will be blocked. The maximum number of concurrent connections to HTTP1.1 and HTTP 1.0 in some major browsers. Separate the image server from the application server, the image server uses a separate domain name, CSS, JS and images can be concurrent requests.

Scheme 2: Simple and crude compression scheme

… we can use some third-party software to compress, such as Tinypng.com/, the resolution remains the same after compression, meat…

Scheme three: lazy loading of pictures

There are a lot of pictures on the page of APP like Taobao or JINGdong. When we slide to the next screen, the picture from the next screen will be loaded, which adopts the image lazy loading method. Lazy image loading, simply speaking, in the page rendering process, images are not loaded all at once, they are loaded when necessary, for example, when the scroll bar reaches a certain position, the event is triggered to load the image, as shown in the following code

Scheme four: CSS Sprites

··· When a website or APP has a large number of small ICONS, if uploaded to a picture server such as CDN, it will increase a large number of requests to load all these small ICONS, while CDN charges by traffic, which will undoubtedly increase a lot of costs. CSS Sprites technology is not new, it is to combine these small ICONS into a picture, only need to load once, each time through background-position control display icon, so as to save a lot of requests, save cost. This scheme combines some small logos on the website into a large picture. However, it also has certain disadvantages: in the long-term development of multi-person cooperation projects, it will be difficult to maintain these sprites. Every time you modify the icon, you have to change the value of background-position in CSS accordingly, which is quite tedious.

Plan 5: Compress the image into Base64 format to save requests

Compress images into Base64 and download them to the browser with HTML or CSS without requiring additional requests, thus saving requests. We know that the image is streamed in transit, and if you convert the image to Base64, it actually gets bigger and the browser is decode Base64-encoded images can take a lot of time, so if we choose this solution, it is best to choose a small image, otherwise it is not worth the loss, in webpack can set the maximum number of bytes of images compressed into Base64 against decode Base64 encoded images are slow, we can choose to use canvas to speed up. When a drawing command is issued to the canvas, the browser sends the command directly to the graphics accelerator without any further intervention from the developer, while the hardware graphics accelerator draws and renders graphics in real time at an unexecutable speed. Therefore, we can use Canvas to render base64 encoded images.

Plan 6: Choose the picture format

Selecting the image format is the first step in optimization. Png and JPG, JPEG. JPG: a standard method of distortion compression used. After uploading and downloading a picture for many times, the picture will gradually become distorted. PNG: the PNG format is used to compress data losslessly.

For our project, the results of the survey: for vector images, no overlapping images, gradients and other ICONS of some vector images on iconFONT. For small images that do not support uploading, such as gradient overlay images, the UI needs to cooperate with Sprite images, or change all PNG images into JPG formats. For large maps, use some third-party software to compress, such asTinypng.com/, unchanged resolution after compression, meat…