Solved

PNG compared to JPEG and GIF

Posted on 2006-11-08
1
705 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Drop down button NAMES disappear 1 62
.php tree directory? 5 57
Office 365 Pass Username an Password in URL 3 46
Advice on Xojo as a development tool over VB. 4 40
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
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).

862 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

Need Help in Real-Time?

Connect with top rated Experts

29 Experts available now in Live!

Get 1:1 Help Now