Website Graphics

If you are reading this page it is likely that you are still learning about website graphics. Many people plaster their first site with free animated gifs free clipart and other free graphics, but there is more to a well-designed website than the graphics.

OPTIMIZING GRAPHICS

When designing a website you should only use .jpeg (.jpg) and .gif graphics for your images. These are the two file formats universally used on the web - basically because they take up less space without much loss of quality. The .PNG format is slowly coming in but is not universally recognized by all browsers yet.

To capture images to use on your website, you need a scanner or a digital camera - OR you can get free graphics from a number of websites - however be prepared to spend a long time online looking for the right images. You have to wade through a lot of junk in the process.

MAKE YOUR OWN GRAPHICS

If you have a good graphics program such as Paint Shop Pro 5 - download the free trial from http://www.jasc.com - or Fireworks from Macromedia - http://www.macromedia.com - you can design your own graphics.

You will also need a photo editing program such as Photoshop - however Microsoft Photo Editor is good for basic operations such as saving a photo in a JPEG or GIF format.

OPTIMIZING YOUR IMAGES

This is where an image is reduced to its smallest file size while retaining its best quality. Use the following guidelines to decide whether to use JPEG or GIF.

RULES FOR WEBSITE GRAPHICS

1) USE JPEG's FOR PHOTOS AND GIF's FOR LOGOS etc..

A basic rule of thumb is save the images in .jpeg format for photos and use the .gif format for your logos, and other graphics. Understanding the difference in how these file formats compress an image is important in designing good webpages.

Generally, JPEGs are used for photos and GIFs for other graphics on the website, such as the logo.

2) DO NOT USE LARGE FILE SIZES

The second thing to remember is that the larger an image is the more KB it will take up, so don't fill your page with photos that are 600 x 480 pixels that take up the whole screen - most visitors will not wait for such large graphics to download.

You need to optimize your graphics to take up less space - anything over 30 KB takes too long.

In considering which type to use there are also other considerations however. For example GIFs can be transparent, interlaced, or used for animations. JPEGs can be progressively rendered and use a compression method that does not reduce the number of colours in an image - which is why they are better suited for photos.GIFs only support a 256 color palette and so are generally better when there are only a few colours in an image.

Use JPEG for photos, and GIFs for images with only a few colours - and if you have an image with a lot of colours, but not a photo, then save it as both a GIF and a JPEG and see which gives better results.

OPTIMIZING A JPEG

If you are optimizing a JPEG image you need a program that can save your scanned image or digital photo as a JPEG file - Microsoft Photo Editor can do this as well as the more advanced programs such as Photoshop. What you do to compress the photo is click "Save as" and make sure "jpeg" or "jpg" is selected in the file type box. Then you have an option as to how much you want to compress your file. 25 - 35% is usually enough - any more might result in loss of too much quality - however you need to experiment to find which is the best compression for each photo.

OPTIMIZING A GIF

If you are optimizing a GIF you need to open it up in a program such as Paint Shop Pro and clear up the image so that it uses fewer solid colours while retaining its quality. The fewer the colours, the smaller the file size. Working on your own gifs can be time consuming and you have to be prepared to spend some time learning how to use your graphics program.

Whatever you do, make sure you optimize your images to take up less space - and dont include any unneccessary images. You can achieve quite good colour effects by using tables with different background colours.

VECTOR GRAPHICS vs BITMAT FORMAT

Vector Graphics are images that combine mathematically rendered lines, and curves containing position and color information. This makes these images resolution-independent - i.e: they can be displayed on screens of varying resolution without losing any information and therefore without a loss of quality.

This means that the graphics can be resized or re-positioned with speed. Using vector graphics, a layout will remain viable on multiple display settings and can be automatically resized to fit the screen.

Vector graphics are also good for animation because the same graphic can be used multiple times with one set of information about the graphic and another about the positioning etc... so there is no need for the same information to be contained inside each frame.Macromedia Flash is based on vector graphics.

Animated gifs on the other hand will take up more space because each frame is a separate image and the gif needs to redisplay any changed information in each frame..