Optimizing Image Depth

This year I have learned an important point of knowledge again: pay close attention to the bit depth of the image. In the past, we were often struggling with the 2-bit, 4-bit or 8-bit color depth of GIF images, because many users were using dial-up modems to surf the Internet, and each KB was important.

Nowadays, most people use broadband to connect to the internet, but guess what? Each KB is still important! Because not everyone can use broadband, especially in the mobile field; and any optimization that can reduce page rendering time is worth trying. I had thought optimization tools would handle trivial things like color depth optimization, but that wasn't the case.

This is especially true for PNG images. By default, many image editing tools save PNG images at 2^24 color depth just in case.

For photos, this makes sense (although if it's a photo, you should save it in JPG or WebP format), but for images like logos and icons, this is about 2^24 more colors than you actually use.

So in my preferred image editor, Acorn, I pay special attention to lowering the bit depth of the PNG image in the export dialog. In many cases, I reduce the image size by 80% or more by indexing the color to a palette with 256 or less values ​​without losing visual fidelity. (Again, I'm not talking about photos here.)

Here is an example:

The PNG image size of full color depth is approximately 379KB. After limiting to a 32-color palette, the size is 61KB. This is just the size when exported: Once I processed it with ImageOptim, the optimized sizes are 359KB and 48KB, respectively. Just by reducing the color depth, you can save about 85% of your weight. If I deploy the image and find that more colors are needed, I can rerun the process to use 64 colors: in this case, the final size is 73KB, still saving huge space.

Reducing color depth by the naked eye is obviously more laborious than applying optimization scripts to image directories, but in my experience this approach is more efficient in image size and user experience. And that's the core of all this, isn't it?

The above is the detailed content of Optimizing Image Depth. For more information, please follow other related articles on the PHP Chinese website!