Eyes on Final Fantasy Forums > Reference > Help Forum > The Different Image File Types

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

PNG image		The first image is a control image, in PNG format. The filesize is 20.25KB, and it is saved without interlacing.
JPG image with similar filesize to PNG image		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.
JPG image with similar quality to PNG image		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.

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.

PNG image		Here we have a lovely image of Spiderman in PNG format. It has a filesize of 153.83KB.
JPG image		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.

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]

Originally Posted by 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.

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:



(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!