TIP: Optimizing 24-bit PNG's with Photoshop

Solar2D General Questions/Discussion
#1

Not really a “question” but just thought I’d post it here anyway.

When you ‘Save for Web & Devices’ in Photoshop, you really can’t use any other option than the 24-bit PNG one, which tends to produce pretty bulky file sizes, but I recently found out a way to reduce your image file sizes by almost half (sometimes more!) with a very minimal loss in noticable quality.

I applied this tip and my game ran much smoother as a result of the smaller image files.

Before you ‘Save for Web & Devices’ in Photoshop, first, click Image > Adjustments > Posterize and play with the settings there. The best thing to do is to start at the lowest possible point where you can really notice a change in quality and then work your way up from there.

If you do that, compare the original file size with the new one… you’ll be pretty happy :slight_smile:

Alright well I’m thankful for the responses I’ve received from the few questions I posted here so far, and am really enjoying using the Corona SDK so just thought I’d “give back” in some way by sharing that tip.

Hope that helps! [import]uid: 7849 topic_id: 1593 reply_id: 301593[/import]

#2

There’s a much simpler way. Use ImageOptim, which offers a drag and drop solution and crushes using a range of optimizing tools and offers the smallest one.

“ImageOptim provides GUI for various optimisation tools: AdvPNG from AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, jpegtran from libjpeg, Gifsicle and optionally PNGOUT.”

http://imageoptim.pornel.net/

Open source and free.

Cheers,

  • Ian [import]uid: 238 topic_id: 1593 reply_id: 4551[/import]
#3

@hyperphonic: I downloaded ImageOptim like you suggested and I agree it is a VERY useful program.

However, if you don’t mind a slight reduction in quality, the ‘Posterize’ tip I provided above yields MUCH lower file sizes. Sure, there IS a reduction in quality, but the difference can really only be seen if you compare the before and after images… it definitely isn’t enough to decrease user experience (especially if you consider the gains in performance you can potentially be getting).

To give you an idea, I used my “game over” or “retry screen” background image to test out the Posterize tip AND ImageOptim.

Original file size (Save for Web & Devices @ 24-bit PNG) - 119kb

Using ImageOptim - file size lowered to 115kb (no reduction in quality)

Using the Posterize effect - file size lowered to 25kb (reduction in quality, but really only noticable if you compare the original with the final output… once again, not enough to actually take away from user experience).

Thanks again hyperphonic, I’ll definitely be using ImageOptim, but mostly for really small images where Posterize doesn’t really have much of an effect.

OH, and it’s also worth noting that if you use the posterize effect AND ImageOptim, the images are reduced an extreme amount when it comes to file size HOWEVER the images become unusable in Corona (invalid color space), but using both together would be great for website images. [import]uid: 7849 topic_id: 1593 reply_id: 4552[/import]

#4

If you want to hand optimize your images, then I strongly recommend using Fireworks instead of Photoshop. Fireworks and ImageOptim is a very strong combination. Photoshop is good for many things, but optimizing image file size has never been one of its selling points. (-;

I’m building a Retina display app which I’m using Fireworks to clean up all the Photoshop files at present, it’s a long laborious process, but worth it.

Glad it was useful to you.

Cheers,

  • Ian [import]uid: 238 topic_id: 1593 reply_id: 4553[/import]
#5

Thanks for the suggestion! I’ll definitely have to give Firewoks a look. At the moment though, Photoshop and the Polarize adjustment is going to have to do. [import]uid: 7849 topic_id: 1593 reply_id: 4563[/import]

#6

I personally work with Firewoks since ages… and I still use my old Version 8 … for most Web & Game Design related stuff. Dunno… I always found it being the best tool for all my needs. [import]uid: 6928 topic_id: 1593 reply_id: 4567[/import]

#7

A tool I used often is called SuperPNG, replacing the photoshop png exporter.

http://www.fnordware.com/superpng/

C [import]uid: 24 topic_id: 1593 reply_id: 4583[/import]

#8

Thanks for the link to the plugin Carlos, unfortunately it won’t let me use it. After downloading it appears to support up to Photoshop CS2 and I’m using CS4.

Maybe they’ll upgrade soon. Thanks again everyone! [import]uid: 7849 topic_id: 1593 reply_id: 4607[/import]

#9

Oy. I am on CS3

c [import]uid: 24 topic_id: 1593 reply_id: 4608[/import]

#10

For the command line inclined you can use the imagemagik ( http://www.imagemagick.org ) convert tool to do this as well.

[blockcode]
convert -posterize 30 fish.small.blue.png fish.small.blue.out.png
[/blockcode]

Which can obviously be scripted etc if you had a lot of images. [import]uid: 3 topic_id: 1593 reply_id: 4612[/import]

#11

To use ImageOptim for PNGs in your Corona app you need to turn off OptiPNG and AdvPNG in the preferences. They both create indexed PNGs which are incompatible with Corona.

I am using a combination of jonbeebe’s posterize method with Pixelmator and ImageOptim and the resulting PNG size is quite impressive. [import]uid: 8194 topic_id: 1593 reply_id: 6797[/import]

#12

@dknell: i noticed things didn’t work when using ImageOptim, so thanks for that advice (to turn off OptiPNG and AdvPNG). I’ll definitely check out Pixelmator. [import]uid: 7849 topic_id: 1593 reply_id: 6800[/import]

#13

I just use fireworks CS4 export feature. Works great. All my graphics are done in fireworks. Great great tool for development. [import]uid: 8192 topic_id: 1593 reply_id: 6824[/import]

#14

Another PNG optimizing program similar to ImageOptim is Trimage:
http://trimage.org/

I just found this while looking up info about ImageOptim. It looks like there aren’t pre-built binaries for OSX so that sucks, but it should compile. [import]uid: 12108 topic_id: 1593 reply_id: 15207[/import]

#15

Lol… Recursion Error! [import]uid: 6928 topic_id: 1593 reply_id: 15209[/import]

#16

Hello,

Someone was test SuperPNG with Photoshop CS5 ?

[import]uid: 11749 topic_id: 1593 reply_id: 19009[/import]

#17

Good info here but no one tells if fireworks export indeed works better than posterize in photopshop.

The pb is that I can’t find any posterize command in fireworks.

Could you tell ? [import]uid: 9328 topic_id: 1593 reply_id: 58245[/import]

#18

Fireworks v Posterize
I was struggling with getting the file sizes down from some images generated using Kwik and came across these tips.
After optimising in fireworks and then using an app on the Mac app store called PNGSquash which is almost identical to the ImageOptim option discussed above - I have to say that Jon’s tip was the one that came up trumps!
The file size of the worst offender went from 2.2 Mb originally to 1.9 MB after fireworks and PNGSquash optimisations but by using Jon’s tip and adjusting the levels until the quality was OK it went down to 640Kb! Thanks Jon!
Lesley [import]uid: 38799 topic_id: 1593 reply_id: 104845[/import]

#19

A thoughtful insight and ideas I will use on my blog. You’ve obviously spent some time on this. Well done!

http://bestcafeshops.com/jaketonline/jual-baju-online

jual baju online [import]uid: 155537 topic_id: 1593 reply_id: 110967[/import]