Why does arranging images in a CSS sprite horizontally as opposed to vertically result in a smaller file size?

Why wouldn’t they be equal in file size?

Or, is this more of a larger question, like,

Would this be consistent that, horizontal images in general, are always less in file size than vertical images?

If this is in fact the case, why is that?

I tried to do some searches, and couldn’t find anything on it.

2.6 KB

2.25 KB

One has a bit depth of 8 and the other has a bit depth of 32 which is strange if you made them with the same software. One is also 20 pixel shorter.

2 Likes

I think that’s a result of Discourse’s “thumbnailing” process. If you click on the upper image, you will see the “full size” version, which is 520px high.

1 Like

1.)

260px × 520px
https://i.imgur.com/kxor8aP.png

2.)

520px × 260px
https://i.imgur.com/xmdldMK.png

It all depends on how many bytes are needed to have all the information needed to render the image

Try searches like “w3c yourword(s)” eg. “w3c png”

https://www.w3.org/TR/2003/REC-PNG-20031110/#11IHDR

Hi there asasass,

there are two sizes to take into consideration…

  1. Disk size
  2. Current memory size

The disk size varies but the current memory size is identical…

Further reading :-

image disk size v image memory size

coothead

3 Likes

@asasass I don’t know how much you gleaned from the documentation, but anyway…

Instead of units in KB, what are they in bytes? eg. instead of 2.6 KB what are the 2### bytes values?
(try right-click → properties on the files)

2327
horizontal

2686
vertical

Thanks. So 2686 - 2327 = 359

The horizontal image is 260 pixels taller than the vertical image.

What isn’t glaringly obvious in the documentation is that the PNG format uses a byte to signify “start a new row of pixels”.

Yet even so, 359 - 260 still leaves 99 bytes unaccounted for. TBH, I don’t know what those bytes are specifically used for. But unless you have some kind of transparent border not displaying that would explain them, I am sure they must be for some instructions that are needed to produce the image.

In any case, I wouldn’t worry much about a few bytes here and there, that would be what I consider to be “over optimizing”. IMHO, try both horizontal and vertical. If one is easier to work with / causes less problems, then use that image. Go after the “heavy weights” that could be slow-down bottlenecks first and worry about the “light weights” when they seem to be a problem.

All I did was put 2 images inside Microsoft paint.

Let me try something else.

1083
vertical
https://i.imgur.com/f9yEAt2.png

991
horizontal
https://i.imgur.com/zieNXHW.png

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.