Is there any downsides to using GIF as format of all images and pictures on website?

Question

I noticed when I saved my menu background image from jpg to gif that gif takes almost one fourth of the size that jpg does.

jpg = 25kb gif = 7kb

Is there any downsides to using gif?

Its GIF 256 colors BTW. NOT interlaced. Not transparent.

Just want to be sure!

Thanks

Answer 1

To answer your question: NO. It's perfectly acceptable to use GIF files over JPEGs. Each format has its own pros and cons.

You can read about them here: PNG vs. GIF vs. JPEG vs. SVG - When best to use?

Answer 2

If you're not using it for interlacing and transparency, the only real upside would be the compressed file size.

However, you may want to look into using the PNG format. You can find an overview of the three file types here (Surrey University)

Over the past 5 years, PNG has been phased in to the web image standards, developers and designers always knew it handled compression better, but it wasn't fully supported by all browsers - causing it to be overlooked until said browsers were upgraded.

Nowadays, PNG is pretty much the most commonly used file format for images on modern websites.

Answer 3

A few people have mentioned the PNG format. Its worth mentioning there are two different types of PNGs, 8-bit and 24-bit. Both types support transparent pixels, however the 24-bit variant supports alpha transparency.

Generally 8-bit PNGS will be slightly smaller than their GIF equivalents. However large 24-bit PNGs have quite large filesizes if they use alpha-transparencies.

It really all comes down to what is the right format for the image. Some will compress/display better in different formats than others. I wouldn’t try and use one single format, such as GIF for all images and pictures on a website (the original question) unless the images were all IU related.

You really need to understand a little about how these different formats work, rather than choosing one over the other. There is a very good article on the pros & cons of gif/jpg/png formats here: http://www.websitetemplatedesign.com/oscommerce_tutorials/printer_136.shtml

Answer 4

There are no downsides to this as long as the graphics look good.

For menus and line drawings - in general, any mages with large homogeneous areas, i.e. many adjacent Pixels with the same color -, GIF (or PNG, note musicinmybrain's comment below) is usual the best choice as it compresses stronger, and the results look better (especially because of sharper edges).

For heterogeneous images like photos, GIFalmost always loses in both size, and quality, and JPEG is the better choice.

Answer 5

As you say the gif can only handle 256 colors, if you don't need more then that gif will be a good choice.

I would recommend gif over png because there are some issues with color profiles in webbrowsers and pngs. You might end up with png colors not matching the css color.

Answer 6

GIF it's not designed for photographic material, so a big photo comes out better and smaller in JPEG, but tt's probably more than apt for interface elements such as buttons, dividers, borders, etc.

The only caveat that comes to mind are gradients: even on a small area and with 256 colors, GIF will likely show visible banding. This is often very subtle and not a big issue, but you may want to check it, especially if you have lots of gradients and/or hate banding.

Answer 7

I'd second what Daniel May is saying about using the PNG format.

Although if you are solely concerned with image size and don't have a specific reason for using GIF remember that you can tweak the quality of a JPG file to turn a 25kb JPG into a 7kb JPG!

Answer 8

As far as I am aware, if the image quality looks acceptable then go for the smallest image format you can find. You might find you save even more size using PNG.