I often get designs from our artists which contain large complicated images that can be turned into a background-color, some tiling, and overlaid smaller images. The problem is, doing this often takes quite a while and adds complexity to the html structure. How should I decide wether it is worth doing?
For example, the following is a button / mouseover:
All the buttons in an atlas take up a whopping 232kb*.
I can get this down to 40kb by using a background color and overlaying the following:
- top gradient (horizontal)
- bottom gradient (vertical)
- glow for mouse over
But then instead of 1 html element the button would take up several. In addition, I would have to spend several more hours to cut everything out and do the html/css.
So, as a new web developer, are there any guidelines for when to split images up vs just using the whole thing? Based on size/difference, time taken, and additional DOM complexity added?
In this specific case, at least extracting the glow seems like an obvious decision, as it only adds one element and halves the number of images.
*I'm fairly new to web development from non-web programming and may be wrong, but 200+ kb seems massive for just some of the art assets.