Solved

PNG compared to JPEG and GIF

Posted on 2006-11-08
1
720 Views
Last Modified: 2013-12-25
I've used GIF and JPEG for ages now, and begin to discover PNG. I hear from many people it's better, and I know that transparancy is better in PNG - if supported by the browser of course.

Normally I use JPEG for photo's. If I use PNG (24 bits), the image size is much bigger, and I cannot specify a compression rate (using Photoshop 6). As an example I took a photo of 800 x 600 pixels. Saved as PNG it was 800kb, and the JPEG version varied between 100kb (for high quality or 60%) and 500kb (100% quality). So the best JPEG quality is half the size of the PNG. Why is PNG better?

If I save to PNG (version 1), then reopen the saved PNG (800 kb big), save that again as PNG (version 2), the size grows to 950kb. If I reopen the last PNG (v2) and save it again as PNG (version 3), it seems to keep the last size. Is this always the case? Is PNG 24-bits lossless? Or at least not incremental on losing information?

What do you prefer? JPEG or PNG?

How about GIF? I think I won't use it anymore. I've noticed PNG-8 has comparable file sizes. I never use animated GIFs, so I don't need that (and don't know if PNG supports animation). Do you have reasons to prefer GIF over PNG?
0
Comment
Question by:grexx
1 Comment
 
LVL 38

Accepted Solution

by:
lherrou earned 250 total points
ID: 17898617
Grexx,

First of all, remember that PNG was intended as a replacement for the GIF file format when Unisys said they would enforce the LZW compression patent, which was used in GIF. JPEG is still the primary lossy compression method for photographic or photographic-style images. PNG is not going to be the smallest format for photographic-type images in most cases. On the other hand, for a simple image, the GIF format, while called loss-less, in fact discards color information to achieve some of it's compression, and is limited to 256 colors or less (as set by user/software). PNG often, but not always, outperforms GIF on image quality and compression in images of these types.

The following article shows some excellent comparisons, and discusses when each should be used:
http://www.websitetemplatedesign.com/oscommerce_tutorials/printer_136.shtml

Cheers,
LHerrou
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Blog posts not showing up on Blog page 7 60
Handling onsession end function in Application.cfc 5 54
paypal ipn url 5 58
How to create a textarea which saves text in HTML 8 37
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question