Web Graphics - Lynch & Horton

Directions for Deliverables

1. Read Web Graphics (Chapter 7 in Web Style Guide � online Site) .

2. Using the information you gather from your reading to guide you as you plan the graphics collection for your site.

3. Save the document as a PDF file or html and link to your online Activities Guide.

Questions to guide our graphics design:

1.  What imposes limits on the size of files and number of colors that you will include in graphics used on the web?

The parameters that influence the display of Web graphics are the user's display monitor and bandwidth capacity. A good segment of the Web audience accesses the Internet via modem, and many view Web pages on monitors that display only 256 colors. This reality imposes limits on the size of files and number of colors that can be included in Web graphics.

2.  What are the maximum numbers of colors that can be seen on an 8-bit screen? A 24-bit screen?

When 8 bits of memory are dedicated to each pixel, each pixel could be one of 256 colors. (256 = 2 to the eighth power; in other words, 256 is the maximum number of unique combinations of zeros and ones you can make with 8 bits.) This kind of computer display is called an "8-bit" or "256-color" display, and is common on older laptop computers and desktop machines.

If still more memory is dedicated to each pixel, nearly photographic color is achievable on the computer screen. "True-color" or "24-bit" color displays can show millions of unique colors simultaneously on the computer screen. True-color images are composed by dedicating 24 bits of memory to each pixel; 8 each for the red, green, and blue components (8 + 8 + 8 = 24).

3.  What is the color depth of your home computer?

24 bit (32 bit at work)

4.  How might dithering influence what your readers will see on their 256 monitors?

The effect of using "unsafe" colors for your major graphic elements is that readers with 256-color displays will see a lot of heavily dithered images. This may be acceptable for some visual elements on the page, but if your basic navigation buttons and background graphics are dithered, parts of the page will be hard to read and the overall effect will be amateurish.

5.  What are the two primary graphic web file formats?

The two primary Web file formats are GIF and JPEG. A third format, PNG, has been available since 1995 but has been little used because of poor browser support.

6. Which of these formats is limited to 8-bit color? How does this influence the size and download time?

GIF files incorporate a compression scheme to keep file sizes at a minimum, and they are limited to 8-bit (256 or fewer colors) color palettes.

7.  What is the advantage of using an interlaced GIF? Can you identify one on the web?

In interlaced GIF files the image data is stored in a format that allows browsers that support interlaced GIFs to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is downloading. Many people find the "fuzzy-to-sharp" animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the reader a preview of the full area of the picture while the picture downloads into the browser.

Interlacing is best for larger GIF images such as illustrations and photographs. Interlacing is a poor choice for small GIF graphics such as navigation bars, buttons, and icons. These small graphics will load onto the screen much faster if you keep them in conventional (non-interlaced) GIF format. In general, interlacing has no significant effect on the file size of GIF graphics.

8.  What is the advantage of creating a transparent GIF (GIF 89A) for your web page?

Transparent images can be placed on any type of background color, which can eliminate the square around an image (like the ones on my homepage which I haven't corrected yet).

9.  Animated GIFs are commonly used on web pages. What is the major drawback to you including an animated GIF in your website?

The GIF format applies no compression between frames. GIF animations are rarely used in a meaningful way, and generally distract readers from the main content of the page.

10.  It would be reasonable for you to have small navigation graphics, buttons, balls, and other elements on your web pages. What graphic web file format will you save these in and why?

In practice, however, most Web developers will continue to favor the GIF format for most page design elements, diagrams, and images that must not dither on 8-bit display screens because they look better than JPEGs.

Designers choose the JPEG format mostly for photographs, complex "photographic" illustrations.

11.  Normally photographs are jpeg files? Why?

Designers choose the JPEG format mostly for photographs, complex "photographic" illustrations, medical images, and other types of images in which the compression artifacts of the JPEG process do not severely compromise image quality.

12.  List the advantages of GIF files and of JPEG files.

Advantages of GIF files

  • GIF is the most widely supported graphics format on the Web
  • GIFs of diagrammatic images look better than JPEGs
  • GIF supports transparency and interlacing

Advantages of JPEG images

  • Huge compression ratios mean faster download speeds
  • JPEG produces excellent results for most photographs and complex images
  • JPEG supports full-color (24-bit, "true color") images

13.  What must you keep in mind if using a background image?

Pages that use large background images take longer to download and because the background patterns tend to make pages harder to read unless they are carefully designed.

14.  What is an image map? Can you identify one on the web?

Imagemaps offer a way to define multiple "live" link areas within a graphic on a Web page. Imagemaps have become a standard feature of most professionally designed Web sites because they offer an effective combination of visual appeal and, when used properly, space-efficient functionality. Imagemaps are particularly effective when incorporated into moderately sized "splash" graphics at the top of home pages or into the "signature" graphics or logos that define your pages.

Imagemaps are the only way to incorporate multiple links into a graphic illustration. Imagemaps are also the ultimate way to overcome the vertical, list-oriented, graphically inflexible norms of conventional Web pages built with standard HTML tags.

http://www.thesomersetcollection.com/ (also mystery meat)

15. Explain the advantages and limitations of PNG files.

PNG's features include a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image's content.

Unfortunately, the PNG graphic format is not yet widely supported, and the current implementation of PNG graphics in the major Web browsers does not fully support all of PNG's features.

return to my Lynch page

return to my Activities page


Leading Cloud Surveillance, Recording and Storage service; IP camera live viewing

Leading Enterprise Cloud IT Service; cloud file server, FTP Hosting, Online Storage, Backup and Sharing

Powered by FirstCloudIT.com, a division of DriveHQ, the leading Cloud IT and Cloud Surveillance Service provider since 2003.