homepage Welcome to WebmasterWorld Guest from 54.235.16.159
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
optimising file size of png's
surrealillusions




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

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 :)

 

mattur




msg:4111636
 7:04 pm on Apr 7, 2010 (gmt 0)

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

rocknbil




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

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.

surrealillusions




msg:4111676
 8:20 pm on Apr 7, 2010 (gmt 0)

Thanks, trying imagemagick too, see how that does.

Tried the Gif and PNG/8 options but they just look absolutely horrid :)

caribguy




msg:4111726
 9:34 pm on Apr 7, 2010 (gmt 0)

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.

thecoalman




msg:4115331
 7:49 pm on Apr 13, 2010 (gmt 0)


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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved