 |
Introduction to Web Graphics |
|
Introduction to Web Graphics |
A web page or web design would not be as interesting without graphics. There are two main types of graphics that web designers deal with. These will be discussed in more detail below. There will be a "Review Questions" sheet that will accompany this lesson. Use the sheet as a study guide, but don't just answer the questions. Read the entire material contained here. Many students just try to answer the questions "out of context". That means they skim through the material to find only the answers to the questions. This is a poor way to approach this type of learning. Remember, you are the person responsible for learning this material. This can only be presented to you. You must be the one who takes advantage of it.
Graphics Formats
Any graphic file that is created or scanned, must be saved in a digital format as a "graphics file". The image is saved to disk so it can be opened later and viewed or edited. A program like Adobe Photoshop®, Corel PhotoPaint®, Paint Shop Pro®, or any number of image editing programs, have the capability of saving graphics in different "file formats". A "file format" is the specific arranging of data for a particular program. For example, a CorelDraw graphic is saved in a format so it can be reopened in CorelDraw. If you try to open a CorelDraw file in Adobe PhotoShop, it will not be able to open it. The file format is said to be "proprietary". Meaning it works only in a particular program.
For the purposes of web design and HTML, you need only to be concerned with two basic formats. They are the "GIF" format and the "JPEG" format. The format of a file usually is identified by the three letters following the "." after the file name. For example, if we look at the file name "graphic1.gif", the name of the file is "graphic1". The "filename extension" is ".gif". This tells the designer that the file is a graphic file and it is a ".gif" format. The filename extension differs from the format, however. A designer can NOT change the format of a graphics file by simply renaming the file with a different extension. Many beginning designers do not understand that.
A file format is the way that a file is written. It is read by the file trying to open it and if it recognizes the format it will open it. It is impossible to "trick" a program into reading a file by changing its name. The file itself will remain unchanged. The designer can, however, open a file in PhotoShop and "export" the file as a different format. This means that PhotoShop will "rewrite" the file in a different format. That is what makes Adobe Photoshop® and some of the other image editing programs so valuable to a designer.
The following sections will take a closer look at the two formats in a bit more detail.
GIF Format
The GIF format is named from the "Graphics Interchange Format", a file format originally developed and used on the CompuServe Internet service. Its use spread to other online services and it is widely used throughout the Internet and the Web. Any web browser that supports graphics display will support the use of "GIF" files.
GIF files are somewhat limited in their color display. Most GIF images rely on a palette of 256 colors or less. For this reason, GIF's are better for graphic elements and logos that do not contain a lot of colors. If more than 256 colors are used in a graphic, some of the color information will be lost when it is saved in the GIF format. There are two ways that the file can be saved . In the first way, the graphic will create color "bands" when the palette is reduced. Some designers find this unacceptable. (Although sometimes you can get a neat looking effect!). The second method of saving the graphic as a reduced palette GIF is by "dithering". "Dithering" is the insertion of tiny dots to create the illusion of a larger palette and blended colors. It can make your images look better, but it will increase your file size. This will result in longer download times for dithered images. Since the GIF format depends on a small palette of colors, GIF images will usually load quicker than JPEG images on a web page.
GIF files do give some design options that are not possible to achieve with JPEG's. The types of GIF files that may be used in web design are listed below:
JPEG Format
The JPEG format is named after the "Joint Photographic Experts Group" format. It is a format that was developed to compress the size of more complex graphics. JPEG's are usually photographic images. They may be scanned images or digital photos. As you are probably aware, digital images of photo quality take up a tremendous amount of file space. Since the images on a web page have to be downloaded to a computer over transmission lines, it is desirable to keep the image file sizes as small as possible. For photographic images, JPEG's usually produce smaller file sizes than GIF's, with a wider color range (over the 256 color limit of GIF's).
The JPEG format reduces the file size by reducing redundant information in the file. This is referred to as "file compression". There are two basic types of file compression. They are referred to as "lossy" and "loss-less". What this means is that in order to compress images a great deal, there has to be some type of trade-off. That trade-off is quality. The more that an image is compressed in the JPEG format, the more information from the original is lost. That makes JPEG a "lossy" compression. The quality of the image will degrade as more and more compression is used. The designer must be able to find a happy medium between image quality and image size. Sometimes it is a difficult decision.
Graphic Use
Probably the most important item to learn about graphics in web design is that "less is more". In other words, try to use only as many graphics as necessary. Regardless of whether you are using GIF images or JPEG images, the more that you put on a page, the longer it will take for your page to load. Many web users are impatient, and will not wait long for graphics to load. That is because the majority of Web users pay for their access. Therefore, to them, time is money. You must always try to keep a page's loading time to under 30 seconds. The more graphics you add, or the larger the graphics you use, you risk losing viewers.
One of the top priorities for any designer beginning to create web pages and the graphics for them, is to try to use a "web compression" utility for your graphics. You do not have to buy one to do it. Some graphics compression utilities come with your web design software. You may also go on to the web and do a search for graphic compression or web compression. There are actually free sites out on the Web that will allow you to compress your graphics using their utilities on line!
Look at the examples shown below of the same image. The original was an uncompressed JPEG with a file size of 92k (kilobytes). Compare the file sizes and download times, as well as the quality of the image as the JPEG compression is increased. These files were compressed using the web compression built into the Microsoft Image Composer program that ships with the Microsoft Front Page program:
Original JPEG 92k - 20 seconds JPEG (Best Quality) 10k - 2 seconds
JPEG (Medium Quality) 4k - 1second JPEG (Low Quality) 2k - <1 second
GIF 16k - 4 seconds (Notice "dithering" (dots) in image)
Note: The inclusion of the larger files and multiple files have greatly increased the loading time of this page. However, download times are given for a 28.8 modem speed. The images may actually load faster than the times indicated here.
Another important consideration of creating graphics for the Web is "color". The use of color in your images will affect your graphic file sizes. The next area of discussion is the course section on "Introduction to Web Color". You should review this before you begin developing web graphics for your site.
Return to Web Design Home Page / Return to Academy Home Page / Top of Page
