Table of contents
6. Use OSS service compression
There are also many areas that can be improved in the performance optimization of pictures in the front-end project, so what are the performance optimization points?
Optimization direction
- Reduce the number of requests
- shorten response time
- Reduce the size of the requested image
Optimization method
1. Domain name convergence
Because the browser has a limit on the number of concurrent requests for the same domain name, especially on the PC web page, there are many display contents. In order to break through the limit, static resources are requested using sub-domain names. For example, the static pictures of Jingdong Mall use the sub-domain name of m. domain name
2. Use CDN nodes
Use CDN to accelerate image resources, access the server closest to you, and improve access speed
3. Set the cache
We can set Cache-Control on the picture message header, and max-age is the expiration time
Cache-Control: max-age=31536000For example, static pictures of Jingdong Mall are set to allow caching, and the cache time is 31536000. When users visit the mall for the second time, they do not need to make another request to the server, and directly read the pictures from the memory cache.
4. Image lazy loading
Control the number of resource requests and limit the limited number of resource requests to the user's visible area
5. User image upload limit
Prevent users from uploading too large pictures. In a real project, I once encountered a user uploading a picture with several MB, or even more than ten MB, and came back to ask why the picture could not be loaded in time....
6. Use OSS service compression
If the picture static resource is placed in Alibaba Cloud OSS storage, we can also use the picture advanced compression file . For example, convert the original image in JPEG format to HEIF format, and compress the image resource size as much as possible without affecting image distortion.
7. Scale with OSS
When a picture is uploaded, we may use it in multiple places, such as the main picture of the product, the picture of the product list, and the thumbnail of the product. At this time, we can use the image zoom function of Alibaba Cloud OSS, which varies according to different places. proportional picture
How to Proportionally Scale Old Version Images_Object Storage OSS-Alibaba Cloud Help Center
8. Synthetic sprite map
Because the icons and small pictures used in the project are not large in size, we can combine them into sprite pictures to reduce http requests
For example: several arrow icons of different colors in Jingdong Mall
https://misc.360buyimg.com/mtd/pc/index_2019/1.0.1/assets/sprite/tit_arrow/sprite.png
Different label icons:
https://misc.360buyimg.com/mtd/pc/index_2019/1.0.1/assets/sprite/content_btn/sprite.png
9. Use svg images
Sometimes the icon used in the project is too small, the resolution is very low, and it may even look blurry under the high-resolution screen of the mobile terminal. Generally, you may use double images, but there is another way to use svg images. It can be zoomed in and out without distortion, the svg file is smaller and more compressible