Search code examples
csscss-spritesimagemap

Difference between IMAGE MAPS and CSS SPRITES

I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?

Solution

  • Image Map:

    A single image in a page, with different areas you can click on, which then have different effects (eg launching different links).

    There's a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml

    CSS Sprites:

    Combining the images behind a number of css classes into a single file to improve performance - eg reducing number of requests and often overall download size.

    For example you might combine various border elements of a colorbox dialog into a single image, or combine the clicked and unclicked images for a button.

    The best description I've found of CSS sprites is this one: http://css-tricks.com/css-sprites/