-1

We need to build a responsive mobile site that will cover sizes from 300 width to Tablet high def.

We are considering using a sprite for all icons (12 icons in total) to reduce image size - combined with media queries (3 sprites to scale down for each device).

Does anyone have any experience with this approach and if so could offer any disadvantages we may run into?

I'm worried that older Android phones may struggle with Rendering/scaling a large sprite?

Dancer
  • 17,035
  • 38
  • 129
  • 206
  • The only thing you should watch for is file size. Obviously for your mobile phone size you want to serve up the smallest file size possible. I think if you have nothing but icons, especially if they are solid color, there is no reason why you can't use this method. But if your sprite image is 100KB or more, u might want to consider a different option. – Michael Jun 03 '13 at 14:53

1 Answers1

1

Assuming that you're describing three different sizes, there are two ways this can be approached (that I've tried at any rate):

  • Build up the sprite to include all three image sizes and switch the background-position (using media queries).
  • Make the sprite once at the largest size, and use the CSS3 background-size property to scale up/down the image.

I personally tend to opt for the background-size approach (although also tend to combine this with a second version of the sprite at 2x the size for retina images).

Do bear in mind that background-size doesn't currently have complete coverage, but there are the normal three vendor prefixes you can use, plus the 'normal'. Eg:

-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;

The numbering is the same as anywhere else in CSS: width, then height.

If you then wanted to half the size of the element, you would simply switch the dimensions:

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px;

Although do note you would also have to include new background-positions for each element using the sprite at that view size.

johnkavanagh
  • 4,614
  • 2
  • 25
  • 37