Furthermore, I'm pretty sure a slow device would take longer to paint four separate images due to the overhead of having four of them.

Many sites are very bad about this, e.g. this sprite sheet from linkedin: https://static.licdn.com/scds/common/u/img/sprite/sprite_glo... which, when decoded, takes up ~9MB of almost entirely empty memory. Check out the "Optimizing Web Content in UIWebViews and Websites on iOS" talk on https://developer.apple.com/videos/wwdc/2012/ for more info about not wasting memory on mobile web sites.

Back in the old days of 2D game development, some games would use a technique called "dirty rectangles" to repaint selected areas of the screen that had changed. Windowing systems like X did/do something similar with "damage" or "expose" events (can't remember the exact name).

It's because the logic to handle many separate small rectangles is less expensive than the loop and memory bandwidth to paint one big one.

Also, some code left over:

console.log("toto");