Search Disabled |
|
|
|
Search Options | Help | Site Map | Cultivate Web Site | ||||
|
|
|||||
| Home | Current Issue | Index of Back Issues |
| Issue 2 Home | Editorial | Features | Regular Columns | News & Events | Misc. | ||
By Marieke Napier - October 2000
The aim of this article is to allow those of you who are creating your own Web site, whether for a DIGICULT project or another initiative, to get familiar with computer graphics and how they work. Understanding graphics will teach you when and how to use certain formats, which will then allow you to create better images. Better images will make your Web site look slicker and bring more visitors back to your site. After all, it is a well known fact that we all prefer to look at things that are pleasant on the eye!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Firstly let me explain that for the purpose of this article I will be using the words graphic and image synonymously. These words do have different meanings, but as these can vary depending on who is giving the definition is seems wiser to set our own interpretation. For this article an image or graphic is a picture that has been created or copied and stored in electronic form.
'Old school' Internet users may say that graphics are unnecessary for the Web. However these are the type of people who would like us all to return to the days of DOS and command line interfaces! The rest of us can appreciate the value of displaying a map of how to get to your office, showing an organisation's logo, using screen dumps to demonstrate actions, publishing pictures of the people on the committee, giving a virtual tour of a building or using cartoons to liven up your magazine. This is not an excuse for us to all go clip art mad though. An image should only be employed on a page when it can proficiently convey meaning or contribute to the effectiveness of a page in some way.
Before understanding how to use graphics it is worth getting to grips with what graphics consist of. Despite there being at least one hundred formats of images all available fall neatly into two categories:
1. Bitmap/Raster Images consist of rows and columns of equally sized dots called pixels. These image files store information about each individual pixel including its location and colour. The number of pixels in an image determines its quality, the more pixels there are the sharper the image is. This means that bitmapped graphics can become ragged when you shrink or enlarge them. Examples include MS Bitmap (BMP) and Tagged Image File Format (TIFF).
2. Vector files use geometrical formulas to represent images. Each file contains a description of the shapes and colours that make up the image. When opened the software converts the description to shapes and colours. Vector graphics are seen to be more flexible than bitmaps because they can be stretched and resized. Most output devices such as printers and monitors are raster devices but the vector image is not translated into a bitmap until the last possible moment after all sizes and resolutions have been specified. Vector-oriented images, because they are a representation of the image, tend to require less memory than bitmapped images. Examples include Windows Metafile Format (WMF) and Encapsulated PostScript (EPS).
Each image file has certain attributes that define it.
Red Green Blue (RGB) – All pixels are made up of red, green and blue phosphor dots. On a computer monitor electronic beams elicit light from the colours of this phosphorus This makes up the RGB system. Maximum brightness of a phosohor dot is 255 so pure red would be written as (255, 0, 0)
Cyan Magenta Yellow Black (CMYK) – CMYK is a common specification system often used on printers. A computer monitor can't display CMYK values.
Hue Saturation Brightness (HSB) – HSB is another specification system used on screen. Hue is a colour's position on the colour wheel and saturation is a measurement of how pure a colour is. Colours that are less pure become grey. Brightness is brightness.
One of the most comprehensive graphics guides freely available is the Yale Center for Advanced Instructional Media Style Manual [1].
If you want to be able to develop or alter images you will need some graphics software. There are a large number available. Some are can be downloaded free off the Internet, some come free with other applications, others have to be bought. PC/Windows users can try Paintshop Pro [2], MS Photo Draw [3] and Adobe Photoshop [4]. Mac users have a wider selection to choose from including DeBabelizer Pro [5], Macromedia Fireworks [6], and Adobe Photoshop and Adobe Illustrator [7]. There are certain issues that need to be taken into consideration when choosing whether to use a Macintosh or PC to create images with. The Yale Style Guide deals with these in more depth [8].
In advance of talking about what Image editors can do it is worth mentioning that if you want to avoid tears later on you should always save a copy of your original graphics file in full-colour state before you start editing your image. This file should be in a large and adaptable format such as a photoshop file or TIFF.
There are several ways to create images from scratch. You could use one of the graphics programmes mentioned or, if you have one available, use a flatbed scanner to convert hardcopy images into digital form. It is also possible to copy or download images from the Internet by right clicking on them and selecting 'save picture as'. If you do this you should check out copyright issues and always credit the author of the image. Alternately you can purchase images from collections on the Web such as Corbis picture experience [9].
Although different graphics packages allow you to achieve different effects there is a standard number of editing actions that all should let you carry out. These include changing the physical size of your image, normally achieved by Image Resize, or Image Size. Resizing an image can have effects on both the quality and memory size of an image; because the number of pixels is fixed increasing the physical size of an image decreases its resolution, decreasing its size increases it's resolution. Changing the canvas size of an image does not change the actual dimensions of an image only the size of the background, this may create extra space or crop the image. Cropping an image to focus on a smaller area is normally achieved by selecting a certain area and cutting or entering. You may also want to adjust the colour of your image, this can be achieved in many ways such by adding filters, filling in colour areas, using the paintbrush or changing the colour mode. All scanned images are in Red Green Blue (RGB) colour mode by default. This mode is acceptable for all on screen graphics except GIFs, GIFs must be index mode. If you wish to add text to your image most image editors have a text facility. Text does not normally work well on JPEGs.
 |
When working on Web page graphics the number of formats available at your disposal decreases. While PowerPoint 97 [with filter] accepts 19 types of graphic format, Web pages only accept a few, only two of which are accepted on the majority of browsers. The GIF and JPEG have many similarities, for a start both are raster images. They are both cross-platform formats, allowing them to be viewed on Macs, PCs or Unix systems and both formats are built around a compression scheme that can greatly reduce file size. It is this compression element that has made these two formats the key players in Web graphics. Nobody likes to wait for anything these days, especially not large cumbersome graphics files.
CompuServe designed the GIF in 1987 and it is the most widely supported format used on the Internet. All graphical browsers support it. It works best when used for line art and simple images such as logos because it only supports 8-bit colour. The GIF uses and stores a colour table or palette for each picture making it transportable. GIFs can be interlaced. This means that browsers that support interlaced files start by creating a low-resolution version of the image, which then sharpens up (see Figure 2). The interlaced GIF is not faster loading but works well at appeasing impatient users who are more willing to wait when they can see something appearing. GIFS can also be saved as transparent. This can have knock on effects though as usually one particular colour is specified as transparent and may be used in more than one place. Another effect available for use with GIFs is antialiasing. This evens out the jagged edges of a selection by softening the colour transition between the border pixels and background pixels.
  |
| Image 1 Normal GIF Image 2
Interlaced GIF Figure 2: Comparing Normal and Interlaced GIFs (Once the images have been loaded up they will be cached so you may not be able to see this effect fully) |
GIFs use Lempel Zev Welch (LZW) compression. LZW is a 'lossless compression' and squeezes out the inefficiencies in data storage without loosing data. This works best on images with large areas of similar colour. However colour fidelity is not usually preserved intact and images whose size has been altered are often reduced in quality. LZW is actually patented and officially royalties should be paid by Web developers however this rarely happens. The GIF format itself costs vendors like Netscape and Microsoft a fair amount of money because it is owned by Unisys who charge royalties. Recently different varieties of GIF have become available such as GIF87a and GIF89a. These will work in any Web browsers that support basic GIF file format.
  |
| Image 1 ukolnlogo.gif 3K Image 2 ukolnlogo.jpg 19K Figure 3: Comparing Diagramatic Images |
JPEGs were developed as an alternative to GIFs for photographers, graphic designers, artists and others for whom quality is the foremost driver. Unlike GIFs JPEGs set no limit on the number of colours that can be used and so works best when used for natural, complex, high resolution images such as photographs. In contrast to the GIF the JPEG is bad for lettering and does not support transparency.
JPEGs are created by using a lossy compression algorithm which removes information to which the human eye is less sensitive. This information removal makes it a bad format for intermediate storage. For more information on compressing GIFs and JPEGs see Siegel's Creating killer Web sites site [10]. The progressive JPEG is the equivalent of the interlaced GIF however it is still relatively new and many image editor programmes do not support it yet. The official site for document distribution and discussion by the international JPEG groups is a useful resource for information on more recent developments [11].
  |
| Image 1 girl.gif 50K Image 2 girl.jpg
26K Figure 1: Comparing Photographic Images |
The PNG was developed as a patent-free alternative to the GIF. Like the GIF the PNG is an extensible file format that uses lossless compression but with the added bonus that it supports truecolour. This means that it can be used by indexed-colour and grayscale images. It also uses an optional alpha channel for transparency. PNG also has an automatic correction facility for different monitor settings, this is known as Gamma and chromaticity correction. Unfortunately some older versions of Web browsers do not support PNG images.
For more advice on creating, storing and delivering digital images you can visit the Technical Advisory Service for Images (TASI) Web site [12]. TASI is based at the University of Bristol and funded by the Joint Information Systems Committee (JISC).
With the continuing exponential growth of the WWW it is inevitable that in the future there will be more Web graphic formats and that these will carry more functionality. The World Wide Web Consortium (W3C) continue to push PNG format along with the Scalable Vector Graphic (SVG). SVG is a new vector graphics format that has been written in XML and is stylable with cascading style sheets (CSS). This means that styles can be applied within the image. SVG files are created using a Document Object Model (DOM) which allows a certain amount of animation via scripting. Event handlers such as onmouseover and onclick can be assigned to any SVG image. Another significant development is that text in the image can be searchable. SVG is currently in it's eighth Working Draft, and has entered a second last call phase for more information on SVGs have a look at the W3C [13] site or Janus Boye's article [14].
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Marieke
Napier
Information Officer
UKOLN
University of Bath
Bath
England
BA2 7AY
m.napier@ukoln.ac.uk
<http://www.ukoln.ac.uk>
Marieke Napier is editor of Exploit Interactive and Cultivate Interactive Web magazines.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
For citation purposes:
Napier, M. "Making your DIGICULT Web site Visually Appealing: An Introduction to using Graphics on the Web", Cultivate Interactive, issue
2, 16 October 2000
URL: <http://www.cultivate-int.org/issue2/graphics/>
Date of Article: 16 October 2000
|
|
