The Different Image File Types

[Evastio]

Does anyone know the major differences between the image file types like JPEG, TIFF, GIF, PNG, and Bitmap? I'm asking this so I can become a better sig/avatar maker.

I barely know anything about them other than PNG is good for keeping pictures exactly the same even after saving them and JPEG is good for pictures you're not going to edit again in paint.

[o_O]

Basically, if you start out with an uncompressed image, saving it as another format will perform a series of operations on the data to achieve maximum quality or compression.

JPG/JPEG is a file format based on storing the averages of regions of the image. It divides the uncompressed image up into blocks and fills the pixels in each block with the average colour of the whole block. This makes it suitable for graphics that have a very large number of colours, like a photograph or screenshot of a 3D video game. It doesn't support transparency, which is the main reason I don't use it. Every time you open a JPEG file, it decompresses and recompresses when you close it. The silly thing about that is that it uses lossy encryption and therefore each time the image is accessed it contains different data. Open/close a JPEG enough times and you'll end up with a blank, one-colour image. You have to do it quite a few times though. :p

GIF is palette-based. That means a portion of the file is dedicated to holding information about every colour that appears in the image. Not surprisingly, you don't really want to use GIF for anything that contains a lot of colours. If your uncompressed image has too many colours, depending on the quality of GIF it will lose quality in varying degrees: The editor will determine the most common colours in the picture and put them in the palette, then substitute all of the extra colours in the image with the closest match from the palette. GIF is only 8 bits per pixel (2 red, 2 green, 2 blue, 2 alpha) so it has a small file size making it good for use in the internets. It supports transparency and animation as well. GIF is suitable for web graphics and logos, etc. but it's not too bad if you don't need a high quality photo.

PNG is like GIF, only 24 bits per pixel, allowing for three times better quality, but has a larger file size. GIF supports up to 256 colours, while PNG supports up to 281474976710656. :p PNG lacks support for animation, but MNG, which is an extension doesn't. PNG has a far higher information:byte ratio than JPG thanks to a better compression algorithm.

TIFF is a flexible file format. You can pretty much do what you want with it. You can bung a JPEG into the data section of a TIFF file and it's just a JPEG by another name. You can use it for vector graphics, which means that instead of storing information about the pixels of an image it stores information about the shapes represented in the image. Naturally, that kind of detail is only useful for simple shapes, like logos. The plus side of that is that vector images are scalable in size without any loss in quality. It isn't very widely used though, which can be a bit of a pain.

Bitmaps are just that: a giant matrix of pixels. A bitmap contains information about every single pixel in the image. Usually, it's a 24 or 32 bit bitmap, meaning it has 3-4 bytes per pixel. When you're talking images of size 1000x1000 (1 million pixels), you have 3 million bytes, which is approximately 3MB. The data to file size ratio is not good enough for me personally, to make the tradeoff.

[crono_logical]

I like GIFs for animation, though I'm waiting for more widespread adoption of MNG :p

[Serapy]

Just make .gif images, they can do animations and support transparency, and can easily make smaller size than any other image types.

[o_O]

My personal favourite is PNG, for the record. :p MNG will be nice when it's more accessible too.

[rubah]

256 color pngs will by and large almost always be smaller than 256 color gifs. Unless it's animated then your png will always be smaller since it doesn't do animation 8)

A rule of thumb: If you have a bitmap image, make it a PNG, you will save somewhere from 50-85% of the file size. If you have GIF, convert it to PNG (if it's not an animation) and you will usually save about -5-10% (yes virginia, there is a negative in front of that five) of the file size (in cases with very small images with very few colors, sometimes GIF comes out smaller, there's not many cases I've seen of that though xD).

[crono_logical]

PNG has superior transparency than GIF as well, nice blending with the background instead of plain old transparent/not-transparent pixels :p

[Mirage]

Face, did you say that a jpeg file is recompressed every time it's closed? Isn't it more correct to say that it's recompressed every time it's saved?

[o_O]

It was my understanding that it was every time the image was opened and closed that decompression/recompression occurred. I could be wrong though, that was off of the top of my head. :p

[Mirage]

If that was the case, they'd get reduced to garbage in seconds on 4chan :p.

[Cleansation]

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.

[Evastio]

So basically TIFF is good for preserving the quality of images but not space while with JPEG it's the opposite?

It was my understanding that it was every time the image was opened and closed that decompression/recompression occurred. I could be wrong though, that was off of the top of my head. :p
So you don't know that for sure? Because if that is true then that means that PNG is much better for sigs than JPEG. Personally, I haven't noticed anything too noticable when changing a sig image from a PNG to JPEG file or when I save a JPEG sig image repeatedly.

[o_O]

Nope, I don't know it even slightly for sure. Mirage's point is valid, and if someone presented both hypotheses to me for the first time now, I'd think that whoever came up with mine was on drugs. It's just what I always thought, but I also always thought it was a bit ridiculous. :p

Note that even if my hypothesis were true, it wouldn't mean that a sig image would be degraded, since the image that is displayed on a client monitor is downloaded to their computer first, not opened on the server. Also, you'd need to do it a stupid number of times. Like, and unbelievable number. :p

Tiff is good for anything really, but not great. PNG is fantastic at being a good image format.

[rubah]

I'm pretty sure the compression is written into the jpeg file. maybe jpeg2000 has some of that weird stuff, but you can just open a file in an editor and it will be the same every time. Which even if it's not written into the file and is written into the algorithm, comes out to the same result so the point is moot.

[o_O]

The more I think about it, the more ridiculous it seems that a JPEG would be decompressed and recompressed every time you open it. Why would a simple picture viewer have the algorithm to compress a JPEG built into it?

I even performed bitwise editing of a JPEG image at university. :p

[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. :p

[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. :p

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

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

[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 (http://www.iaza.com/work/080125C/Signature221353732537-iaza.gif) | PNG (http://www.iaza.com/work/080125C/Signature221353738037-iaza.png) ]

[Serapy]

The snapshot I took had around 100mb :p

[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.