How do we get our emoji png files from the server to the browser in a quick and sufficient way?

Question

I have a folder on my server full of emoji pngs that I would like to get to my emoji picker clientside. Is the best way to load them all at once in one request? I have seen this mentioned here on SO using ajax to load the folder.

I have tried using a cdn but I am not sure it is the correct way and as far as I can get it to work it is still giving lag.

My images are also 128x128

I know I can use a sprite image but I was not looking at going down that path.

I tried following this guy here as he seems to be using png files and using a json object representation of the files to use as a search but Im not sure how he is getting the images to the client.

Answer 1

Ok, after doing some digging I found that reducing image size and also using a optimized cdn like cloudfront with some caching is the way to go if you want to load individual files. Facebook does it this way