Graphics Image or Text; Which More Important In Webpage?
By Tan Chong Sen ([email protected]) and Donny Lee Yong Choy ([email protected])
Summary
This document is about the types and forms of graphic images and texts that can be found in web page nowadays. It also discusses the cons and pros of text and graphics images in a web page.
Introduction
Text is any form of written material. Essentially, there are three types of text that are used to produce pages for documents: unformatted text, formatted text, hyper text. Graphics are design, drawings or pictures, and visual arts such as printing, writing or drawing, especially for commercial use. There is a range of software packages and programs available for the creations computer graphics. There are two method to represent graphics in webpage, and there are bit-map vector or structured graphic.
Types of Texts
Hypertext is non-sequentially linked pieces of text or other information. If the focus of such a system or document is on non-textual types of information, the term hypermedia is often used instead. In traditional printed documents, practically the only such link supported is the footnote, so hypertext is often referred to as "the generalized footnote."
The things which we can link to or from are called nodes, and the whole system will form a network of nodes interconnected with links. Links may be typed and/or have attributes, and they may be one or bi-directional. The user accesses the information in the nodes by navigating the links.
Forms of Graphics
A wide variety of graphic/image file formats exist. Many are dependent upon particular hardware/operating system platforms, while others are cross-platform independent formats. This introduction will only touch upon some of the most common formats. While not all formats are cross-platform, there are conversion applications that will recognize and translate formats from other systems.
Almost all formats incorporate some variation of a compression technique due to the large storage size of image files. These can be classified into either lossless or lossy formats. Lossless formats compress all of the original captured/created data of the image/graphic using algorithms that allow the original data of the file to be recreated without loss of any data, hence the name. Lossy formats discard data when storing images. The data discarded is in most cases beyond the ability of the human vision system and thus there is no discernible difference between the original image and the compressed image.
GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed piece of software suitable for such tasks as photo retouching, image composition and image authoring. It is an extremely capable piece of software with many capabilities. It can be used as a simple paint program, a expert quality photo retouching program, an online batch processing system, a mass production image rendered, a image format converter, etc. GIMP is extremely expanded able and extensible. It is designed to be augmented with plug-in and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted. GIMP is written and developed under X11 on UNIX platforms. There is an OS/2 in development. There is also a native win32 port available at Tor Lillqvist¡¦s site. And some people have reported success in getting GIMP to run in MacOs x .
This is a few of GIMP features. This is only the tip of the iceberg.
JPEG is a standard created by the Joint Photographics Experts Group. It utilizes compression techniques that are specifically designed for photographic images. It takes advantage of limitations in the human vision system to achieve high rates of compression. JPEG is a lossy format which allows a user to set the desired level of quality maintained in the image. Higher qualities requires more storage but is only needed for particular images. Allowing users to control the quality/compression decision is a superb advantage of JPEG since it utilizes a person's innate vision processing, their knowledge of the application of an image and their knowledge of the available memory of the particular storage system. JPEG (Joint Picture Experts Group) refers to a set of formats that support full-color images and stores them in a compressed form. JPEG is a 24-bit storage format that allows 16,777,216 colors (although all these colors don't have to be used, and often are not). With that much detail, it is easy to see why it is the choice for storing photographs. JPEG is also the format used if you have lots of colors and subtle color changes in color based "clipart".
The Tagged Image File Format (TIFF), provides a mechanism for storing many different types of images (e.g., monochrome, grayscale, 8-bit & 24-bit RGB, etc.). TIFF tags the type of data in the file that describes the image type. The latest revisions to the specification provides tags for compression formats, but this is not supported by many programs that implement TIFF. TIFF is a lossless format (when not utilizing the new JPEG tag which allows for JPEG compression). The TIFF format was developed by the Aldus Corp. in the 1980's and later supported by the Microsoft Corp. Since TIFF does not provide any major advantages over JPEG and is not as user-controllable it appears to be declining in popularity.
The UNISYS Corp. and Compuserve (a commercial network), devised the Graphics Interchange Format (GIF), to facillatate transmission of graphical images over phone lines via modems. Due to the relatively slow transfer rate of modems, file size was the over-riding design goal behind GIF. The Lempel-Ziv Welch algorithm (a form of Huffman Coding), modified slightly for image scan line packets (line grouping of pixels), yields the high compression rates that the GIF format achieves. Part of the reason for small GIF file sizes is due to the limitation of the format to only storing 8-bit color images. Two problems that GIF and other 8-bit formats face is which 256 colors should be used and how are they stored or represented. GIF answers these problems by indexing the colors in a series of CLUTs (Color Look Up Tables). Because Compuserve is accessed by users of a wide variety of different computer systems the format was also designed for portability. Until the advent of JPEG, GIF was the dominant graphics format. GIF files can display images in black and white, gray scale, or color, but the files are limited to 265 (or fewer) colors. GIF supports "interlacing", "transparency", and "animation". GIF files are usually smaller and, therefore, load faster than JPEG.
Interlaced GIFs are files that load in stages on the browser, starting off blocky and finally coming into full focus. The idea behind them is psychological, because the time to download the image is still the same. The user, however, sees a fuzzy version of the image first.
A transparent GIF has one color (set by you) which is masked out, thus allowing the background image or color (from the web page) to show through. Even if you are using a white background, creating a transparent GIF creates the illusion of irregularly shaped art work, so adds variety to the visual display. The transparency effect is created using a graphic program.
Animated GIFs show motion on the screen. The single image actually has multiple images stored in one file, with instructions to go from one image to another. Some web masters and users strongly dislike animated GIFs. Does the animation serve a function? If you are using animation just to say "look at what I can do", think about your users and if they will find the animation irritating after seeing your site 20 or more times.
Ways to represent graphics
There are two methods for representing and storing graphic/image data in uncompressed form. A bit-map representation stores the graphic/image data in the same manner that the computer monitor contents are stored in video memory. A monitor screen image is composed of small points, termed pixels (a contraction for picture element), similar to a photograph in a newspaper. The number of pixels that compose a monitor image determine the quality of the image (resolution). The more pixels (e.g., 640 X 480; listed as horizontal X vertical numbers), the higher the resolution. The pixels of a screen image are represented differently depending upon the type of image/monitor display.
An example 24-bit bit-map color image
The second method for representing and storing graphic/image data in uncompressed form is a vector or structured graphic representation. A vector graphic file format is composed of analytical geometry formula representations for basic geometric shapes (e.g., line, rectangle, ellipse, etc.). This format is used primarily for storing graphics produced with technical drawing pograms. Although some method for imbedding a bit-map as part of the image is usually provided. The major advantage of a structured graphic representation is that the geometric formulas are scale and resolution independent. The graphic can be resized easily by simply changing the coefficients of the geometric formulas. This negates the errors and side-effects introduced when scaling bit-maps (i.e. aliasing or jaggies).
A example of a vector of structured graphic.
Pros and Cons of Text in Web Page.
Text are most basic and traditional form of media in a web page. History has recorded that web page in the Internet has started in with only text and eventually to hypertexts. The best part of web page contain more text and little graphics text or no graphics images at all that they¡¦re faster loading time. To some net surfers it is easier to interpreter the information and message with hypertexts.
Download times rules the web and since most users have access speeds on the order of 28.8 kbps, Web pages can be no more than 3 KB if they are to download in one second which is the required response time for hypertext navigation. Users do not keep their attention on the page if downloading exceeds 10 seconds, corresponding to 30 KB at modem speed. Keeping below these size limits rules out most graphics. Graphics would look crummy anyway. But with only text in a web page it would be dull for browsers and inappropriate for browsers looking for images. With no images around, such web page will not attract more browsers.
Pros and Cons of Graphic Image in Web Page.
Graphics give your web pages some visual appeal. The images don't have to be big or flashy or dominate the web page. Graphics, however, should be something that adds to the site or serves a function, and should not just be thrown on the site. Ultimately what type of graphics are used on a page and the amount of graphics will be affected by (1) the purpose of your site, (2) the primary audience of your site, (3) what type of connectivity your audience has (modem speed or dedicated data lines?), and (4) how much time you can devote to your web site. Although the specific coding to put a graphic image on a site is easy, as you will soon see, creating good images that load quickly and enhance your site will add time to creating your documents, as opposed to just having text.
The negative side of using images is the additional load time they cause when your documents are accessed. In this regard, you need to consider your audience and if they are coming to your site via modem. For persons coming in on a modem at 28.8 kilobit per second (kbps), a modest 36 KB graphic on your web page could take 10 seconds or longer to load into the reader's browser. This is an important difference between the web and printed documents. You can have as many large images (like multiple maps and illustrations) in a printed document, and your user does not have to wait to see these images. They are part of the document.
Each graphic used on a web page, however, has to be downloaded to the local user's computer, beside the text, so the more graphics on a page, the more time it takes that document to appear on the user's computer. If initial page has a large image (in kilobytes, not necessarily physical size on the screen), a user may not linger to see your document load if it takes too long to come up. To illustrate this, take a few minutes to load each of these pages, and see how long each page takes to load (if you are on a data line, you cannot easily tell load speeds on a modem, but there will be an exercise you can do later to tell you how long a page takes to load on various modem speeds.)
Conclusion
To a web page, both graphics and text are important. To represent an object, it can be in a form of graphics or text, which both is very appropriate to let people understand what message or information in the site. But right now, multimedia is gaining popularity on the Web with several technologies to support use of animation, video, and audio to supplement the traditional media of text and images. These new media provide more design options but also require design discipline. Unconstrained use of multimedia results in user interfaces that confuse users and make it harder for them to understand the information. Not every webpage needs to bombard the user with the equivalent of Times Square in impressions and movement.
Reference:
http://www.introductiontointernet.com
http://www.grantasticdesigns.com
http://www.cs.cf.ac.uk/Dave/Multimedia/node169.html
http://www.usd458.k12.ks.us.html
http://www.cica.indiana.edu/graphics/image.formats.html
A.S.Hornby, Oxford Advanced Learner¡¦s Dictionary of Current English, Fifth Edition, Oxford University Press, 1995.
Multimedia Communications, page 67, 74.
Learn more
http://ei.cs.vt.edu/~netinfo/backupcs1604/graphicformats.html
http://info.med.yale.edu/caim/manual/graphics/graphics.html