Performance Optimization: Image Compression, Loading, and Format Selection

After optimizing the performance of multiple e-commerce and large-screen projects, I have found that the handling of image resources plays a pivotal role in website performance optimization.

For general e-commerce websites, among the 145 requests made during the first-screen loading, image resource requests account for more than 75%. Additionally, images also make up a large proportion of all static resource requests. This clearly demonstrates the importance of image optimization.

However, before delving into image optimization, let's first understand the relationship between binary bits and color representation.

Binary Bits and Colors

In computers, pixels are generally represented using binary numbers. The corresponding relationship between pixels and binary bits varies across different image formats. The more binary bits a pixel corresponds to, the richer the range of colors it can represent, the more exquisite the imaging effect, and accordingly, the larger the storage space required for the image.

Currently, there are many methods to optimize image resources in the market, such as image compression, selecting the correct format, CDN acceleration, lazy loading, and so on.

Image Compression

Image compression is presumably the first solution that comes to mind. Take TinyPNG (https://tinypng.com/), which we are quite familiar with—it works by "selectively" reducing the number of colors an image needs to store, thereby reducing the memory required for 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 take a look at the example below:

Detail Display:

Image Formats

Although image compression can reduce the bandwidth required for the resources we request to a certain extent, using the correct format often brings a qualitative improvement in performance.

JPEG / JPG

JPEG is the most commonly used image file format.

• Advantages
  • Supports an extremely high compression ratio, which can significantly speed up file transmission, downloading, and previewing.
  • Allows control of file size through an adjustable compression ratio.
  • Can easily handle 16 million colors, enabling excellent reproduction of full-color images.
• Disadvantages
  • The lossy compression of JPG makes it hard to spot flaws when used for carousel images and background images. However, when it is used to process vector graphics, logos, and other images with strong lines and high color contrast, the image blurriness caused by manual compression becomes quite obvious. Therefore, this format is not suitable for displaying high-definition images or those with strong lines.
  • Besides, JPG does not support the display of images that require transparency. If transparent images need to be displayed, an alternative solution must be sought.

• Business Scenarios
• JPG is suitable for presenting images with rich colors. In our daily development, JPG images are often used as large background images, carousel images, or preview images. When you open the homepage of an e-commerce website, you will find that almost all large images are processed using JPG.

PNG-8 and PNG-24

PNG is a bitmap format that uses a lossless compression algorithm.

• Advantages
  • Supports lossless compression.
  • Fully supports alpha transparency.
  • Can be saved repeatedly without reducing image quality.
• Disadvantages
  • Large file size.
• Business Scenarios
• Theoretically, when you pursue the best display effect (such as detailed display images, images that need to be zoomed in, photographic works, etc.) and do not care about storage size or required bandwidth, you can use PNG-24 . However, in practice, to avoid the problem of excessively large file sizes, we generally do not use PNG to process complex images. When we encounter scenarios suitable for PNG, we also prioritize the more compact PNG-8.
• Additionally, PNG is used when dealing with images that require transparency or have distinct lines, such as a website's main logo:

SVG

Strictly speaking, SVG is an open-standard vector graphics language.

• Advantages
  • Scalable, supporting infinite zooming.
  • Programmable.
• Disadvantages
  • Not all browsers support SVG; IE8 and earlier versions require a plug-in.
  • Complex images can reduce rendering speed (only suitable for small images).
• Business Scenarios
• SVG is a text file. We can define SVG just like writing code, embed it in HTML, and make it part of the DOM. A common use case is Iconfont . We can easily adapt the skin-changing function of icons by setting the fill attribute of the module and adjust their size via font-size.

Base64

A method for representing binary data using 64 printable characters.

• Advantages
  • Reduces network requests.
  • For dynamically generated images in real time, there is no need to store the images on the server, thus saving server resources.
• Disadvantages
  • Only suitable for small images.
  • If images need to be replaced frequently, the entire code needs to be modified, resulting in low maintainability.
• Business Scenarios
• Similar to CSS sprites, Base64 serves as a solution for small icons.

Base64 is an encoding method used to transmit 8-bit bytecode. By encoding an image into Base64, we can directly write the encoded result into HTML or CSS, thereby reducing the number of HTTP requests.

If you search for the keyword "base64" in the Elements panel, you will find that Base64 is widely used. Moreover, the memory occupied by the images it corresponds to is relatively small.

Since Base64 is so great, why not encode all images using Base64?

After Base64 encoding, the image size will expand to 4/3 of the original file . If we encode large images into HTML or CSS files, the size of the latter will increase significantly. Even if we reduce the number of HTTP requests, we cannot make up for the performance overhead caused by this huge size. In other words, the rendering performance we sacrifice is greater than the performance gain from reducing resource requests, so this approach is not worthwhile.

As we can see, most images encoded with Base64 are small images.

WebP

An image file format that provides both lossy compression and lossless compression (reversible compression).

• Advantages
  • Supports both lossy and lossless compression.
  • Small file size.
  • Supports transparency.
• Disadvantages
  • Poor compatibility.