JPEG vs gif vs PNG for header image

I am creating a website and I want to have a header image that contains a logo and the title of the website. The image I have created was originally in PNG format. However I saved it in gif format because it is such a universal format and is such a small file size. However, the image ends up looking very crude. Should I try saving it as a JPEG file? I would like to save it as a PNG, but then I consider those older browsers that may not support that format. Which one is the best for this purpose?

You should definitely spend more time on learning the image format features, pro’s and con’s, so you avoid repeating false myths. I’d recommend reading this thread - Is Using PNG Files Common?

For different header images, different image formats (PNG or JPG) should be used. For example for a photo header, JPG would be probably more efficient.
But you can also use a combination of both as well - background photo in JPG and clickable logo in PNG format.

Your biggest issue should be file size and fidelity. PNG works great for simple graphics like logos, gradients, text, images with few colors in them. JPG is best for photographs.

use photoshop to save the image in GIF or in JPEG format.
I always use photoshop and my images are in GIF format are are so clean and good to see.

I use GIF for very basic vector graphics or images which do not require a high number of colors.

I use JPEG for photographs which require good compression levels but can sacrifice some quality.

I use PNG for high quality images, gradients and anything which needs high colors with compression.

You could drop GIF and use PNG for both. A properly configured PNG can out do a GIF easily. I always run everyone of my PNGs though PngOptimizer just to make sure.

ditto! :agree: I only use gifs for animations for now!

PNG is the best choice when there are large areas of “flat” (i.e., the same) colour in an image, such as with a text-based logo on a white background. You also have to use PNG if you want to have transparent regions so that the stuff behind shows through. Note that it is mainly the transparency feature of PNG that has not been well supported by some browsers in the past.

JPEG is the best choice when you have a lot of fine detail and lots of subtly different colours in an image, for instance in a photograph. JPEG uses lossy compression (so that some detail is actually lost, or “smudged over”) in order to achieve a low filesize, but this is not noticeable if it is applied in moderation.

You should always remember that it’s 256 bit transparency that caused these problems, not the GIF-like 1 bit (indexed) transparency. So the 8-bit PNG were “safe” even at that time.

Animated gif’s make me want to cry most of the time :lol:, but I do agree PNG is a good replacement for GIF, and sometimes even JPEG. :wink:

I just use jpeg mostly. I only use gif if it is a basic vector image, usually consisting one just one or 2 BASIC colors. I never use png for anything (not even worth the time IMO, but that is just me).

You can use PNG for almost every image on your site and have the image display just as well with no bigger file size than the alternative. There are only a few situations (sich as animated gifs) where an alternate format is required. The PNG format was designed to be the web image format whereas GIF and JPeG were originally designed for other uses and were borrowed for the web. The correct format to use for each image is the version that looks right with the smallest file size - in most cases that will be PNG.

png - works well especially with transparency but has issues with IE6 support cause ie6 doesn’t support its transparency ( I typically just use this now a days for designing cuase i really don’t’ care about ie6 anymore).

gif - is great just make sure your image have to may colors/gradients or it will look poor. ie6 also supports its transparency.

jpeg - works just fine just doesn’t support transparency which is the only problem.

IE6 supports PNG8 transparency just fine. It is PNG32 transparency that IE6 doesn’t support.

felgall - hmm interesting i didn’t know that never tried png8. thanks for extra info

PNG Knights on their never-ending crusade fighting the oh-so-bad Myths. :tup:

Um, interesting.

GIF is usually the best format. Strange that it would be odd looking. I would try JPEG before PNG. Maybe you need to make sure the pixels are set correctly in the GIF format. I always prefer GIF or JPEG.

No, it isn’t.

While the most reasonable choice would be PNG or JPG. Not GIF :slight_smile:

I only use PNG or JPG, i never use GIF… no need, to be blunt, it’s crap. And its a shame so many open source programs use the poxy file format.

I use a combination of JPG and PNG.