I would like to know if i should put all the sizes that are going to be used in the web site in the sprite or if i should put only one and let the Front-end designer scale it with CSS but it seems weir to me to scale the whole image (sprite) only for one item.


For an image(png, gif, etc) sprite, you have to put all the sizes that you use on your layout. Resizing the whole sprite to get to a desired size of an especific image on the sprite is not an option.

Edit: Example of the problems that resizing the whole sprite in CSS can cause for the front-end dev.

enter image description here

The first sprite is the original size with 5 icons; The second sprite is the resized version using CSS;

Then lets say that you had to edit the sprite to add 3 more icons, the original size of you sprite wont be 350 x 100.

The problem: The third sprite, with the adition of those 3 icons, and making the canvas larger, the resized sprite will loose the size and position.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.