Arrange elements in sprite to improve PNG compression

Question

Given a huge sprite like this one.

Is it possible to order the elements (emojis in this case) in a way that the resulting PNG file size becomes significantly smaller?

Extra question. I've read that, in the filtering phase, for each scanline, the best filter is selected. So my intuition says that it is better to have an image where the height is much greater than the width. Does this make any sense?

Possibly. Simply rotating the entire image 90 degrees makes it about 8 percent more compressible. — Glenn Randers-Pehrson, Apr 21 '17 at 22:01
Have you resized the image? It seems to be 2794x2794 which doesn't divide nicely by anything between 32 and 70 pixels wide.... — Mark Setchell, Apr 22 '17 at 11:13
No, the image is original. Each emoji is 64px, with 1px separation and 43 emojis per row: 43 * 64 + 42 = 2794 — Pedro L., Apr 22 '17 at 19:17

score 1 · Accepted Answer · answered Apr 23 '17 at 11:07

1

Your intuition serves you well...

I split your image back up into its original icons as separate files. Then I made montages 2, 4, 8, 16, 32, 64, 128, 256 and 512 icons in width. For each width, I randomly shuffled the icons 10 times and averaged the resulting file size across the 10 runs to even out any differences. And, as you intuited, the sizes are smaller the narrower the montage.

Whether the software that reads the montage can manage an image with dimensions 64x118336 is another question...

answered Apr 23 '17 at 11:07

Mark Setchell

191,897
31
273
432

Thanks for your time. Regarding the first part of my question, the response is yes, It makes a noticeable difference the order of the individual images. On my tests, randomly sorting the images produces 20% bigger images than sorted by similarity – Pedro L. Apr 23 '17 at 19:51

Arrange elements in sprite to improve PNG compression

1 Answers1