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.

Daniel Catt, joanne and 8 more people faved this
4,965 views
10 faves
12 comments
Taken on January 2, 2009

Additional info

  • Viewing this photo Public
  • Safety level of this photo Safe
  • S Search
    Photo navigation
    < > Thumbnail navigation
    Z Zoom
    B Back to context