The correct way to open image compression

Images usually take up most of the page size, and most of the visual space. As a result, optimizing images typically results in significant byte savings and performance gains: the fewer bytes the browser downloads, the less the client scramps for bandwidth, and the faster the browser downloads and loads content to the screen.

Image optimization is both an art and a science: it’s an art because there’s no clear answer on how best to compress individual images; It’s a science because there are a number of proven techniques and algorithms that can dramatically reduce the size of images. Setting the best configuration for an image requires careful analysis of multiple dimensions: the power of the format, what is encoded, quality, pixel dimensions, and so on.

Optimized vector graph

All modern browsers support SVG, which is an XML-based two-dimensional image format. You can embed SVG tags directly on the page, or you can import them as external resources. Most vector-based drawing software can create SVG files, and you can even edit them directly in the editor.

      
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
 <g>  <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>  </g> </g> </svg> Copy the code

The example above renders the following simple circle with a black outline and a red background.

As you can see, it contains a lot of metadata, such as layer information, annotations, and XML namespaces that are not required in the browser. You can use tools like SVGO to compress SVG files.

SVGO reduces the size of the SVG file mentioned above by 58%, from 470 bytes to 199 bytes.

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="# 000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Copy the code

Because SVG is an XML-based format, you can also apply GZIP compression to reduce the transfer size. But you need to configure compression on the server first.

A raster image is just a two-dimensional grid of individual “pixels”, for example, a 100×100 pixel image is a 10,000-pixel sequence. Each pixel stores “RGBA” values :(R) red band, (G) green band, (B) blue band, and (A) alpha transparent band.

Inside the browser, 256 values are configured for each band, and each band takes up 8 bits (2 ^ 8 = 256), so each pixel takes up 4 bytes (4 band x 8 bit = 32 bit = 4 bytes). Therefore, if we know the size of the raster picture, we can easily calculate the file size

• A 100×100 pixel image is made up of 10,000 pixels
• 10,000 pixels x 4 bytes = 40,000 bytes
• 40,000 bytes / 1024 = 39 KB

(If you can’t understand the calculation, you can see the end of the article for detailed examples.)

❝

Incidentally, when the image is decoded by the browser, each pixel always takes up 4 bytes of memory, regardless of the format of the image being transferred. This can cause performance problems for large images and devices without a lot of available memory, such as low-end mobile devices.

❞

For a 100×100 pixel image, 39KB seems fine. But as the size goes up, the file size ballooned, making downloadable performance expensive.

This article has so far focused only on “uncompressed” image formats. Thankfully, there are a few things we can do to optimize the image file size.

A simple strategy is to reduce the “bit depth” of the image: down to 8 bits per band. Each band accounted for 8 bits giving each band 256 values and 16,777,216 (256 ^ 3) colors. What happens if we change the colors to 256? RGB that used to take up 8 bits now takes up only 7 bits, saving 2 bytes per pixel (see the formula above). That’s 50% less than the original 4 bytes per pixel!

Complex scenes with gradient colors (for example, gradient or sky) require more color to avoid distortion, such as the pixelated sky in the third image above. On the other hand, if the image uses only a few colors, then too many colors will just waste valuable file volume.

Then you’ll find that once you optimize the data for one pixel, you can also subtly query nearby pixels: in fact, many images, especially photos, have many pixels with similar colors — the sky, repeating textures, etc. Using this information, the compressor can apply incremental encoding. Instead of storing the value of each pixel, we store the difference with nearby pixels: if the neighboring pixels are the same, set to “zero” and only cost 1 bit!

Of course, we can’t stop here.

The human eye has different degrees of sensitivity to different colors: you can achieve this by optimizing your color coding by reducing or increasing the depth of color bits. The “nearby” pixels form a two-dimensional grid. This means that each pixel has multiple neighbors: you can use this feature to further improve incremental coding. Instead of looking at adjacent pixels of each pixel, we can look at a larger block of elements and encode different blocks of elements with different Settings.

We can see that the optimization of graphics is becoming increasingly complex (or interesting, depending on your point of view), and it’s a very active area of academic and business research. Images take up a lot of bytes, so developing better image compression techniques is of great value. If you want to learn more, visit the Wikipedia Page or see the WebP compression technology whitepaper for a practical example.

So with all this cool, academic stuff, how does it help us optimize the images on the site? It’s important to understand the crux of the matter :RGBA pixels, bit depth, and various optimization techniques. It is important to understand and keep all of these concepts in mind before starting to discuss the various raster image formats.

Lossless and lossy image compression

For compression of certain data types, such as page source code and executables, it is critical that the compressor does not change or lose any of the original information. A true or false piece of data can completely change the content and meaning of the file. For some other types of data, such as images, audio, and video, it is perfectly acceptable to compress and deliver an “approximate” representation of the original data.

In fact, because of how our eyes work, we can often discard some of the information per pixel to reduce the file size of the image — for example: Our eyes have different sensitivity to different colors, which means we can encode some colors with fewer bits. Thus, a typical image optimization process consists of two high-level steps:

1. The image is processed through a lossy filter that removes some pixel data.
2. Images are processed through lossless filters that compress pixel data.

The first step is optional and will depend on the particular image format, but the most important thing is to understand that any image can be compressed lossy to reduce its size. In fact, the difference between the various image formats (such as GIF, PNG, JPEG, and others) is the combination of specific algorithms they use (or omit) when applying lossy and lossless compression.

So what is the “optimal” configuration for lossy and lossless optimization? The answer depends on the image content and your own standards, such as optimizing the trade-offs between file size and distortion through lossy compression: in some cases, you may want to skip lossy compression and deliver complex details in full fidelity. That’s why there’s no universal standard, and that’s where your judgment comes in.

As a hands-on example, when using lossy formats such as JPEG, compressors often expose a customizable “quality” setting (for example, the quality option provided by the “Save for Web” feature in Adobe Photoshop) that is usually a number between 1 and 100, It controls a specific set of lossy and lossless algorithms. Experiment with a variety of image qualities for best results, and don’t be afraid to lower the quality – the visual won’t degrade much in general, but the file size can decrease a lot.

❝

Note that the quality levels of the different image formats cannot be directly compared because of the different algorithms used to encode the images: a high-quality JPEG with a value of 90 will yield completely different results from a WebP format with the same value. In fact, even for the same image format, different quality levels may produce significantly different outputs depending on the implementation algorithm of the compressor.

❞

Image optimization list

There are a few tricks and tricks to keep in mind when optimizing your images

• Vector formats are preferred: Vector images are independent in resolution and size, making them ideal for multi-device and high resolution situations.
• Shrink and compress SVG resources:
  • XML tags generated by most drawing applications typically contain deletable and unnecessary metadata;
  • Make sure your server has GZIP compression set up for SVG resources
• Prefer WebP over Raster images: WebP images are usually much smaller than older ones
• Choose the best raster image format: Determine your functional requirements and choose the format that suits them.
• Experiment with the best quality of raster images: don’t be afraid to drop the quality, the results are usually pretty good, and the size savings are significant
• Remove unnecessary image metadata: Many raster images contain unnecessary metadata about resources, such as geographic information, camera information, and so on. Use appropriate tools to remove this data.
• Provide a scaled image: Resize the image and make sure the “display” size is as close to the “natural” size of the image as possible. Pay particular attention to large images, as they take up the most overhead.
• Automation, automation, automation! Invest in automation tools and front-end infrastructure to ensure that all your graphics resources are optimized at all times.

The translator’s words

This article is so full of good stuff that I recommend reading it twice. Although all are academic knowledge points, but the breadth of knowledge is very important, who knows which day to use it?

SVG images are generally used as ICONS. In fact, there is not much we can do, as long as we pay attention to open GZIP.

Again, the principle of raster image, raster image is the most commonly used image format. The essence of a raster image is to store an RGB value representing the color in the position of each pixel. Since 255 = 2^8, the binary representation is 11111111, which takes up 8 bits; Again because the RGBA has four band (red, yellow, blue, transparent), white with a binary representation of a RGBA is (1, 11111111111111, 1111111, 1111111), 24 bit occupied, 1 byte = 8 bit, So an RGBA color takes up 4 bytes. If you look at a 100×100 image, it’s 10,000 pixels, and each pixel is 4 bytes so it takes up 40,000 bytes. This is how a grid image is calculated.

Raster image compression has always been a top priority in academic circles. There are two kinds of compression, lossy and lossless.

The principle of loss is to group similar colors that are difficult to be distinguished by human eyes into one category and directly treat them with the same color (marked with 0), which will damage the picture quality.

The principle of lossless is to mark only the same color in the vicinity as 0 to ensure that data is not lost and can be restored.

In general, we will use the two together, weigh the advantages and disadvantages of picture quality and volume size, and choose the best solution.

In the end, I summed up some experience in optimizing pictures. In a word, I gained a lot. It is a high-quality popular science article.

This article is formatted using MDNICE