Graphics and Images Tutorial

[sukishan]

Graphics and Images Tutorial
One of the biggest complaints with the Internet is that web pages load too slowly. People don't want to wait while graphics with large file sizes load. To overcome this problem graphics need to be compressed.

Graphics for the web are usually in 72dpi resolution this is a much lower resolution than used in the print industry.


The most common graphic formats supported by web browsers for compressing graphics are JPEG, GIF and PNG.

JPEG - This format is usually used for photos where there are lots of subtle colour changes and detail. The JPEG format is a lossy, 24-bit colour, compression format that generally gives a smaller file size and better quality for photos.

GIF (Graphic Interchange Format) - This compression format is usually best suited for graphic's that have mainly flat colours. The GIF file format is a loss-less compression format that allows you to select a palate of up to 256 colours.

PNG (Portable Network Graphics) - The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format. PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). Although PNG is much better than the GIF format, until IE7 was released Internet Explorer didn't fully support the PNG Format.

When choosing colours for your graphics it is best to use 'Web Safe Colours' of which there are 216. These are colours that have been specially selected, as they will look the same on different systems.

Larger graphics take longer to download, so try to make your graphics as small as possible. If necessary use thumbnails, these are smaller images that link to larger versions of themselves. This way if the user has the choice of waiting the extra time if they want to see the image in more detail.

Use the 'ALT' tag when you use graphics on your web site. The 'ALT' tag will display a text alternative for the visually impaired or users that have a text only web browser.