How To Make Sprites Larger

Question

I need to increase the size of some sprites in a WordPress Footer, and I can't figure out a good way to do it.

I tried tweaking the background-size as several threads recommended, but had no outcomes worth mentioning.
I used transform: scale(2) which worked, but that looked terrible. (worst than normal pixelation)

HTML:

<div>
    <div class="sprites sprite1"></div>
    <div class="sprites sprite2"></div>
    <div class="sprites sprite3"></div>
</div>

CSS:

.sprites {
    background-image: url('http://static.tumblr.com/6az34or/hTwmc1qw7/socialmedia-sprites.png');
}
.sprite1 {
    background-position: 0px 0px;
    height: 25px;
    width: 25px;
}

<!-- etc. -->

jsFiddle: http://jsfiddle.net/Labb6da9/

You can't increase size of .png, without loosing of quality, and the accompanying side effects (blur, distortion). Use bigger images, or svg... — sinisake, Sep 10 '15 at 18:47
@nevermind Note that for some devices SVG might be too resource demanding. — Derek 朕會功夫, Sep 10 '15 at 18:52
@Derek朕會功夫, thanks... Then, i guess, the only way is to use sprite with desired dimensions. Useful link: http://vector-conversions.com/vectorizing/raster_vs_vector.html — sinisake, Sep 10 '15 at 18:56

score 3 · Accepted Answer · edited May 23 '17 at 11:45

.png sprites works because you use pixels to peep onto a restricted area of a larger image. This means you can't zoom them very easily. You can't do anything that effects the co-ordinates that picks out the sprite image without exposing other sprite images, unless you zoom the size of the underlying image correspondingly. You then need to do it by an exact multiple of pixels (so exact 2x or 3x) to avoid bleeding - this might not fit your designs.

With any zooming on a pixel based image quality will be lost.

Drop the pixels in order to win ...

SVGs will scale without loss of quality. You can also sprite them. They work by defining an image as a set of co-ordinates that define lines, rather than by the colours of a set of atomic blocks arranged in a grid. Co-ordinates can be easily scaled. Also, they're defined like HTML, meaning they can be targeted with css and embedded directly in the document. All this sort of thing gives more flexibility, while allowing scaling and keeping http requests down (the original goal of spriting)

Icon fonts will allow you to treat a set of icons like a font, giving you that sort of flexibility you'd expect from a font, such as colour and size. Also, with a font, you get the one http request benefit of a sprite.

IcoMoon will produce both for you

How To Make Sprites Larger

1 Answers1