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)
-
Open your spritesheet with GIMP. If using the ezgif converter, save as .png
-
Navigate to Image -> Mode -> Indexed
-
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.
- 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
Optimized PNG-8 Spritesheet (all checkboxes unticked): 70.4 kB (lowest filesize of all tests)
Optimized JPEG Spritesheet (max quality JPEG via Save for Web): 145 kB
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.
- Open your spritesheet, then navigate to File -> Export -> Save for Web (Legacy)
- 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)