The Different Image File Types

[Mirage]

PNG is the superior format, quality and layers... What more can you ask for ? :p

Gif's are good for animation and stuff but the quality sucks pretty bad for non moving images.

Jpeg's are just crap but small file size (like jpeg) and for some reason the most commonly used format.

The reasons are quite obvious. First, you'll have trouble telling a high quality JPEG compressed photograph from one stored in PNG. Second, photographs don't really need layers. Third, a 6 MP PNG image would be gigantic. They would take forever to send over the internet over the average internet connection, and you'd only fit what, 20 images on a 1 GB memory card? Something like that.

Actually, a bit more. I just did a test, and i ended up with 13 MB for a 6 MP image.

Don't get me wrong though, PNG is good, but it's not practical to use in all situations. I use PNG for my own graphical works, but i convert them to JPEG when I upload them to the internet.

[o_O]

Did you also check the filesize of the same image data compressed as a JPG?

Here's a little experiment I did. Below are three images of a ball that I made in Photoshop, then saved with different compression to compare size and quality.

<table cellspacing="0" cellpadding="1" style="border: thin white solid"><tr><td width="200"><span style="font-size: 14pt;">PNG image</span></td><td><img src="http://img.photobucket.com/albums/v92/ifiredanuke/ball-png.png" /></td><td>The first image is a control image, in PNG format. The filesize is 20.25KB, and it is saved without interlacing.</td></tr><tr><td><span style="font-size: 14pt;">JPG image with similar filesize to PNG image</span></td><td><img src="http://img.photobucket.com/albums/v92/ifiredanuke/ball-jpg-pngsize.jpg" /></td><td>This image is a JPG image saved with the aim of having the same filesize as the PNG file. Notice that there are serious artifacts around the edge of the ball, where I applied a gaussian blur, and around the edge of the specular light reflection. There is significant banding across the ball as well, where it should be a smooth gradient.</td></tr><tr><td><span style="font-size: 14pt;">JPG image with similar quality to PNG image</span></td><td><img src="http://img.photobucket.com/albums/v92/ifiredanuke/ball-jpg-pngqual.jpg" /></td><td>This image is a JPG saved with the aim of being of ostensibly similar quality to the PNG. It was saved at the highest quality allowed with Photoshop. In spite of this, there is still significant banding across the ball, and artifacts are present around the edge and on the reflection, though greatly reduced. Additionally, the filesize is 33.15KB, which is larger than the PNG by a factor of around 1.64.</td></tr></table>

Clearly, the PNG format is superior here. Something to note is that the image contains very few colours (indeed only one - red).
My next test is of an image of a different nature. It only needs a comparison between two images to draw conclusive results.

<table style="border: thin white solid" cellspacing="0" cellpadding="1"><tr><td width="200"><span style="font-size: 14pt;">PNG image</span></td><td><img src="http://img.photobucket.com/albums/v92/ifiredanuke/spidey-png.png" /></td><td>Here we have a lovely image of Spiderman in PNG format. It has a filesize of 153.83KB.</td></tr><tr><td><span style="font-size: 14pt;">JPG image</span></td><td><img src="http://img.photobucket.com/albums/v92/ifiredanuke/spidey-jpg.jpg" /></td><td>This is the same image, saved in JPG, at the maximum quality allowed by Photoshop. Despite this, the filesize of this file is 109.32KB - That's smaller than the PNG by a factor of about 0.71. You can easily see that there is no appreciable difference in quality here.</td></tr></table>

We can clearly see that in the second image, JPG is clearly the superior format.

This enables me to illustrate the conclusion I was hoping for:
- The palette-based nature of the PNG format makes it great for images that contain a low amount of colours, since the header of the file can be minimised in size. Its compression algorithm is also very good for preserving gradients. The first image satisfied both of these qualities. When we tested the second image, we found a much greater filesize, since the header of the file needs to store information about every colour that is present in the image.
- The JPG format failed big time on the first image. You can readily see how banding occurs: the grid which the image is divided up into is averaged out to produce a single colour for each block of the image. The gradient is vertical, so tracing the grid blocks horizontally across the ball gives you the same average for any row of blocks. Therefore, the constant colors turn the gradient into a stepped pattern loosely matching the original gradient. The second image, however, is perfect for JPG, since the grid blocks don't contain very uniform image data. The filesize is lower than the PNG because it doesn't care about the palette, ie. more colours is no hinderance.

P.S. Ignore that red circle on the Spiderman image.

[Mirage]

Yes, actually, I did. In JPEG at high quality (75% if you use save for web, probably around 9-10 if you use the regular save as feature), the picture was about 3.7 MB, I was only able to tell any differences when I repeatedly switched between the two, and it was usually just a some displaced pixels in noisy areas of the image. Keep in mind that this was a high res scanned image from a CD cover, and therefore there were rather big amounts of noise, but in return there weren't as many different colours as in a regular photograph.

I was going to do some more tests by using my camera and save the images as raw, uncompressed data, but I can't find the battery charger ;/.

[Serapy]

Gif's are good for animation and stuff but the quality sucks pretty bad for non moving images.

It's actually good. As a matter of fact, you can control how graphic should look in a GIF format, basically making sure that your created graphic match the capabilities of the GIF format and it will, of course, look brilliant. If your graphic were originally for higher capabilities than GIF, and when you converted that graphic to GIF, it will look bad.

For sigs and avatars, I prefer GIF than PNG because PNG uses more memory.

PNG and JPEG are not that of a big difference execpt in some situations, but generally even if there was, it's quite subtle to see it.

[o_O]

The main difference between JPEG and PNG (or GIF) is the way they deal with the image data. PNG uses a palette and JPEG samples the image in blocks. It leads to quite substantial differences in quality. Take an avatar, for example, back when you could only have it at a size of 60x60. If you had small text on it, you could pretty much forget about being able to read it in a JPEG, while in a PNG or GIF it would be clear.

You're right in saying that it's generally not appreciably different though. Between all of the image formats discussed in this thread, there aren't really any serious differences in quality or viewing experience as far as distribution on the internets goes. It's when you introduce formats like PSD, AI, SVG or EPS that you see real differences.

[rubah]

Gif's are good for animation and stuff but the quality sucks pretty bad for non moving images.

It's actually good. As a matter of fact, you can control how graphic should look in a GIF format, basically making sure that your created graphic match the capabilities of the GIF format and it will, of course, look brilliant. If your graphic were originally for higher capabilities than GIF, and when you converted that graphic to GIF, it will look bad.

For sigs and avatars, I prefer GIF than PNG because PNG uses more memory.

PNG and JPEG are not that of a big difference execpt in some situations, but generally even if there was, it's quite subtle to see it.

Show me a 256 color GIF, and odds are I can show you a 256 color PNG that is smaller xD

[Evastio]

Thanks for the comparison pictures o_O!!!

That explains why it was so hard to use the flood fill tool on a hand drawn paint image I made after I saved it as a JPEG. I guess PNG is the best for not having pictures altered automatically after you save them.

Also, you basically use GIF for images without many colours and JPEG for images with a lot of colours?

[rubah]

you use GIFs for images that move, jpegs for photographic images, and pngs for everything else>:[

your sig as a 256-color GIF or PNG:
<img src="http://www.snowy-day.net/stuff/others/evastio-sig.gif"/>
<img src="http://www.snowy-day.net/stuff/others/evastio-sig.png"/>

(hint, the PNG is 10kb smaller)

[Serapy]

>_> rubah When I took a SS of my whole desktop while it was in a PNG format, I saved it and checked the size -- whoa!

[crono_logical]

We could argue about the good and bad things about the different formats forever, but I'd say

you use GIFs for images that move, jpegs for photographic images, and pngs for everything else>:[

is the general rule of thumb for final images for now (until mng takes off) For images still being processed or to edited, stick with a lossless format like png/bmp or native format of your image editor like xcf/psd to avoid quality loss - size shouldn't matter in this case

Once mng is well supported, gif should be considered obsolete and no longer used

[rubah]

serapy, (let me emphasize this again), the PNG snapshot you took has millions of colors in it. Okay. Those are going to be big.

However! PNG has another mode, which is identical to GIF in terms of looks and function (transparency), except it tends to be much smaller, except in a few cases (very few colors, very small images, a lot of horizontally-identical data). those cases and animations are the only time GIF should be used, and animations only if you want to be consistant.

This is called 'PNG-8' in photoshop and I don't remember what in paint shop pro xD You can also use Iaza on-line to save them in the paletted mode.

Munty, MNG has to wade through animation shop first. People have been using it for a decade probably and its 'native' file format is "mng" (not actual mngs though I don't think)
I don't know if MNG will ever really come through since if you can't do it with a gif to satisfaction, people will revert to avi or flash or wmv or mpg. PNG has barely gotten rooted in the public mind.

[edit- evastio's sig from IAZA. The file sizes are larger than mine since it used dithering and I didn't, but the PNG is still smaller xD A 256-color png was gotten by choosing gif first and then PNG after that.
GIF | PNG ]

[Serapy]

The snapshot I took had around 100mb

[Evastio]

That PNG-8 format sure sonds nice.

But I'm guessing there's no way you can use it in MS Paint though.

[rubah]

use on-line things then, evastio :] iaza.com is what a hundred dollers the world over use to turn their ms paint creations to transparent GIFs.