2

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

Daniel May
  • 8,156
  • 1
  • 33
  • 43
  • You can read a complete comparison of file formats here: http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg/7752936#7752936 – Chuck Le Butt Feb 06 '13 at 21:39
  • As a general rule, I only use GIF's if I need an animation. From my experience, PNG files are best-suited for websites and _I've been told_ that if you need high-quality photos, then JPG/JPEG's are the way to go. – jay_t55 Jul 30 '14 at 14:06

8 Answers8

8

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.

Daniel May
  • 8,156
  • 1
  • 33
  • 43
  • It's still not fully supported, since IE still has serious problems with the alpha channel. IE8 also apparently gets the gamma completely wrong. – Agos Dec 10 '09 at 12:07
  • 2
    "Nowadays, PNG is pretty much the most commonly used file format for images on modern websites." O RLY? JPEG is more commonly used for photographs (due to it's impressive size:quality ratio) and PNG is making inroads on GIF for everything else. But by no means is it the most commonly used file format. Yet :) – Olly Hodgson Dec 10 '09 at 12:16
  • 1
    From what I've seen, on **modern** websites developed in the past ~few years, I'd say it's used a lot more commonly for images than JPEG or GIF. JPEG may be used for photographs due to it's impressive quality options, but it's not as commonly used for images in web-development as PNG - from my experiences. – Daniel May Dec 10 '09 at 12:18
  • There's more information on JPEG vs GIF vs PNG compression methods here: http://www.ou.edu/class/digitalmedia/articles/CompressionMethods_Gif_Jpeg_PNG.html – Daniel May Dec 10 '09 at 12:20
  • @Daniel: just trying to do my bit to help out. :) – AnonJr Dec 10 '09 at 13:54
5

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    This comparison between GIF and JPEG is true; however, PNG has the advantages of GIF. In addition, PNG can support more than 256 colors and a full 8-bit alpha channel (partial transparency), and it almost always compresses a given image smaller than GIF. In general, photographic images do better as JPEG and everything else is a good candidate for PNG. Don’t re-save a JPEG as PNG or GIF, though! JPEG is “lossy,” and the artifacts it introduces will cause the “lossless” PNG or GIF algorithms to produce a much larger file. – musicinmybrain Dec 10 '09 at 11:47
  • +1 very true, and added a reference to your comment in my answer. I am still hesitant to use PNG, a reflex from old times when it was only partially supported, but those times are long gone and with IE6 nearly dead, PNG is indeed the format of choice for any scenario. – Pekka Dec 10 '09 at 11:51
2

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.

Agos
  • 18,542
  • 11
  • 56
  • 70
  • It’s worth noting that a PNG (assuming RGB mode, since PNGs can also be 256-color) can generally compress a gradient very well. (Even though the gradient is not a solid color, it is “regular” enough that PNG can be effective.) – musicinmybrain Dec 10 '09 at 11:49
1

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.

Tjofras
  • 2,116
  • 12
  • 13
  • This is typically only a serious problem if you’re trying to match a solid background color in a non-transparent PNG to a HTML/CSS background color. However, it’s definitely something worth being aware of! – musicinmybrain Dec 10 '09 at 11:51
1

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!

Richard Lucas
  • 630
  • 1
  • 4
  • 15
1

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

Darren
  • 170
  • 1
  • 7
  • PNG-8 supports alpha transparency. Photoshop has incomplete PNG support. Use pngquant or Fireworks instead. – Kornel Jan 12 '13 at 22:40
0

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?

Community
  • 1
  • 1
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
0

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.

WackCSS
  • 33
  • 1
  • 6