|
|
  
  |
 |
|
Web Graphics Primer: First off, if you are looking for anything remotely advanced here, then this is the wrong article. The point of this is to give readers a very basic overview of web graphics. So with that in mind, let's get started. To understand web graphics you need to understand the concept of pixels. Pixels are basically rectangular blobs that make up pictures. The size of an image is described in pixels as are computer monitors. For monitors, the higher the pixel rating, such as 1280 x 1024 means that it takes roughly 1280 pixels across to fill the screen and 1024 down to fill. The higher the pixel rating of a screen translates to the ability to display larger images without scrolling. Image size translates onto a screen based on it's own size and the display capability of the monitor. For example, a 640 x 480 image will display easily within a browser of a larger monitor, but may require scrolling on an 800 x 600 monitor after you take into account the pixels used by the web browser display! The next concept you have to grapple with is that of dots per inch or DPI. Most printers will print at 300 DPI and many will print at much higher dot densities, which is fine for printing, but computer monitors only display at 72 DPI so anything over that just increases file size without increase sing image clarity. The lesson here is that if you are scanning pictures for use on a web site, scan at a DPI of around 72 to no more than perhaps 100 and then only if the picture fails to scan properly at the lower setting. Figure that an image size of 640 x 480 will completely fill the browser window in most cases, so unless your putting a pictures on the web that you intend for people to print out, keep it small and low DPI. The next issue for most graphics is color. The simple fact is that color critical applications on the web are virtually impossible to solve with current technology. Red is orange on one monitor and may even be violet on another. Advanced image handling software such as Photoshop can convert images using what are called Web Safe Colors. This is presently about as good as you can do but for most application, it isn't a real issue. Formats are the final issue. The two main formats used on web sites is the JPEG compression codec and GIF. JPEG works best for photographs while GIF works best for line drawings and most logo style images where there are a set number of colors in the image. Using the proper format will keep the image size as small as possible. GIF also supports two additional format subsets on the web, namely transparent Gifs and Animated Gifs. In a transparent GIF, a selected color, usually the background color does not display, but rather allows the web page background color to show through. TIP: If you are trying to make a transparent GIF, use a background color close to that used on the web page to avoid the nasty off colored pixels around the image! Animated GIFs are actually a series of images that display in sequence in the browser. Quite a few moving banners, little mailboxes whose doors open and the like are animated gifs. These can be built in several free products available on the web. Well that is it
for our short intro. Have fun! Copyright © 2002 Rick Williams
Multi-Media
Design
|