I was under the impression that PNG is actually quite good at compressing areas of a singular solid color (or in this case solid transparency). It just fails at every-pixel-is-different cases, where JPG is better.
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.
In order to draw the PNG, the browser has to decode it, including the transparent pixels. I'm also pretty sure (though I haven't tested this) that the overhead of painting four smaller images is negligible in comparison to the cost of blending the entire center area.
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.
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.
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.