javascript - The front-end of many web pages is a whole picture cut out with many small materials such as button icons, etc. Why is this? Will mobile development also operate in this way?

Question

For example, this icon with v certification on Weibo

Why not divide the UI into a batch of files but crop them when using them?
By the way, will the mobile terminal also operate like this in real development?

Answer 1

The resource is small in size and large in quantity. If divided into a batch of files, a large number of http requests will be generated when the web page is loaded. The establishment of http requests requires device performance and network bandwidth.

Rather than saying why it is not divided into batches of files, it is better to say that small files are integrated and released together in order to improve new capabilities.

Answer 2

You can search for keywords such as sprite pictures, sprite pictures, sprite pictures

Answer 3

This is the CSS sprite effect.
Principle: Merge small icons and background images into one image, and then use CSS background positioning to display the part of the image that needs to be displayed.
Purpose: Reduce the time it takes to load web page images The number of requests to the server increases the loading speed of the page.
Problem: When loading for the first time, the memory consumption is relatively large, and unnecessary pictures or icons will also be loaded into the memory.

---

Sprite effects are generally not used on mobile phones.
The reason is that mobile phone memory is not rich, and resources on mobile phones are usually loaded into the memory when they are used (lazy load), and using sprites will improve image maintenance The cost is that more css operations are needed to display the specified image when using images. At the same time, in iOS, using sprite images also increases the difficulty of adapting images to different mobile phones .