javascript - How is this sprite image generated?

Question

https://s1.hdslb.com/bfs/stat...

Much smaller than ordinary pictures. Size 1600*2444 but only 70kb? Reduced quality?
During development, was this typesetting done manually one by one? Or generated by i tool

Answer 1

This picture is an 8bit png (maximum 256 colors). For pictures with simple colors, you can use this format to reduce the size.

Answer 2

There are tools, /a/11...

Image compression can be done with gulp-imagemin. This makes it easy to integrate the project into your workflow.

It seems that there are relatively few people using sprite images now, and they are gradually using svg and icon font instead.

Answer 3

Usually relies on tools. I usually use CssSprite.exe. I just drag the image in and it will generate a sprite image and the corresponding css for you

Answer 4

CssSprite.exe also needs to be dragged in manually

Answer 5

You can use image editing software such as Photoshop to put multiple pictures on the same layer and export them, or use automated construction tools to automatically stitch the merged pictures