Cloning an image to avoid many HTTP requests. Best scenario for a chat widget/tab?

I’ve been trying to get an idea on how to go about my problem below. I couldn’t find much in the way already on stack so thought I’d ask. So here it goes!

I currently have a chat I am working on that has a slight issue each message acquires a new source for avatar leading to additional HTTP Requests. This is poor use in my eyes and the goals were to avoid this practice completely! No caching, just one fetch and re-use.

The chat messages are jammed into an array with inserted objects containing the avatar link and details of each message so the chat can be re-built when switching from public/private messages.


This is not overly an issue my code till there’s a 100 different avatars loaded in a chat and someone switches to private chat and back to public (for instance). Oddly 100 avatars will load if 1,000 or 100,000 messages instead of the message count.

If these are directly coming in as new messages the re-sourcing makes a new request. Making 1,000 of the messages 1,000 requests for avatar regardless. Not overly an issue but yikes won’t scale well… I need a better approach!


With all that said, I’d love for ideas on how to combat this and it not be overly stressing on client’s CPU or server’s.

Perhaps not possible but can a user XHR request the file and Base64 Encode it to keep forever as the new src file and avoid this?

Not sure of my options here but thanks again for any suggestions.