Tip for optimizing animated canvases: Save for Web as PNG-8 (Indexed colors)

If you’re looking to optimize some of your spritesheets for your condo, it may be tempting to save your spritesheet as a .jpg, as they are generally lower in size. However, if done properly, PNGs can result in lower file sizes and higher quality, while also still having transparency support.

It does take a bit more effort though.

The basic explanation: GIFs have a limited color palette of 256 colors, so we can utilize this lower color count to optimize the file size of our images (reducing load times and resource load).

Methods:


GIMP (free)

  1. Open your spritesheet with GIMP. If using the ezgif converter, save as .png

  2. Navigate to Image -> Mode -> Indexed

  3. A window like this should pop up.

The window should pop up with an automatic value set under “Maximum number of colors”. This value should optimize the colors without any color loss.

For further optimization, you can lower the amount of colors in the image, if wanted. This can result in artifacting, which may be improved by adjusting the Dithering settings. Note that enabling dithering will increase file size, and it may be better (in some cases) to simply increase the amount of colors used.
Do not use dithering if using all 256 colors, as it will only increase file size.

  1. Export your image. Make sure the compression level is set to maximum (9), lower values cause larger file sizes with no noticeable impact to the image itself.

You can tinker with the other settings if desired to further reduce file size, but I’m not sure how necessary those options are.

Results:

Original GIF: 75.8 kB

Original Spritesheet (PNG): 199 kB

Optimized PNG-8 Spritesheet (default settings): 84.3 kB

Untitled

Optimized PNG-8 Spritesheet (all checkboxes unticked): 70.4 kB (lowest filesize of all tests)

Untitled

Optimized JPEG Spritesheet (max quality JPEG via Save for Web): 145 kB

gross

JPEG spritesheet has minor (yet noticeable) compression, and lacks transparency, while also having a larger file size.


Photoshop ($$$)

Has the ability to preview your image before converting, and has smaller file sizes than default GIMP settings.

  1. Open your spritesheet, then navigate to File -> Export -> Save for Web (Legacy)

  1. Set your export settings to PNG-8.

If your GIF uses less than 256 colors, there should be an option to export as “Optimal” under the colors dropdown, which only uses all the colors used in the image.

Same as before, feel free to mess with the amount of colors and dithering settings, different methods have different appearances and different file sizes.

Results:

Optimized PNG-8 Spritesheet (256 colors): 75.3 kB (even lower than original GIF size)

aaaa

17 Likes

With GIMP, is there a difference between using the plugin and the builtin feature?

https://docs.gimp.org/2.10/en/gimp-image-convert-indexed.html

JPEG is trash. Never use JPEG. For anything. Ever.

1 Like

It seems like it’s the same, I’m just used to Photoshop so I looked up what the equivalent command was and that plugin popped up on an old guide. I’ll update the post with the proper info.

Edit after some testing: The built-in feature doesn’t have an option to preview the image before converting the colors, which does make it a bit of a hassle to use, but it works, given you can undo the conversion anyways with Ctrl+Z.

You’re right, JPEG is very old by now and there’s surely better alternatives. What would you use? the use case for JPEG is to have a raster image with extremely high detail, like a real life photography, of which detail can carefully be lost to compression in order to have an image with low amount of perceived loss at a manageable file size.

TBH, I feel like the days of worrying about file size for images on the internet are a thing of the past. Modern service speeds and bandwidth mean there’s little reason to accept JPEG’s lossiness at all. The difference between a JPG and a PNG is rarely going to make any noticeable difference except when uploading thousands of images at a time. PNG24 (or PNG-32 if you want partial transparency) is pretty much a straight upgrade from JPEG. The only cases I can really think of when PNG /isn’t/ the answer are those cases where you need a vector image, in which case use SVG. Or, you know, situations where you’re working with RAW prior to doing anything with it.

Mobile Data Volumes would like a word.

I agree you don’t have to* optimize every byte in 2020 but the reason we can communicate with text this ridiculously fast is because it’s ridiculously small in size, even uncompressed. If we keep images in 2010 sizes, the same can apply to them when we’re starting to stream volumetric information. And if we don’t stream 3D in pixel clouds, those UVs will need to have stayed small.

* But you still can try.

I hope this doesn’t start too much of a discussion, we’re borderlining off-topic here…