This article was first published on the front-end team blog of Zhengcai Cloud: Performance Optimization – Image Compression, Loading and Format Selection
I believe everyone has heard of the “258 Principles (https://blog.csdn.net/weixin_42139375/article/details/83001248”, the performance of a website will greatly affect the user’s experience.
After I experienced many e-commerce and large-screen projects to optimize performance, I found that the processing of image resources plays a pivotal role in website performance optimization.
General e-commerce websites request data
Among the 145 requests loaded on the home screen, image resource requests accounted for more than 75%, and pictures also accounted for a large proportion of all requests for static resources. The importance of visible image optimization.
However, before we understand image optimization, let’s first understand the relationship between binary digits and color rendering.
In computers, binary numbers are generally used to represent pixels. The correspondence between pixels and binary bits is different in different picture formats. The more binary bits a pixel corresponds to, the richer the variety of colors it can represent, the more exquisite the imaging effect, and the larger the storage space required for the picture.
There are many ways to optimize image resources on the market, such as compressing images, choosing the correct format, CDN acceleration, lazy loading, etc.
Compressing pictures is believed to be the first solution that everyone thinks of. Like the tinpng (https://tinypng.com/) we are more familiar with, his principle is to reduce the memory to be stored by the image by “selectively” reducing the number of colors to be stored in the image.
When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images.
Let’s look at the following example:
Details:
Although compressing images can reduce the bandwidth required by the resources we request to a certain extent, if the correct format is used, there will often be qualitative changes in performance.
JPEG is the most commonly used image file format.
Supports extremely high compression ratios, which greatly accelerates file transfer, download, and preview.
The variable compression ratio allows you to control the file size.
With 16 million colors easily processed, full-color images are well reproduced.
JPG’s lossy compression is really hard to see in the display of carousel and background images, but when it deals with images with strong lines and strong color contrasts such as vector graphics and logos, the image blur caused by artificial compression will be quite obvious. Therefore, this format is not suitable for displaying high-definition and linear-strong images.
In addition, JPG does not support the display of images with transparency requirements, if you need to display transparent pictures or need to find another way.
JPG is suitable for rendering colorful images, and in our daily development, JPG images often appear as large backgrounds, carousels, or preview images. Open the home page of an e-commerce website and see that the processing of large images is almost always using JPG.
png is a bitmap format that uses lossless compression algorithms.
Too large
Theoretically, you can use PNG-24 (https://baike.baidu.com/item/PNG/174154?fr=aladdin) when you are looking for the best display (detailed displays, images with enlarged needs, photographic works, etc.) and don’t care about the size of the storage or the bandwidth required. However, in practice, in order to avoid the problem of excessive file size, we generally do not use PNG to process more complex images. When we encounter a scene suitable for PNG, we will also prefer the smaller PNG-8.
PNG may also be used when you need to work with images with transparency or obvious lines. Such as the website owner logo:
Strictly speaking, it should be an open standard vector graphics language.
Not all browsers support SVG, and IE8 and earlier versions require a plugin.
Complex images can slow down rendering (only small images are supported).
SVG is a text file, and we can define SVG like code, write it in HTML, and become part of the DOM. One of the more used is iconfont (https://www.iconfont.cn/). We can easily adapt the skinning function of the icon by setting the fill property of the module and adjust its size via font-size.
A method of representing binary data based on 64 printable characters.
Base64, like Sprite, exists as a solution for small icons.
Base64 is an encoding method for transmitting 8Bit bytecode, and by Base64 encoding images, we can write the encoding results directly to HTML or to CSS, thereby reducing the number of HTTP requests.
Search for the keyword “base64” in Elements and you’ll find that Base64 is also used in many ways. And its corresponding image occupies less memory.
Since Base64 is so good, let’s use Base64 for all the pictures.
After Base64 encoding, the image size expands to 4/3 of the original file (Base64 encoding principle (https://blog.csdn.net/wo541075754/article/details/81734770)). If we encode large images into HTML or CSS files, the volume of the latter will increase significantly, and even if we reduce HTTP requests, we will not be able to compensate for the performance overhead of this huge size. That is to say, the rendering performance we sacrifice is greater than the resource request performance, which is not worth it.
As we can see, most of the Base64-encoded images are small images.
A picture file format that provides both lossy and lossless compression (reversible compression).
Support lossless and lossless
Small footprint
Transparency can be supported
Same as JPEG/JPG. Because the current compatibility is not good, it is generally used with JPEG/JPG.
Mind maps for everyone:
Our original way was to put resources such as pictures into the project and package them for the live.
The disadvantage of this is that the packaged package is large, and the speed at which users can request resources is limited. For example, if our server is in South China, user requests in North China will be slightly slower. When encountering a large amount of concurrency, requesting interfaces and resources from the deployment server provides unnecessary pressure on our server. When we temporarily want to replace an image, we also need to repackage and publish it online, which is very troublesome.
When we placed the image on OSS and CDN accelerated, this problem was solved very well. Users in different regions can access the nearest server, and duplicate requests will also generate caching to avoid wasting OSS traffic.
“The Difference Between OSS and CDNs” (https://www.cnblogs.com/jsfh/p/14076992.html) You can also refer to this article for a closer look.
I believe that everyone will encounter the situation that the first screen data is too much and loads slowly. In this case we need to consider lazy loading. When the user scrolls to the preview position, a request for picture data is made. Replace it with a skeleton screen or thumbnail.
Performance optimization is a hard skill that we front-end development engineers must master. Unlike learning other new technologies, when you want to learn a new set of frameworks, reading the documentation and source code can almost make you comfortable using it. But performance optimization is different, it can only let us explore to understand and break through, it is an experience and a habit and a sense of smell.
Best Practice: Use Alibaba Cloud CDN to Accelerate OSS Access (https://developer.aliyun.com/article/770616?utm_content=g_1000173381)
Nuggets Booklet: Principles and Practices of Front-End Performance Optimization (https://juejin.cn/book/6844733750048210957)
Wallpaper sites: wellhaven (https://wallhaven.cc/)
If you find this article inspiring to you, I would like to invite you to help me with two small things
1. Click “Watching” so that more people can see this content (click “Watching”, bug -1 😊 )
ZooTeam, a young passionate and creative front-end team, is affiliated to the product research and development department of Zhengcaiyun, and the base is in picturesque Hangzhou. The team has more than 60 front-end partners, with an average age of 27 years old, nearly 30% of them are full-stack engineers, and the proper Youth Storm Regiment. The composition of members includes “veterans” from Ali and NetEase, as well as fresh graduates from Zhejiang University, China University of Science and Technology, Hangzhou Electric Power and other schools. In addition to daily business docking, the team also conducts technical exploration and practical combat in the direction of material system, engineering platform, construction platform, performance experience, cloud application, data analysis and visualization, etc., promotes and implements a series of internal technical products, and continues to explore the new boundaries of the front-end technology system.
If you want to change what has been tossed around, I hope to start tossing things; If you want to change the constant admonition you need to think more, but you can’t break the game; If you want to change what you have the ability to do and do that result, but you don’t need it; If you want to change what you want to do, you need a team to support, but there is no place for you to lead people; If you want to change the established rhythm, it will be “5 years working and 3 years work experience”; If you want to change the original understanding is good, but there is always that layer of window paper blurring… If you believe in the power of belief, believe that ordinary people can achieve extraordinary things, and believe that you can meet a better version of yourself. If you want to participate in the process of taking off as your business takes off, personally promoting the growth of a front-end team with in-depth business understanding, perfect technical system, technology creates value, and influence spillover, I think we should talk. Any time, wait for you to write something, send it to ZooTeam@cai-inc.com