How to optimize simultaneous loading of 2000 low quality pictures?

Question

PHP

On the php site of the project on which I work, there is a block - sponsors, in which the ava of all of them are displayed in a table. There are quite a lot of them and therefore they are loaded in random islands, and the time to fully display all the images takes about 2 minutes. Avas themselves are quite small - 64x64 and in webp and are downloaded to the site each separately. It would be interesting if it is possible in principle to achieve a more or less fast loading? There are ideas on the server to pre-glue all the ava in one sprite and cut it on the front (I think most of the time is spent on a large number of http requests). Are there any other "hacks" or is it just a matter of optimizing the transport layer, improving compression, etc.? Thanks in advance.

Answer 1

Definitely sprites.
Firstly, experiment with the format, if your logo is mostly low-colored - PNG is more suitable than webp or jpeg. Photoshop allows you to effectively optimize the picture.
Secondly, the sum of bytes from all pictures will most likely be many times more than one large one, due to compression algorithms, since they work more efficiently on a large picture.
Thirdly, you don't need to "cut" anything at the front, just insert the background with an offset.
As an option to avoid empty spaces in this block, hide it before loading the sprite. Make it visible upon loading.

Answer 2

lazyload?