CODEWITHSUNDEEP
csscss-sprites
Pavan Kumar
Pavan Kumar

Reputation: 1686

Sprite Image Horizontal or Vertical?

I am using Sprite image for my project. Which one should we have to follow horizontal or vertical? I meant to say adding side by side(occupies more width ) or one bye one(occupies more height).

Is there any width/height limitation for adding images in sprite? Is there any loading concept included?

Upvotes: 4

Views: 3870

Answers (2)

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

According to this article it depends.

One aspect to consider is how much memory the decoded sprite map image will use consume. Here's are guidelines for whether horizontal stacking or vertical stacking will be more optimal:

  • For all images in the sprite, find the width of the widest image and the height of the tallest image.
  • If the largest width is greater than the largest height, then a horizontal stacking will result in a more optimal sprite sheet. Otherwise, vertical stacking is more optimal.

It then goes on to show examples of the same images in either a vertical or horizontal sprite along with their file sizes which is quite a surprising. It suggests using Google Chrome's Developer Tools "Native Memory Profiler".

Vertical Sprite Vertical Sprite

Horizontal Sprite Horizontal Sprite

In this case the horizontal sprite is best.

Upvotes: 7

Seti
Seti

Reputation: 2314

It doesnt matter if you use horizontal or vertical ones. Just dont make them too big. Mostly 1500x1500 is enought for one sprite - then change to another. If you think about mobiles then try to not make sprites bigger than around 800x800. For image type i would suggest png (if have full colors and transparency) if you use some popular graphic editors option to ,,save for web'' it will be even smaller that way.

Sprites are mostly used for lowering httprequests for images - if you use many small images its always good way to store them in one bigger (just dont forget to set cache headers) so all browsers will try to cache them (and mobiles at least for the session).

Upvotes: 7

Related Questions