0

I am creating a horoscope page for my mobile site.

Here are the details of image resource, I am using.

  1. There are 24 (12+12) horoscope images (+12 for select/hover mode)
  2. Each image is of size >3.5kb approx.
  3. Dimensions: 106 x 108
  4. Format: png

Right now I am rendering each of them as separate image files.

I have read many recommendations for using sprites, like: http://alistapart.com/article/sprites and Why should I use sprites on my mobile site?

But my question here is about using "Mega CSS Sprites" specifically for "Mobile sites" and the drawbacks they have (other then maintenance).

Thanks in advance.

Community
  • 1
  • 1
100rabh
  • 142
  • 9
  • It depends on how many images you have in your mega sprite, and how much image re-aligning you are willing to do/how many state changes you have for the sprites. – TylerH Dec 30 '14 at 18:58
  • 1
    *"Each image is of size >3.5kb"* This probably includes overhead like headers and meta information. One of the advantages of making a sprite image is that you reduce that overhead. And even with 3.5KB, the image will be a total of 84KB, which is quite reasonable, and the dimensions won't be that bad either (1272x216?) I don't think I would call this 'mega'. Can you try to make one big image, and apply [PNGCrush](http://pngcrush.com/) to it? I think the results are quite satisfactory. – GolezTrol Dec 30 '14 at 19:01
  • many thanks @GolezTrol I will try that. But will it be wroth doing since I had set up multiple image-hosting servers for parallel downloads of images like xyz.domain1.com, xyz.domain2.com, xyz.domain3.com, etc. BTW about 'mega sprites image' thing, actually I was confused by some of the sprites docs http://www.google.com/images/nav_logo7.png and http://g-ecx.images-amazon.com/images/G/01/gno/images/orangeBlue/navPackedSprites-US-15._V202471683_.png were reffered as mega sprites images. – 100rabh Dec 30 '14 at 19:28

1 Answers1

0

Besides maintainability, a few other downsides include:

1. Larger file size for many png sets, due to missed optimization.

I'm on a Mac and I use Image Alpha, which allows you to compress a png by limiting it's color palette, I'm sure there is a similar tool for Windows. Many pngs can be limited to 256, 128, or even 64 colors without loosing quality, because their color palettes are not extensive.

This often cuts file size by 50% or more, and you usually can't do it with image sprites because more images are combined.

2. You loose the ability to use some handy css sizing/placement techniques.

You can't use things like: background: contain and background: cover to size background images.

It's harder to center a background image in a box, because you can't use background-position: left center etc.

Calculating background-size: 80%, etc, also becomes tricker. You still can, it just changes if the size of the sprite sheet changes, and you may end up with other bits of the sprite showing depending on placement.

3. Loading may appear slower.

Although there are fewer requests, the browser has to download more data before it can display any images using the sprite. This means the logo in the upper right may appear faster as an individual file, because it will be downloaded and displayed while the browser is still making requests for other files.

I've seen this happen, but the effect is rarely noticeable.

The combination of these and the maintainability overhead usually keeps me from using extensive sprite images, though I still commonly combine a default and hover state into one sprite, or a set of related images in a similar color palette.

cjspurgeon
  • 1,497
  • 11
  • 20