Amazon's Sprites

The second interesting sprite use I've discovered in as many days, I stumbled across Amazon's main navigation sprite image last night. I believe the word you're looking for is insane.

 

Though to be fair, just about everything Amazon does from a front end code perspective is also insane. The things they do to optimize would make your skin crawl.

  • cindyli 6y

    When Buzz.Yahoo.com launched we had a couple of easter eggs too :)
  • Michael Wong 6y

    check out the ones I created for my former employer; letstalk.com. It was done because of optimization requirements as well. Look at the topnav and the backgrounds for the phone finder.
  • Dan Rubin 6y

  • Matthew Keefe 6y

    This is cool, a common process found in the days of application development, such as VB and C++ development.

    Also cool that its gaining traction behind the scenes.
  • Patrick Haney 6y

    It'll be interesting to see what they do once they implement jQuery for all of their JavaScript needs.
  • Nathan Allworth 6y

    Just freakin' insane. I couldn't imagine having to make sprites that complicated. I can barely manage the ones I use now.
  • Christoph Saxe 6y

    I've been a fan of these since i noticed ReCaptcha's sprite back in December. Coworker pointed Amazon's out, which was themed for the holidays at the time, which points out another efficiency you gain by working this way - only one psd to maintain.
    see the ReCaptacha sprite here:
    api.recaptcha.net/img/red/sprite.png
  • Darren Gibbons 6y

    CSS Sprite Generator is a useful utility -- upload a zip file of PNG images and it will create a single image *and* the CSS to reference the images.
  • Brandon Martus 6y

    Awesome.
  • Faruk Ateş 6y

    There's a lot of inefficiencies in Amazon's sprite though. Just looking at it, you can clearly see a lot of overlap of effectively the same boxes. Separating them out a bit and telling the design crew not to create these minutely different variations of the same thing could reduce this sprite significantly.

    I reckon that for some of it, they did this on purpose to save having to use more than one element, but that doesn't apply to every piece here.
  • qrayg 6y

    Apple's controls.png for MobileMe is 32 x 6042 pixels as of this writing. That's insane!
  • Willi Kampmann 6y

    Thats weird, when I began learning HTML in 2000 or 2001, many websites did the opposite and divided big images in many small ones to reduce the load times.
  • Faruk Ateş 6y

    yoshi, they didn't do that to reduce load times so much as doing it to create stretchable boxes.
  • Willi Kampmann 6y

    No, they did it with static images as well that were not meant to be stretched. I learned it was because smaller images show up faster on the screen than single big pictures. On slower connections, CSS sprites will take some time to load and then show up all together, while single images would begin to display earlier and then show up one after another, making the load time seem not so long. Even if I can’t see everything yet, at least I see _something_ instead of a white placeholder.

    Still, I think CSS sprites are a very good idea and work really well. They would become mostly unnecessary when Microsoft finally adopted SVG, though.
  • Faruk Ateş 6y

    I highly doubt that people would switch en-masse to SVG as a replacement for images. In fact, I just don't see it happening altogether.

    That's just my perspective on it, though.
  • Willi Kampmann 6y

    Not for photographs; but most of the images in CSS sprites are simple UI elements or icons which could easily be converted to SVG. That would result in higher image quality, resolution independence, and most likely lower file sizes.
  • Fixpert ! 6y

    Cool, looks like Dave has captured a lot of this in a nice post on his blog:

    mezzoblue.com/archives/2009/01/27/sprite_optim/
  • matranson 6y

    I have come across this before and have used it myself. Its referred to as a CSS "image matrix" (or similar). If you create image rollovers in CSS using background images, using this technique you can shift one big picture around using the 'position' property. This also then prevents the flickering that occurs if the browser has to load multiple separate images for rollovers. I agree, its very clever!
  • rmckenna 6y

    I guess you haven't seen youtube's
    s.ytimg.com/yt/img/master-vfl102488.png
  • Erin Lynch (faqe) 6y

    The complexity is amazing, but I think the idea is a rather smart one.
30,224 views
27 faves
25 comments
Uploaded on January 22, 2009
  • Show EXIF
This photo is in 1 gallery

Additional info

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