How much effort should I put in to optimizing (cutting up) images for the web?

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:

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)
  • text
  • photo
  • outline
  • 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.

Answer

I would ask the designer to work with you to rethink the button in terms of code rather than exportable graphics. It is absolutely worth the effort to make the button graphics lighter (in size). To your point, there is a lot more that will load on the page: the remainder of the graphics, CSS, HTML, javascript, and who knows what else. Why waste space because of a careless design process.

The gradients and background color could all be done in CSS, making the button lighter on load and easier to update. It also means you have one style that can be applied (with tweaks as necessary) across a range of buttons without consistency concerns.

At the most you have two graphics:

  1. The type and white line art (with a CSS color overlay on the latter prior to hover)
  2. The photographic trash can

You could slim that down by using live type for the labels.

Attribution
Source : Link , Question Author : carpat , Answer Author : Community

Leave a Comment