Web Graphics
Web graphics can be used as part of the web content to add to the visual effect of a web site, or as buttons or maps for navigation.
The following list is a summary of the types of common graphic images that are found on web pages:
- Navigation buttons - Used to help visitors navigate your web site.
Image maps - Also used to help visitors navigate your web site. - Logo - Used for your corporate or business identity.
- Bullet points - Used to draw your visitors' eyes to the main points.
- Mastheads - Also known as a title graphic. Main function is to let your visitors know which web page they are on.
- Divider lines or horizontal rules - Commonly used to divide page into areas.
- Background images - Used to enhance the visual appeal of a web page.
- Pictures, cartoons, charts - Used to convey information and make your web pages more interesting-- 'A picture speaks a thousand words'
Image Formats
Images on the Web are usually GIF, JPEG or PNG file formats:
GIF
The original GIF format was designed by CompuServe in 1987, so images in this format are of the type GIF87. When the GIF format was extended in 1989, CompuServe added several new capabilities to the GIF format including transparency, and streaming animation using multiple images in one GIF89a file.
It was intended to be a platform-independent format with which users could transfer files over modem lines at low speeds. Today the overwhelming majority of images on the Web are in GIF format. Virtually all Web browsers that support graphics support the GIF file format for images. The Gif format Gif has the following features:
- Supports interlaced images- Interlaced GIFs appear first with poor resolution and then improve in resolution until the entire image has arrived, allowing the viewer to sample the picture while waiting for the rest.
- Transparent images-The background of a GIF can be made transparent, so you see the background colourof the browser window you're in.
- GIFs can also be animated.
- GIFs only support 8-bit colour-256 colors).
- Photographs saved as GIFs can also lose their detail and a wide range of values.
- Uses the LZW compression scheme, which reduces file size without loss of image quality.
JPEG
JPEG stands for Joint Photographic Experts Group. JPEG is excellent for most realistic images (photos for example, but not line drawings or logos). JPEG is not good for small, detailed text or images with hard edges JPEGs main features are:- Supports 24-bit colour, over 16 million colours.
- It uses a powerful, though nominally "lossy", compression method i.e the quality deteriorates with the compression.
- Inline JPEG files are not supported by all Web browsers. (Only very old browsers).
- There is no support for interlaced images.
- No support for transparency.
- No support for animation.
PNG
PNG is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF.- It contains an unregistered compression algorithm
- It supports 24 bit images (millions of colours like JPEGs)
- It's available for all platforms
- It supports interlaced and transparent features
- It supports other interesting features (such as particular transparencies)
- However PNG isn't a standard yet and several browsers don't support it.
Which Format?
The HTML specification does not limit which graphics format you can use. In practice, your choice will be determined by considerations such as:
- The image quality,
- Availability in clients
- The data size.
- Requirements for transparency, streaming, animation or progressive rendering
- Whether the format is an open standard or a commercial one subject to patent fees.
- The format of the existing image
When to use GIFs or JPEGs- Quick Guide
- Use GIF format with graphics that you have created on your computer such as horizontal rules, illustrations, buttons, logos, or animations.
- Use JPEG format when the images are scanned pictures or photographs.
Considerations on Use of images
Some web browser can't show images (in fact they are text based browser, such as Lynx. You should use the ALT tag in order to show an alternative text in place of the image (note: this is a requirement in xhtml). In this case, a text based browser will show the alternative text. The alternative text will explain the image content.
Example
<IMG SRC="home.gif" ALT=" home page!">
It will show ' home page' in place of the 'home.gif' image.
- Images are heavy HTML elements (a text based web page is on an average smaller than a simple image).
- Don't use background images that make text and graphics hard to see.
- Don't use large graphic files if possible.
- When using large graphics make them available via a thumbnail images.
- Don't overuse animated GIFs, blinking text, image buttons etc.
Images Sizes
There are two aspects to image/picture size to consider:
- File Size- The larger the file size the longer the image will take to download and the slower the web page will appear. Try to keep images under 60KB. The larger the screen size then usually the larger the file size.
- Screen Size- How much of the screen( measured in pixels) the image covers. This varies from small thumbnails (60-100pixels) to images that fill the entire screen (600-800px).
Reducing the Image Size
Again you can reduce the screen size or the file size or both. There are two methods used to reduce the screen size:
- Cropping - This removes unwanted parts of the image and means that the original image and the finished image are different.
- Resizing- This leaves the entire image intact but reduces the image dimensions. Although the image remains intact you may loose the image details. Resizing can also be performed on a cropped image. You can download a free thumbnail tool here
Both cropping and resizing will reduce the physical file size of the image. The file size can be further reduced by compression.
Related Articles:
Useful External resources: