new icn messageflickr-free-ic3d pan white
Doing more with less | by Schill
Back to photostream

Doing more with less

Reducing page weight/load time and improving UI quality simultaneously? Bonus!


In this case, up to 15 HTTP requests can be shaved off this bit of UI depending on browser support (IE 6 still uses the old stuff, but everyone else benefits with a sprite at minimum.) The extra requests stem from legacy code, using multiple images for rounded corners and drop shadows.


In the best case, the rounded corner images are ditched for CSS' border-radius (or -khtml-border-radius, etc.), which renders native and anti-aliased rounded corners wonderfully in Safari and Firefox (Chrome should eventually, too.) That's 8 requests saved there. Additionally, the 8 images used to make the drop shadow can be reduced to one "sprite" image which is reused, saving another seven requests. Win!


Finally, there was a very small color shift on the right side of the old drop shadow that had been annoying me, which I fixed with the sprite-based one.

9 faves
Taken on January 2, 2009