TinyPortal

General => Chit chat => Topic started by: Freddy on January 25, 2010, 08:17:24 PM

Title: Question on graphics (PNG vs JPEG)
Post by: Freddy on January 25, 2010, 08:17:24 PM
Okay, I'm trying to settle a question that has developed from the course I am on.

Many of us will know that PNG graphics use lossless compression, meaning that they retain the image quality of the original.

And that JPEGS are lossy, ie they lose quality due to compression.  More compression = worse image.

So considering those two facts, which would you say offers the highest image quality ?
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Ken. on January 25, 2010, 09:30:53 PM
Not an expert user here, so my comments need to be taken with a grain of salt.

Using your description, on the face of it you would have to say that PNG is the better quality if all else is equal... same original image, same output dimensions.

My personal preference is PNG because to me they often just look better to the eye.
You didn't say what the focus is of your course, but if it has to do with page load times for web sites it may be good to factor in the fact that about 45% of the users on the net still use dialup.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Freddy on January 25, 2010, 09:37:16 PM
Thanks Ken, it wasn't a trick question or anything and no need to be an expert ...

The question was purely about image quality alone.  The part of my course I am doing at the moment is all to do with web page design and the things you have to consider when designing pages.

The short story is, that on one page it told me PNG was lossless.  It had also explained about JPEG being lossy.  Then a few pages later it suggested JPEG provided the highest image quality.

It didn't add up for me so I thought I would run it by some other people and see what they thought.

I am with you, speed of connection is very important and would be a consideration.  I didn't know so many people are on dial up, so I learnt something today.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Ken. on January 25, 2010, 09:44:57 PM
Actually, me had to look it up.  :crazy2:

For a long time I had to track and account for the fact that many of my family members (and me too) were on dial-up because before going to the SMF forum type for the site it was all html and many of the pages contained images, so load times could be a killer.
By force of habit I still use JPG, or even GIF before using PNG, but imo PNG makes a better image.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Freddy on January 25, 2010, 10:03:24 PM
My parents still use Dial-up, but they don't use the web much.  But yes, when I go to use it at their place, it seems to be forever loading pages.   It doesn't help that many of the main sites these days have a lot of adverts too - I should probably block the ads now I think of it.

I use JPEG for photos and usually GIF's for buttons and icons.  I can't say I use PNG much really yet, but I expect it will become the more popular eventually.  From what I see though, I agree, PNG does look better than JPG most of the time.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Lesmond on January 25, 2010, 10:56:51 PM
I tend to use png for graphics, I always think its better quality pictures but a higher file size.

QuoteIt gives transparency, but it also gives you the option of anti-aliasing with text. Anti-aliasing can be a web designer's best friend, in my opinion. If you want a logo with text on it, for example, go with PNG and use anti-aliasing. It blends the text so it doesn't look blocky. It's especially effective with smaller text so it's readable.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: IchBin on January 26, 2010, 05:06:46 AM
I think png was intended for the internet. Where as jpg is used for photo type stuff. I don't think a png could look as good as a jpg for photos.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: mystyle on January 26, 2010, 08:35:21 AM
PNG are better than JPEG.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Zetan on January 26, 2010, 08:49:33 AM
Quote from: mystyle on January 26, 2010, 08:35:21 AM
PNG are better than JPEG.

Yup, that settled it.

I had a quick look on Wikipedia;

Quote from: Wikipedia

JPEG (Joint Photography Experts Group) can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5ââ,¬â€œ10 times) with negligible gain in quality.
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fa%2Fa4%2FComparison_of_JPEG_and_PNG.png&hash=a93a7478b2a2e82b2b13e27a84b66e33cc6cae4d)


PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions. JPEG also does not support transparency.

JPEG is a worse choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not. Since PNGs extreme inefficiency in compressing photographs makes it not useful for saving temporary photographs that require successive editing, the usual choice is a loss-less compression format designed for photographic images, such as lossless JPEG 2000, or Adobe DNG (Digital negative). When the photograph is ready to be distributed, it can then be saved as a JPEG, and this limits the information loss to just one generation. Furthermore, PNG does not provide a standard means of embedding Exif image data from sources such as digital cameras, which makes it problematic for use amongst photographers, especially professionals. TIFF, JPEG 2000, and DNG do support such meta data.

JPEG has historically been the format of choice for exporting images containing gradients, as it could handle the color depth much better than the GIF format. However, any compression by the JPEG would cause the gradient to become blurry, but a 24-bit PNG export of a gradient image often comes out identical to the source image, and at a small file size. As such, the PNG format is the optimal choice for exporting small, repeating gradients for web usage.

Source: http://en.wikipedia.org/wiki/Portable_Network_Graphics#Comparison_with_JPEG
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Freddy on January 26, 2010, 02:56:47 PM
Thanks for the responses everyone.   I think from all of this it is fair to say that PNG can easily be as high quality as JPEG, but JPEG isn't necessarily the highest quality.

As PNG is an exact bit for bit copy it can always be guaranteed to be the highest quality possible.  JPEG can  be of equal quality but not better.  And it certainly is not going to be better if it is highly compressed.  And a lot depends on the type of image itself.

I guess the main factor is file size in the real world.  If you don't have to worry about that then you would probably choose to use PNG as a safe bet when you want high quality.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: ZarPrime on January 26, 2010, 02:59:32 PM
Yeah, you're probably right but, if you've ever converted an image file from jpeg to png, you'll see that the resulting file is huge in comparison.  I know, I've done it. ;)

ZarPrime
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Freddy on January 26, 2010, 03:02:21 PM
Hehe, yep I have, they are huge.  I would use JPEG for large images and maybe PNG for smaller images.  My question was just about image quality alone - but cameras mostly seem to use JPG so it can't be that bad, but also maybe PNG has some catching up to do.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: ZarPrime on January 26, 2010, 03:07:28 PM
I once read an article somewhere on the net about some new format that good old Microsoft was trying to push through that would solve the file size problem that png has with images but be better than jpeg but I can't, for the life of me, recall what that was all about at this point, not can I remember what the format was called.  It's new within the last couple of years though.

ZarPrime
Title: Re: Question on graphics (PNG vs JPEG)
Post by: bloc on January 31, 2010, 11:03:58 AM
PNG is better..but its not just one PNG type, there are 2. PNG8 is the equal of GIF really, it has support for 256 colors and renders transparency like GIF does, with a color code you can see through only. Thats why PNG8 is perfect for smaller images, icons, banners etc.

PNG24 is full 24bit color format, its better than JPG, but 10x the size. It has also transparency layer which JPG doesn't have, so its ideal also as icons and smaller images, and especially when you want thinsg to see through it as a blend.

JPG is still the best for bigger web images though, simply because you don't have to wait for a 200-500k files(and if its 10 images of that size, you get the picture). Its NOT lossless, so you cannot use it as storage(well, many digital cameras do use it, but then its typically large images so you gain something back due to the resolution anyway), only on the web.

If you use compression level over 60%(higher=better picture quality) you can't really see the difference unless you zoom in 4-5 times.

So its all about what works best on what type of image.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: Crip on January 31, 2010, 11:34:44 AM
....i make all my Curve theme - main_block / menu_gfx PNG24 ..P-T-S seems to want to save them in that format so i do, yes they are Huge files but look better than any /gif/jpg to me anyway.
Title: Re: Question on graphics (PNG vs JPEG)
Post by: bloc on January 31, 2010, 11:46:55 AM
Yes, and this is the advantage of combining several images into one: you actually get asmaller size than all of them separate AND your browser doesn't have to make x calls to get them.One image and its ready.Saves the server too.