I have a web page that i’m working on and it has only one image on it that was meant for design. It is about 200k bytes. When you go to another page, depending on the page, its the same image just a different color.
Should i be loading these background images as one big sprite and positioning them correctly or loading them separately?
When A page loads it is only doing 1 http request for that one image of ~200k bytes. If i make a sprite with(it will be at least 5) all the images on it, it will for sure increase the size of that one http request.
So the only benefit then is a caching/storage benefit? Are there any other benefits or is it a bad idea? What are you thoughts?
If combining them makes it 400kb, it may be better to leave them separate – otherwise none of your icons will appear until the browser has downloaded your image.
I would try combined and as 2 requests, and measure performance.