Web Graphics

Introduction / Background

Even if you choose to make PDF files it may be helpful to understand a little about how computer graphics and computer hardware are interrelated.

First, all computers that have a monitor attached have a graphics adapter. The graphics adapter is what packages the information that is being displayed. These adapters have different capabilities, and have evolved profoundly over the years.

The monitor has to be able to display the information that the adapter is sending to it. Since this is a bit geeky, many people just don't know much about it.

Pixel - the smallest element that makes up an image.

Resolution - the number of pixels in the horizontal (columns) and vertical (rows) that span the visible area of the monitor.

Most people don't change the resolution that they view things at very often. (Many don't even know how, or that they can!) In Windows you can easily check this by right-clicking on the Desktop and choosing Properties, then select the Settings tab. (This is the same as using the "Display" item from within the Control Panel.)

Some standard settings:

VGA
= 640 x 480 pixels

SVGA = 800 x 600 pixels

XGA = 1024 x 768 pixels

SXGA =  1280 x 1024 pixels

UXGA = 1600 x 1200 pixels

For a long time, everyone used 640x480, then for a while it was 800 x 600, now it depends on how big your monitor is and how old your computer is. Many new systems are configured to XGA or SXGA by default.

Why do we care about this? Well browsers will reformat text to fill the screen, and the Operating System (Windows) can be told to scale all fonts. However, browsers only show an image in the pixel dimensions that they are provided.

Note: Newer versions of IE and perhaps other browsers have a "Smart Image Viewer" feature. If this is enabled (by default) then images that are bigger than the screen resolution will be digitally resized to fit your window. Depending on the image, this can actually make it difficult to view! This is especially true if there are a lot of thin lines in the image.

It is a good idea to make images that are 800x600 (with today's mix of users), but down the road it will be more and more common to have higher resolution images.

Here are some image size examples.

More sophisticated web pages will determine the user's screen size (information offered by the browser) and either include the appropriate image dynamically, or just squeeze the image into a smaller area in the page, by constraining the viewed dimensions of the image. This isn't all that difficult, but is beyond the scope of this session.

Color Depth

Color depth refers to the amount of different colors that can be represented at each pixel. When VGA was new, having a computer that could generate 256 colors was pretty good. Now we would consider this to look more like a cartoon picture than a high quality picture of the world around us.

The number of colors that can be displayed is based on the size of the block of information used for each pixel. Computers use bytes as a standard block of data. Since a byte is made of 8 bits and each bit has two possible settings, there are 2⁸ combinations in one byte. This is equal to 256 colors. So a 8-bit color image would have a file size that is equal to the product of the dimensions of its resolution (800 x 600 = 480,000 bytes, or about 480k). If we decide to use 24-bit color then each pixel uses three bytes of information. The file is three times larger, but now you can describe more than 16 million colors and images look like the real world and not the Sunday comics.

GIF images can only show 8-bit graphics. Good for drawings, but limited detail in high quality photos. Compression for GIF images is by copyright only, so most software writes uncompressed images.

JPEG (or jpg) images can show higher color depth images which is why they are common. This format also supports a form of lossy compression. (Often described as "output quality" in software, and can be adjusted at the time you save the image.)

PNG is an upcoming image type that offers support for different color depths and lossless compression. It is supported by almost every browser, even fairly old ones.

TIFF is the file format used for Fax images. It comes in different color depths and different compression formats. It is not supported in browsers without a third-party plug-in, or external viewer.

Possible Questions

What is a lossy compression?

Lossy compression schemes allow for smaller file sizes by sampling the information less frequently than the original presentation. Using a lossy compression results is a different product when you uncompress the content on the client side. MP3 audio files are an example of this technique. The lower the sampling rate, the smaller the final file size (and the lower the quality compared to the original).

What is an example of a lossless compression?

If you have ever used a "ZIP" file, then you have used a lossless compression method. When you "Zip-up" some files and send them to someone, the recipient gets the same contents that you put into the Zip file upon extracting them. Imagine what it would be like to have a lossy zip algorithm, where every few letters from a Word document were missing when you uncompress the file!

How can I save the image on a web page that I have found?

First, if you borrow an image remember to give credit in your notes. We expect our students to do this, so we should too! Next, the answer to this question may be as simple as using the right mouse button to click on the image and then choosing to save it from the pop up menu.. This should work for most images found in web pages.

I tried to save the image but I don't get a menu when I right click; what can I do?
This is what happens if the image is displayed using Java or some other type of technology (or HTML trick). What you can do is "grab" the image from your screen. Here's how to try:

First, get ready by opening MS Photo Editor (or other image program). Photo Editor is often found in the "Microsoft Office Tools" folder and is not installed without adding it in Office 2000.

Press	To do this
Control+Print Screen	Captures the entire desktop (multiple windows in view)
Alt key + Print Screen	Captures current active window
After deciding which capture type you want, then go to Photo Editor and choose the Edit menu and then "Paste as New Image" Click the dashed box on the tool bar, draw a rectangle on your image (always work with full sized windows when doing this), and then choose Image => Crop and then OK. The crop window contains the coordinates of your "rubber band box" that you drew. After drawing the region to crop, you can adjust the edges by selecting the various markers on the corners, or middle of the sides, top or bottom. Save it as one of the supported image types (GIF, JPEG, PNG) Remember to copy the URL to the source of the image for reference in your document.

Tips Home

Tips-n-tricks