Welcome to WebmasterWorld Guest from 54.211.17.91

Forum Moderators: not2easy

Message Too Old, No Replies

optimising file size of png's

   
5:29 pm on Apr 7, 2010 (gmt 0)

5+ Year Member



Hi all,

Got a few png's I need to reduce in size for a website to decrease loading time. One of them been over 300kb!

They've got to be png's due to needing a transparent background, and gif's tend to be a bit tacky and rubbishy due to the limited colours.

In photoshop, theres an option for jpg's to reduce quality and therefore filesize, is there a similiar option in photoshop and/or gimp or an online converter?

The ones ive tried online dont reduce it down (or if they do, it tends to be by a kb or 2) or reduce it down so much it gets a black background and horrible outlines, or dont support png's.

I'm running Linux as my main system, so if theres a Linux trick thats hiding somewhere then I'll happily give that a try too.

Any help would be appreciated :)
7:04 pm on Apr 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



PNG uses lossless compression (unlike JPG) so your options for optimising png image file size are:

1. stepping down to PNG8 (i.e. 256 color palette like GIF)

2. optimising the PNG24/32 file using a tool like pngcrush [pmt.sourceforge.net]

3. and/or changing/simplifying the image (e.g. posterizing)

Smush.it is a good online tool for quickly optimising image files: [smush.it...]

HTH
7:11 pm on Apr 7, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



gif's tend to be a bit tacky and rubbishy due to the limited colours.


This is not always true. PS gives a great preview of the effect when you convert to indexed color. Even at the maximum gif palette, 256 colors, you can get very little image loss. I've seen jpg compressed images that look just horrid, with all sorts of compression artifacts in what are supposed to be smooth flat color areas . . . convert it to .gif and it smooths those out, and doesn't lose any of the vital tonal changes.

And, in many cases, a .gif of equal compression in .png can be much smaller. You really have to experiment with **all** possibilities, especially if the file is going to exceed 3 - 5 K.
8:20 pm on Apr 7, 2010 (gmt 0)

5+ Year Member



Thanks, trying imagemagick too, see how that does.

Tried the Gif and PNG/8 options but they just look absolutely horrid :)
9:34 pm on Apr 7, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



A trick I recently used for a 300K .png banner was to cut it in 5 parts: the top, bottom and sides with transparency were saved as .png and the center as a .jpg

The resulting composite was around 50K

Edit: also, the transparency was saved as 2 png sprites to minimize requests.
7:49 pm on Apr 13, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




with all sorts of compression artifacts in what are supposed to be smooth flat color areas . . .


.gif excels when your image contains text, solid one color backgrounds, sharp lines of contrasting color etc. A simple example will be taking a screenshot of this forum. The text will remain crisp, you'll get nice lines on all the edges and a much smaller file size than a .jpg.

.jpg however will produce much smaller and better reproductions of photo type images.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month