Loading ...

Loading ...

From The Blog

Stay updated with our latest news

How-To and Tools To Optimize Your Design Assets File Size

22

Keeping image file as small as possible is very important, whether you are working on user interface or game assets. Saving the file with Save For Web does not guarantee smallest file size.

PNG format is the most used image format for games, user interface and now stickers for chat messenger. Each chat app have strict guideline on file size, if the file size 1 KB bigger, they will request to make it 1 KB smaller, no compromise.

The Basic on How to Keep File Size Small

The smaller the image size, the smaller the file size. However, in design we bound to follow image size based on specification and guidelines. So, reducing image size in most cases is not an option at all.

Photoshop Bits Option

In Photoshop you have the power to create richer color depth, by default Photoshop use 8-bit depth. If you use 24 or 32-bit depth change it back to 8 bit. More bit depth means bigger file size, 24-bit image means the file size 3 times larger than 8-bit image.

Tools To Make File Size Smaller

Image file Saved with “Save for web” in Photoshop, or Adobe Illustrator is not properly optimized. Inside the image file there are still some information that can be safely removed to save more extra bytes. Below is our selection of tools to optimize file size.

ImageOptim Window

ImageOptim is our first tool for reducing PNG, GIF and JPEG files. The optimization result is depend on your image type or numbers of colors. On our sticker project, ImageOptim can save to averagely 50% of original file size. Example above, ImageOptim save 33.7% file size.

ImageAlpha window

If your file size still not meet the requirement, we reoptimize the image using ImageAlpha. With ImageAlpha we can save additional 39%. In ImageAlpha, the color reduced to 256, resulting smaller file size. You can save more file size by reducing the total colors. Fewer colors means smaller file size, in ImageAlpha you can check the image in different background to make sure the image quality doesn’t suffer.

Reduced color by ImageAlpha

You can see comparison between 256 colors and 64 colors. By reducing the color to 64, we able to save 3KB more. There are some jagged lines on Swaggy boots, but it isn’t so bad. Most importantly the transparency still looks great.

The final file size after optimized by ImageOptim and ImageAlpha with color reduced to 64 is 10 KB, original file size was 32 KB. We have saved 22 KB file size.

If you are a web developer, 22 KB is a huge bandwidth saving. For games and apps means the app size will be smaller. Using image optimization is a mandatory practice if you have file size constraint.

Other Tools

There are other tools for optimized your image file, we recommend these app.

  • TinyPNG. Website for reducing PNG file size in less than 5MB. You have to upload the file one by one via web interface, or buy Photoshop plugin ($40).
  • Smush.it. Image optimization by Yahoo!. The result is the same as Image Alpha.
  • PNGquant Photoshop Plugin. PNGquant is the command line tool that also used by ImageOptim and ImageAlpha, this plugin for is Adobe Photoshop plugin.

Further Reading on Image Optimization

We recommend you read these articles for more detailed reading on how to optimize file in different extension.

Have you used any optimization tools? Please share your process and tools in the comments. Thank you for reading.