MapFaces
  1. MapFaces
  2. MAPFACES-42

Use one CSS Image Sprite instead of a lot of images

    Details

    • Number of attachments :
      0

      Description

      Here good explanations from Yahoo website (http://developer.yahoo.com/performance/rules.html) :

      CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

      Optimize CSS Sprites:

      • Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
      • Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
      • "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels

      Here a good website to create sprite :
      http://spritegen.website-performance.org/

      Other site to explain sprite philosophy:
      http://www.alistapart.com/articles/sprites

        Activity

        Hide
        Olivier Terral added a comment -

        most of our component use that

        Show
        Olivier Terral added a comment - most of our component use that

          People

          • Assignee:
            Olivier Terral
            Reporter:
            Olivier Terral
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Time Tracking

              Estimated:
              Original Estimate - 2 days
              2d
              Remaining:
              Remaining Estimate - 2 days
              2d
              Logged:
              Time Spent - Not Specified
              Not Specified