These are the questions posted for the Lesson / Week 1 Quiz.
Lesson 1 - Quiz
- What makes a graphic a Web graphic?
- How can graphics be used to enhance Web sites?
- What are the differences between the GIF, JPEG, PNG, and PSP graphic formats?
When it it appropriate -- and when is it inappropriate -- to use each of these formats?- The IMG tag is used to add graphics to a web site.
What attributes of the IMG tag are available and what are they for?- What is the difference between aliased and anti-aliased text, and when is it appropriate to use one rather than the other?
- How does adding graphics to your web site affect download time?
Onto Extra Credit ....
1. There are five characteristics that identify graphics used on the WWW. Web graphics must be in a file format that different operating systems can recognize. Most common formats are GIF and JPEG, which are compressed formats. This streamlines the file's size so that image download time is minimized. Web graphics can utilize technique called transparency which allows for overlay of images to produce different effects. Because web graphics are viewed on computer monitors, their color palette is limited by the monitor's color capability. To insure that most monitors can correctly display a web graphic, a 216 color (browser safe) palette is commonly used to product the graphic. Lastly, web graphics can be animated, to produce moving graphics for display.2. Due to the flexibility of a web graphic, (i.e.; transparency, animation, etc.) they are used extensively to make the Web a more visually interesting experience. Flashing graphics can call attention to special statements. Small icon-type graphics can be used as controls to link the user to different pages or pictures. Graphics can also be used to illustrate text that is displayed. Web graphics are extensively used to dress up web pages by utilizing them for background textures or bordering effects. They can also provide visual separations between sections of the page.
3. GIF stands for Graphical Interchange Format. This is a form of image compression that is very commonly used for saving web graphics. It is a compressed format using the Lempel-Ziv-Welsh algorithm. This compressed the graphic into the smallest size to speed up the transmission time of the graphic. This compression format does not degrade the detail of the graphic. The maximum number of colors that can be used in this format is 256. The GIF format version 89a supports the animated graphics.
The JPEG format, also compresses graphics, but is used mostly for images produced by scanned photographs or digital cameras. This compression format, known as Joint Photographic Experts Group compression can accomodate 16 million colors in the image. And although the image is compressed in this format, it does not produce as small a file as the GIF format can, and some detail is lost in the compression. However, JPEG format will allow for the progressive loading of the image.
PNG or Portable Network Graphics format is the newest graphics compression format which does not have the limitations (color and loss of detail) of the GIF or JPEG formats. This compression provides good file compression of 16 million colors with no loss of detail. However only the newer versions of browsers can support this format.
PSP is Paint Shop Pro's proprietary file format. If graphics are saved in this format, it allows the program's powerful editing features to be fully utilized. Only PSP software can recognize this file format, however.
GIF format should be used for line art graphics such as icons, logos, and headlines. It is not recommended for photographic images due to color limitations. JPEG format is the best format for photographic images. PNG is good for both, but is not recognized by older browsers. PSP format is great for storing your images, until you need to use them in you documents. Then the images need to be converted to the appropriate format so that they can be recognized. PSP format is only recognized by the Paint Shop Program. But it allows maximum use of the programs tools.4. The IMG tag, under HTML v4 guidelines, offers the following attributes for controlling the display and position of the image referenced. Using the Tag format : <IMG SRC="image_file.gif"> attributes are listed with their definitions. Please note, "SRC" allows the addition of the URL where the image is located, as well as it's file name. This is also considered an attribute.
<IMG SRC="image_file.gif" ALIGN=LEFT/RIGHT> Aligns the image horizontally, relative to the table, frame, or page that it is in. <IMG SRC="image_file.gif" ALIGN=TOP/MIDDLE/BOTTOM> Aligns the image vertically, relative to the table, frame, or page that it is in. <IMG SRC="image_file.gif" ALT="image name or description"> Provides non-graphical browsers with the name or description of the image in text format. <IMG SRC="image_file.gif" WIDTH="X" HEIGHT="Y"> Specifies (in pixels) the height and width of the image to display. <IMG SRC="image_file.gif" BORDER="Z"> Specifies (in pixels) the width of the border to display around the image. <IMG SRC="image_file.gif" HSPACE="X" VSPACE="Y"> Specifies (in pixels) the horizontal and/or vertical space to leave around the image. 5. Anti-aliasing is a technique used to blend the edges of a graphic image with it's background. When a graphic is depicted on a computer monitor it is displayed by the pixels of the monitor's screen. The edges of lines can look ragged when there is an extreme contrast between the line color and the background color, because of the pixels' spacing. By adding intermediate colors (an average of the line and the background colors) to the adjacent pixels, a smoother looking line is produced when displayed on a monitor. This technique is often used in images containing text.
6. When graphics are added to a web page, it increases the time it takes to download the page from the server. If download time is increased too much, the user may get tired of waiting for the page to load and move on to another site. Also, depending upon the way you add your graphics, the textual part of the page may or may not load before the graphics do. Using interlaced GIFs, or progressive JPEG files can allow the text of a page to display sooner. There is also another IMG tag called <IMG LOWSRC>, that is used for loading a low resolution version of a graphic initially, thus allowing the rest of the page to load, then loading the higher resolution version afterward.