GRAPHIC FILE FORMATS FOR THE WEB :: GIF vs. JPG ( ...and PNG?)

Photoshop, Fireworks, CorelDraw, Illustrator, Paint Shop Pro, Freehand, etc... No matter what tools you use to develop, manipulate and prepare images for web pages, there are two main image formats for web graphics - .GIF or .JPG. GIF is the more widespread of the two but both have their strengths in particular situations.

GIF

(GIF = Graphic Interchange Format)

Best used with: images with areas of flat colour - cartoons. logos, line-art illustration etc.

Specs: 8-bit/256 colours

Compression: Reduce file size by reducing bit depth/no. of colours. Using an "adaptive" palette means that each image will use a smaller colour table using only the colours contained in the image - not the full spectrum of all colours available.

1: 4 colours =0.4k -- 2: 16 colours =1.3k -- 3: 128 colours =2.4k

JPG

(JPEG = Joint Photographic Experts Group)

Best used with: photos and images with smooth gradients.

Specs: 24-bit/millions of colours

Compression: Expressed as a quality percentage - does not refer to colour table - "Lossy" compression ( i.e.: some info is discarded through compression)

Transparency - NO - not supported

10% Quality : File=1.5k -------------- 70% Quality : File=5k

GIF Interlacing = JPG Progressive scan

When images are loaded in a web browser, they normally load from top to bottom, line by line, at full resolution.

By choosing to produce Interlaced GIFs and JPG's with Progressive Scan when preparing web graphics, the result will be that browsers will display a number of versions of the image as it loads i.e.: when 12.5% of the image has loaded, a very rough version will display - this will be refreshed when 25% of the image has loaded, when 50% has loaded and then finally the image will reload at full resolution when 100% of the image information has loaded. This effect may not be noticeable on smaller images which may load too quickly.

Using Interlacing for GIFs and Progressive Scan for JPG is a good idea because it gives the viewer an idea of what they are waiting for - a button for navigation or just a logo - and can make the decision whether to move on or wait for the image(s) to load.

Design strategies for web graphics

One of the "black arts" of web design is finding a balance between image quality and image file size. For both JPG and GIF files the amount of compression will vary for each individual image. Smaller images mean faster download times and less waiting for the user. Many of the newer graphics applications allow comparison of multiple image quality settings to assist in making the crucial size/quality decision.

• As a guide, many home computer users accessing the net through a standard 56k modem will get download speeds of between 2k and 5k per second - so an image 30k in size will take somewhere between six and fifteen seconds to download. A good rule of thumb is that a HTML page with all it's images should not exceed 40k to 60k in size - this is particularly important for the first pages of a site - if viewers have to wait more than 20 seconds they are likely to move on. (It is also true that once a viewer has moved further into a site and is interested in content then they will be prepared to load larger material - it is good practice to state file sizes for larger items - eg: "Flash movie - 180k" or "PDF format document - 210k")
  
  
• Don't make images larger than they need to be - the more page area taken up with images - the larger the page size
  
  
• Crop images as close as possible - avoid extra unnecessary space around images
  
  
• Avoid large graphics if possible - colour can be extended over a page through the use of background colours for instance.
  
  
• Choose the appropriate image format - a photo in GIF format will be larger than a JPG of similar quality - conversely, JPG's don't like areas of flat colour and GIF with a limited colour pallete would be smaller.
  
  
• Slicing a large graphic into smaller individual pictures allows for greater accuracy in colour matching since each GIF will have a smaller palette of colours and JPG formatting can be accurately targeted to specific parts of the larger image.
  
  
• Work at 100% - do not resize graphics using HTML height/width tags or by stretching it in Dreamweaver etc.. If your graphic is not the right size - go back to your graphics program ( eg: Photoshop, Paint Shop Pro, Fireworks, etc.) and make it the right size. Why? (asks Randall) If your image is larger and you use HTML to set it at a smaller size, you are downloading more information than you need - therefore the page loads slower. If your image is smaller and you use HTML to set it at a larger size, then it will appear pixelated and you will lose image quality - also the results will be unpredictable on different platforms.

PNG - a third option?

Since around 1995 there has been an alternative image format being proposed for the web - the PORTABLE NETWORK GRAPHIC or PNG format (pronounced "Ping"). It promises to replace GIFs with better tech specs and greater flexibility.

The big issue which has blocked PNGs from becoming widespread is BROWSER COMPATIBILITY. Netscape four supports them with a plug-in rather than in-line like GIFs, there are issues with transparency in version 4 Internet Explorer. These issues have mostly been addressed with more recent browser versions but it has still been a little too soon to be sure that ALL web surfers could view them. This format should become more widespread over the next few years but people have been saying the same thing for a couple of years now so... use with caution.

Briefly some of the features of PNG files include ; variable transparency levels; embedded text (for descriptions or copyright info); gamma (brightness) correction; faster interlacing; 8 to 48 bit info levels; lossless compression; better compression than GIF. Note that FIREWORKS uses PNG files as it's native format.

HOMILY

Until fast broadband internet connections become widespread, web designers will need to continually whittle down the size of their graphics and total web page sizes. Note that there is a strong connection between fast download times and the top fifty most popular web sites - the really successful sites like Amazon, Yahoo, MSN, AltaVista etc. all have minimal amount of images on one page - this is not to say that designers should not use graphics - just that we should use them strategically, efficiently and with intent.

{REF: "Web Design in a Nutshell" Jennifer Niederst, O'Reilly & Assoc. 1999}