Amazon's Sprites

    Newer Older

    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.

    vormplus, france, jeremy.britton, and 24 other people added this photo to their favorites.

    View 5 more comments

    1. cindyli 64 months ago | reply

      When Buzz.Yahoo.com launched we had a couple of easter eggs too :)

    2. mdwong 64 months ago | reply

      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.

    3. M. Keefe 64 months ago | reply

      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.

    4. Patrick Haney 64 months ago | reply

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

    5. Nathan Allworth 64 months ago | reply

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

    6. 570F 64 months ago | reply

      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

    7. Darren 64 months ago | reply

      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.

    8. kurafire 63 months ago | reply

      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.

    9. qrayg 63 months ago | reply

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

    10. Willi Kampmann 63 months ago | reply

      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.

    11. kurafire 63 months ago | reply

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

    12. Willi Kampmann 63 months ago | reply

      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.

    13. kurafire 63 months ago | reply

      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.

    14. Willi Kampmann 63 months ago | reply

      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.

    15. Fixpert ! [deleted] 63 months ago | reply

      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/

    16. matranson 62 months ago | reply

      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!

    17. Erin Lynch 56 months ago | reply

      The complexity is amazing, but I think the idea is a rather smart one.

    keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts