Image files: .gif or .jpg?

What's better?

[specter]

Hi everyone,

Is there any difference as regard of the loading time between a page with .gif content and a page with .jpg content?

Your replies will be appreciated.

Sincerely

[kpaul]

.gif files are best for line drawings - think clipart, cartoons, etc.

.jpg files are best for photorealistic images

best thing to do, imho, is get a graphics program that let's you see a preview of output and play around with the setting while keeping the above in mind.

also, i'm pretty sure the only one to do animation is gifs.

hope that helps...

[Farix]

I would actually look at PNG first instead of GIF. More often then not, PNG produces a smaller file size, which means faster transmission time.

[cmatcme]

I agree with Farix that PNGs are better than both of them but if you have to choose between jpgs and gifs, choose jpgs for small size and good quality, unless you want animated images, then you'd have to choose gifs.

[specter]

Thanks for your replies guys!

A last question:

Is there any compatibility problem with .png files?

I mean,is there the risk that a visitor with a normal PC could not be able to view them?

again thanks

Sincerely

[Farix]

Define "normal PC." The only browsers that would have trouble with PNG images are really old browsers 4th generation browsers.

[choster]

Actually, Netscape 4.5 and up and MSIE 4.0 and up both support PNG.

if you have to choose between jpgs and gifs, choose jpgs for small size and good quality, unless you want animated images, then you'd have to choose gifs.

This is misleading at best. The color depth and complexity of the image determine which format yields the superior quality/size ratio, not to mention the dimensions of the image itself-- it is one thing to achieve adequate quality on a 2px by 2px image by another entirely on a 200 by 200 or 20000 by 20000.

[specter]

I mean PC as of Windows 98...

[rocknbil]

As you can see there's a lot of variables in deciding the file format. I go with whatever creates the smallest size and the least image degradation. Sometimes it is one or the other. Depending on the photo, some images actually do better as a .gif than a .jpg.

Another consideration: if you're merging an image with a background, .gif may be the only thing that will match in some browsers/platforms. Let's say you have an image with a "frilly" border top/bottom that can only be rendered as part of the image. But to save file size, you want to position it so it's in a CSS-markup background color that matches what's outside the image:

---
bg
---
~~~
image
~~~
---
bg
---

You may get this to work on many browsers in PC, but almost always on Mac IE and Safari, the two colors - the image rendering and the page BG - will differ. The only way to get an exact match is to limit the color palette of the image via a .gif.

Another picadillo: when you render a jpg, it optimizes the image with best-guess mathematical interpolation. Take the same scenario above with a white BG: bg/border/image/border/bg. The white areas of a .jpg will render with blotchy dots at all but the highest resolutions (which defeats the purpose.) The only way to resolve this is to use a .gif and force black and white (forces whites to stay white.)

So besides file size and quality, you will encounter technical restrictions as well that will determine what format is best.

[specter]

Very instructive and enlightening reply, Rocknbil.

You've exposed many misknown collateral effects related to the file choice.

Thank you very much.

Sincerely

[supermanjnk]

last i checjed ie didnt support transparency in pngs

[choster]

IE/Win supports binary transparency (like you can use in GIFs). To use alpha (variable) transparency you need to apply a proprietary filter, which only works >5.5. IE 5/Mac supports alpha transparency natively.