image formats

[Willemina]

Hello.
I've been preparing some graphics for website I am preparing for my client. But what file format should I use for them? The ones I know of are .jpg, .png and .gif. But which one is best?

[ryanhellyer]

That entirely depends on what you are using the graphics for. There is very little use for GIF files these days as PNG has replaced it for most tasks.

JPG files are only suitable for large images with lots of textures and detail. The images in JPG files are compressed using a lossy format, so some loss in quality is observed on converting to this format. However the loss of quality is compensated for by a huge drop in file size for images containg lots of detail. Photographs are almost exclusively published online as JPGs for this reason.

PNG files are very effective for displaying text or very small photos. The file format is much newer than both JPG and GIF and as such features a much better compression method. PNGs are saved in a lossless format so there is no loss in quality on converting to this format. Although there are options to save in PNG8 which features a colour pallete like GIF, if you convert an image with 20,000 colours to a PNG8 file with only a 256 colour palette you will notice a considerable drop in quality, however if you keep the existing colour palette then there will be no loss in quality at all.

GIF files are useful for creating small animations which repeat over and over. They also allow for transparencies by making one of the colours in their (maximum) 256 colour palette transparent.

The PNG format can also create transparencies and supports an alpha layer which allows for semi-transparent portions. However support for this format is not available in <IE6 so it isn't much use except for in particular circumstances. Once the need to support IE6 is gone, alpha level transparencies in PNG format will be very useful.

Another format you can (in theory) use is MNG, which is a video format similar to the PNG format for images. However there is minimal/zero support for this format in web browsers so it is virtually useless. Adobe Flash is the best option for videos on the web these days.

[BigAlReturns]

Originally Posted by ryanhellyer

The PNG format can also create transparencies and supports an alpha layer which allows for semi-transparent portions. However support for this format is not available in <IE6 so it isn't much use except for in particular circumstances. Once the need to support IE6 is gone, alpha level transparencies in PNG format will be very useful.

PNGs can be very useful because of their transparency, but as you've said, IE6 support is a problem. There is a javascript solution to make PNGs transparent in IE6 if you have no other option, but it's a bit long winded, and a pain in the backside! This is code I've found to work for me:

html head
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

pngfix.js
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

[ryanhellyer]

Thanks BigAl. I've seen that PNG fix elsewhere too, but I haven't found a use for it yet. I think it will become quite popular in a short while simply due to the lack of support for IE6. By placing the script in an IE conditional comment like you have, there is no real negative effect for modern browsers and those using IE6 will still be able too see the image as intended.

I'm using IE6 right now ... stuck using it on an old work machine.

[BigAlReturns]

Hopefully we won't have to use fixes like that too much longer - I'm not sure what the latest figures are but IE6 usage is definitely falling. I think large networks are pretty much the only places it's still used, and they are always going to lag behind. I know my university only made it to IE7 a few months ago.

[ryanhellyer]

I often get stuck using old versions of IE on scientific equipment. IE6 is okay, but IE5.5 and older are a nightmare for even basic things. Just checking my email can become a chore due to all of the bugs in it.


I've noticed the occasional PNG transparency too. They usually just look ugly, but if people start using them for situations in which you need to be able to see the content underneath the transparency it could become a serious accessibility problem for those still using antiquated web browsers.

[Splitter]

Rightly said... IE6 does pose a problem for png. you may get a bluish background for transparency and so gif is still a tiff better...reason being half the world uses XP and that too pirated :P so IE6 is what remains.

[Willemina]

Hello everyone,

My friend keeps saying that GIF files can only be 256 colours and not any more than that. But I thought they could have lots of colours, not just a few.

Are they correct? Or are they totally wrong?

thanks very much for your kind response


Willemina,

[ryanhellyer]

No, they are most definitely wrong. The 256 colour limit of GIF files is a common misconception.

Here is a 256 colour GIF image:


And here is a corresponding 32697 colour GIF:


The reason GIF files with more than 256 colours aren't used is due to the shear size of the files. The 256 colour image above is 53 kB, whereas the 32697 colour one is 180 kB. The equivalent PNG file for example is only a mere 13 kB. You are generally better of using a low compression JPEG than a high colour GIF, the loss in quality is usually worth it for the corresponding decrease in image quality. Although obviously a PNG is the best option to use as long as you don't require alpha level transparency.

These larger GIF files also tend to render oddly/slowly in browsers.